【サンプルコード付き】Django × Reactで作るサンプルSPAアプリを紹介

1.はじめに

こんにちは、ぎーたかです。

今回はDjango × Reactで作るサンプルアプリについての紹介記事です。

前回の記事では、Reactを使ったモダンWebのアプリの概要を紹介しました。なので、今回は簡単なサンプルアプリの作り方を、特に実装方法やバックエンドアプリとの連携方法について用意したソースコードを使って説明します。

『モダンなWebアプリって何？』という方は、前回の記事を読んで欲しいです。TwitterやInstgramなどの、WebアプリUIについてと、それがどんな技術で作られているかの概要を知ることができます。

Reactの基本文法は、公式チュートリアルを一通り学べば、調べ学習をしながらある程度開発を進められるようになります。しかし、バックエンドアプリと組み合わせた動的なWebアプリを作るには、Reactと組み合わせる技術の選定・学習が険しい道のりだったりします。

そのため、今回の記事では一つの例として、Django REST FrameworkをReactと組み合わせた形で、実装方法と組み合わせ方のポイントをサンプルアプリを用いて解説します。

サンプルアプリの題材は、過去にDjangoマガジンのこちらの記事で紹介したSNSアプリです。

DjangoやRuby on Railsなど、Webフレームワークを使った開発ができて、Web開発者としてスキルアップしたいと考えている方にとっても、Reactを始めるきっかけとできる内容になっているので読む価値ありかと思います。

是非最後まで読んでくださると嬉しいです。

それではまず、解説するサンプルアプリの機能を簡潔にまとめて説明していきます。この記事では、次のパートで解説する機能を作っていくことを念頭に置いて読み進めてください。

2.解説するサンプルアプリの主要機能

今回紹介するサンプルアプリは、TwitterライクなSNSです。
Web開発学習のお題としては、よくある例ですね。

新しいプログラミング言語を習得する際のFizzBuzzプログラムと同じくらいに基礎的な作成課題と思うので、内容もとっつきやすいかと思います。

今回のサンプルアプリで解説する機能は、以下を取り上げます。

■サンプルアプリの解説機能
①ユーザー登録、ログイン、ログアウト
②投稿一覧表示
③投稿

Twitterの機能と聞くと、いいね機能・フォロー機能も作りたくなります。
しかし、今回の記事の趣旨はReactとDjangoの組み合わせで、アプリを作る全体観を学ぶことにあります。

そのため、最低限の機能に絞って解説した方が、DRF×Reactのコーディングの特徴を集中して学習できるだろうと考え、上記の機能に絞り込みました。

なお、記事の最後にはサンプルアプリのGitHubリポジトリのリンクを掲載しておきます。リポジトリのアプリには、いいね・フォローの機能も組み込んで作ってみました。気になる方は参考までに見てみてください。

それでは、コーディングの解説の前に、開発準備について説明しましょう。

3.開発準備

■ライブラリインストール
Django × Reactで作っていくと宣言しましたが、正確にはDRFとNext.jsの組み合わせで実装していきます。

DRF（Django REST Framework）は、APIを作るためのDjangoライブラリで、Djangoプロジェクト外部からデータベースとのやり取りを主な目的として使用します。

Next.jsは、便利な追加機能をデフォルトで持つReact拡張版で、通常のReact同様にWebアプリのUI・フロントエンドの描画を主な目的として使用します。

■DRFの使用準備
Django・DRFのインストールをしましょう。

# pip list | grep djangoでdjnago, djangorestframeworkのバージョン出れば不要
$ pip install Django==3.*                    # Django3系の最新版
$ pip install djangorestframework==3.12.*    # DRF3系の最新版

■Next.jsの使用準備
Node.jsのインストールをしましょう。
Next.jsは、Node.jsのnpxコマンドが使える様になれば簡単にプロジェクトの雛形を作れるので、Node.jsの使用準備を進めます。

# brew -vでバージョン出れば、以下は不要
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# node -vでバージョン出れば、以下は不要
$ brew install nodebrew
$ nodebrew ls-remote				# 出力結果で最新バージョンを覚えておく
$ nodebrew install-binary v**.**.*  # 上の出力結果のバージョンを**.**.*のアスタリスクに埋める
$ mkdir -p ~/.nodebrew/src
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile    # パス通す

■アプリのディレクトリ構成
以下の構成で、プロジェクトを作っていきます。
DRF × Next.jsで重要なディレクトリ・ファイルのみ、役割をコメントで説明します。

sample-app/                 # トップディレクトリ
|-backend/                    # DRFディレクトリ
|    |-config/                  # 設定ディレクトリ
|    |    |-__init__.py
|    |    |-asgi.py
|    |    |-settings.py           # 設定ファイル
|    |    |-urls.py               # URLディスパッチャ設定ファイル
|    |    '-wsgi.py
|    |-snsapi/                  # APIディレクトリ
|    |    |-__init.py
|    |    |-admin.py
|    |    |-apps.py
|    |    |-asgi.py
|    |    |-models.py             # モデル定義ファイル
|    |    |-serializers.py        # APIのI/O形式定義ファイル
|    |    |-urls.py               # URLディスパッチャ設定ファイル
|    |    '-views.py              # API処理の定義ファイル
|    '-manage.py
|
'-frontend/                   # Next.jsディレクトリ
|    |-pages/                   # ページコンポーネントディレクトリ
|    |    |-api/                  # API実行ディレクトリ
|    |    |  '-ApiContext.js        # API実行ファイル
|    |    |-components/           # サブコンポーネント集ディレクトリ
|    |    |  |-Login.js             # ログイン画面ファイル
|    |    |  |-Navbar.js            # ナビゲーションバーファイル
|    |    |  '-Home.js              # 投稿一覧表示ファイル
|    |    |-_app.js               # コンポーネントのグローバル設定ファイル
|    |    |-App.js                # component配置の記述ファイル
|    |    '-index.js              # RUNで一番初めに実行されるファイル
|    |-public/
|    |    '...
|    |-styles/
|    |    |-global.css
|    |    '-Home.module.css
|    |-.eslint.json
|    |-next.config.js
|    |-package-lock.json
|    '-package.json             # パッケージ管理ファイル
'-.gitignore     

今回は解説しやすさの都合、同一Git管理化でディレクトリを構成しました。

読者の皆さんが作る際は、React/Djangoとでトップディレクトリを分ける構成の方が、きれいに開発しやすいかもしれません。相手側にしか変更がないのに行われてしまう余計なコミット・関係ないコミットを減らせるので、Gitでのバージョン管理をきれいに保てます。

実際どうするかは、読者の皆さんの好みによりますが、分けることのメリットも理解した上で決めてください。

上記のディレクトリ構成を作るために、以下のコマンドでプロジェクト雛形を作っていきましょう。

$ mkdir sample-app && cd sample-app
$ mkdir backend && cd backend
$ django-admin startproject config .
$ cd ..
$ npx create-next-app frontend
# create-next-appコマンドではyes/noの選択肢が出ることがあるので、yと入力しエンターして進む

ここまでで以下のプロジェクトが出来上がります。完成形に対し、足りないディレクトリ・ファイルは実装の中で都度作成していきましょう。

■Django側設定
DjangoディレクトリでAPI用のアプリディレクトリを作成します。

$ django-admin startapp snsapi

また、Reactとの連携に必要なライブラリが1つあるので、インストールしておきます。IPホワイトリストを定義するライブラリで、簡単に言うと、Django外部からDRFのAPIを実行するための許可証です。

$ pip install django-cors-headers

引き続き、Djangoの設定ファイルconfig/settings.pyにDRFを使う準備を書いていきます。IPホワイトリスト（CORS_ORIGIN_WHITELIST）には、DRFのAPIを叩きに来るReact開発サーバーのドメインを記述します。

...
INSTALLED_APP = [
	…
	‘snsapi.apps.SnsapiConfig’,    # snsapiディレクトリ
	‘rest_framework’,              # DRFライブラリ
	‘rest_framework.authtoken’,    # DRFトークン認証用のライブラリ
	‘corsheaders’,                 # django外部のwhitelist管理ライブラリ
]

# IPホワイトリスト用のミドルウェアの有効化
MIDDLEWARE = [
	…
	‘corsheaders.middleware.CorsMiddleware’
]

# IPホワイトリストの設定
CORS_ORIGIN_WHITELIST = [
	‘http://localhost:3000’        # Reactの開発サーバーのデフォルトIPアドレスを追加
]

# DRFのデフォルトの認証方式・アクセス権限を設定
REST_FRAMEWORK = {
	'DEFAULT_AUTHENTICATION_CLASSES': [
		'rest_framework.authentication.TokenAuthentication',    # トークン認証
	],
	'DEFAULT_PERMISSION_CLASSES': [
		'rest_framework.permissions.IsAuthenticated’,           # 認証ユーザーのみ
	]
}
...

■React側準備
開発に使うライブラリで、不足しているものを足しておきましょう。
Reactではライブラリ追加は、npmコマンド・yarnコマンドで行います。

ライブラリはファイルでプロジェクトに追加されます。また、インストールされたライブラリのうち、Reactの実行（画面描画のこと）・開発・テストに必要な追加ライブラリは、package.jsonというファイルに自動でリストアップされていきます。今プロジェクト内で何を使えるかの確認は、このファイルで確認します。

package.jsonについてもう少し詳しく知りたい方向けに、参考記事を貼っておきます。

【初心者向け】NPMとpackage.jsonを概念的に理解する - Qiita

それでは、今回のサンプルアプリに必要なライブラリをインストールしていきましょう。Reactのディレクトリに移動し、以下のコマンドを実行します。
（※さっきはnpxでしたが、ここはnpmです。）

$ npm install react-hooks react-cookie bootstrap react-bootstrap @popperjs/core axios @material-ui/icons @material-ui/core

追加したライブラリの概要を簡単に説明しておきます。

・react-hooks
画面状態管理のライブラリ。（概念が難しいので説明は省きますが、ライフサイクルというReactの重要な動作を簡単に行うためのメソッドも提供しています。）

・react-cookie
Reactでcookieを活用してサーバー-ブラウザ間の通信状態を記憶させるライブラリ。今回はログイン情報の記憶に使います。

・react-bootstrap
Web開発ご定番のBootstrap。すぐに使えるデザインテンプレートが豊富です。（※依存関係ライブラリで、bootstrap、@popperjs/coreのインストールも必要）

・axios
Djangoで作るAPIの実行のためのメソッドを提供するライブラリ。類似メソッドにfetchがありますが、レスポンス処理の利便性でaxiosに劣るので、特に理由がなければaxiosを使えばOKです。

・@material-ui/icons, @material-ui/core
おしゃれなデザインライブラリ集です。MaterialデザインというGoogle提唱のデザインパターンに即したかっこいいアイコン・デザインテンプレートが豊富に揃っています。

今回はこれらのライブラリを駆使して、DRF × Next.jsアプリを解説していきます。

ここから、有料記事内容になります！
このパートでDRF × Next.jsの開発準備が整ったので、次のパートからは以下の機能ごとに実装方法と、DRF × Next.jsの組み合わせ方で重要な内容について厚く解説していきます。

＜解説する機能＞
・ユーザー登録、ログイン、ログアウト機能
・投稿一覧の閲覧機能
・新規投稿の作成機能

DRFやNext.jsの基礎的な文法を知りたい方はもちろん学びありです。また、組み合わせ方を知りたい方にとっては特に学びが多い記事になっています。

別プログラムと連携する際に、どんなことに気をつけて実装を考える必要があるかについて、実践的に学ぶことができます。
ネット検索し続ける時間を節約させられるだけの情報は提供しているので、たったランチ1-2回分と思ってぜひ購入をご検討ください。

4.ユーザー登録、ログイン、ログアウト

■Django
この機能開発では、DRF側にユーザー登録、ログイン用のAPIを作成していきます。今回紹介する手法だと、ログアウト側の機能はNext.js側の実装だけで実現できるので、APIの用意はやめました。