まだMVCで消耗してるの？〜React x Djangoで始める今時Web開発〜 第二版
本記事は、まだMVCで消耗してるの？〜React x Djangoで始める今時Web開発〜の第二版です。React + DjangoでToDoアプリを作るというものですが、初版の記事からReactやPython、Djangoなどの最新バージョンが変わり技術仕様も変化しているため、第二版を作りました。
初版同様にJSフレームワークやMVCフレームワークの仕組みと特徴を踏まえ、ReactとDjangoを使ってToDoアプリを作っていくことで、今時のシステムアーキテクチャへの理解を深めていくことを趣旨とします。さらに、Djangoのバックエンド実装について第一版よりも説明を追加することで、より進めやすくなるように執筆しました。
想定読者
フロントエンドもバックエンドも勉強している人
API（Application Programming Interface）が何かを知っている人
APIを使ったWebアプリケーションを開発してみたい人
JavaScriptとPythonを使ったことがある人
MVCもしくはMTVを知っている人
Web開発経験者
本記事で使用するバージョン
Node.js
18.14.1
React
18.2.0
Python
3.10.2
Django
4.1.7
また、本記事執筆時はMacで動作させているため、Mac OSを推奨します。Windowsの方はインストール手順などMacの環境と異なる部分がありますが、参考となる公式ページを記載しておきます。
MVCとは
MVCはモデル（M）、ビュー（V）、コントローラー（C）と呼ばれる3つの機能から成るアーキテクチャです。DjangoだとMTVと呼ばれるのですが、Template（T）はMVCのビューにあたり、View（V）はコントローラーにあたります。呼び方が異なるだけで仕組みはMVCと同じです。
MVCを例にそれぞれの役割を説明すると、モデルはビジネスロジックと呼ばれデータベースへのデータ保存や取得、更新、削除などを担当します。
ビューはHTMLを形作るためのもので、特定のパスにアクセスがあるとビューからHTMLが生成されクライアントへ送られます。
コントローラーは、クライアントからのリクエストに応じてモデルへの命令やバリデーション、ビューにセットする値の管理などを受け持ちます。
SPAとMVCはどちらも、ルーティングに結びついた各処理機構でデータの通信が行われ、レスポンスに応じて返された値をHTMLに埋め込み画面に反映させる点では共通しています。
ただし、SPAではビューの部分がMVCアーキテクチャーから切り離されたようになっており、ここがSPAとMVCでの大きな違いです。
簡単に説明すると、MVCでは一つのアーキテクチャーがルーティングやDBとの通信、HTMLの生成をフルスタックにこなしていたのに対し、SPAではルーティングとHTMLの生成などが分離され、ビューに近い部分が一つのアーキテクチャーとして機能します。
SPAを使って開発を進める場合は、MVCのビューを除いたモデルとコントローラーだけでバックエンド開発をすることができます。
SPAとは
多くのWebサイトでは、ReactやVueといったJSフレームワークが使われています。
これらのJSフレームワークはSPAと呼ばれ、Webアプリケーションを作る際によく採用されており、UI/UXから開発効率まで多くのメリットをもたらします。
JSフレームワークはRailsやDjangoのようなフルスタックフレームワークと違い、フロントエンドの部分だけを別に切り出すことができます。
もう少し詳しく説明すると、フルスタックフレームワークではHTMLの生成やルーティング、DBとの通信はすべて一つのサーバーが行っていたのに対し、JSフレームワークではHTMLの生成やルーティングなど表示に関わることのほとんどをフロントエンドが受け持ちます。
こうした仕組みを支えるために、SPAでは主にデータバインディング、仮想DOM、コンポーネントの3つの特徴を兼ね備えています。
データバインディング
JavaScriptを使って値を変更する場合、DOMを指定して値を変更する処理を毎回動かさなければなりません。
しかし、ReactやVueなどのJSフレームワークを使った場合は、定義しておいた変数に変更があるとその都度画面上の値も変更されます。
つまり、値を変更するためにわざわざidやclass属性などを割り振る必要がなく、JavaScript単体で書くよりも短く簡単に実装することができます。
仮想DOM
仮想DOMは、高速なレンダリング処理の肝となる部分でDOM（Document Object Model）とは異なります。
DOMは、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたもののことで、開発者ツールから確認することができます。
仮想DOMの役割は、新しくサーバーから吐き出された仮想DOMと、現在存在する仮想DOMとの差分を取り、その差分をDOMに反映することです。
差分の表示だけを構築するので、画面上では高速でページが遷移したように表現することができます。
コンポーネント
JSフレームワークは、ページの要素をコンポーネントと呼ばれる部品単位に分割することができます。画面に表示させるものを分割することで、コンポーネントを再利用することができ同じコードを書かずに済みます。例えば、ヘッダーやフッターは複数ページで同じものを表示すると思います。こういったページのパーツは、コンポーネント化することで何度も同じパーツのHTMLをいくつものページに実装する必要がなくなります。
SPAのメリット
SPAのメリットは、仮想DOMについての説明でも出たようにページ遷移が速いことです。また、メリットがあるのはユーザーだけでなく開発者にもあります。
SPAがトレンドになる前は、WebアプリケーションはRailsやLaravelといったフルスタックフレームワークのアーキテクチャーで構築されることがメインでした。
ですが、最近はフロントエンド技術の革新に伴ないReactやVueなどのJSフレームワークが開発に使われるようになったため、フロントエンドとバックエンドが以前よりも分離されるようになりました。
そうすることで、速度改善によるユーザビリティの向上はもちろん、フロントエンドとバックエンドそれぞれの開発に集中することができます。
また、フロントエンドとバックエンドが別れていることで、以前はフロントエンドの修正だけをデプロイしたくてもバックエンドも含めて再起動が必要でしたが、フロントエンドだけを再起動するだけで良くなりました。その逆も然りです。
SPAのデメリット
SPAにはメリットだけではなく、もちろんデメリットもあります。
SPAで開発をするためには、JSフレームワーク特有の概念を学習しなければならないため、フルスタックフレームワークで開発を進めるよりも学習コストが必要です。
SEO対策をする場合は、サーバーサイドレンダリングやダイナミックレンダリングといった技術を導入しなければならず、より実装コストがかかってしまう可能性もあります。
また、ページ遷移スピードはかなり速いのですが、サイト規模が大きくなってくるとJavaScriptのコード量も増えてくるため初期表示にかかる時間が増えてしまうこともあります。
いくつかデメリットも紹介しましたが、昔に比べSPA開発のエコシステムやフロントエンド技術が大きく充実してきたため、対策は以前よりしやすくなりました。よりSPA導入には前向きになれる環境になってきたのではないでしょうか。
Reactについて
ReactはMeta（旧Facebook）が開発したJSフレームワークです。前述したデータバインディング、仮想DOM、コンポーネント機能を備えており、利用しているユーザー数も多くサードパーティやベストプラクティスなどのエコシステムも豊富です。
さらに、モバイルアプリ用のフレームワークであるReact Nativeというものもあり、Reactと似たような使い方ができるため開発にReactを選択するメリットはかなり大きいと言えるでしょう。
フロントエンド実装
一通りSPAについて説明をしてきましたが、ここから実際にToDoアプリの実装を通して理解を深めていきましょう。まずはフロントエンドから実装を進めていきます。
React環境構築
Reactの環境立ち上げにはCreate React Appという雛形のReactテンプレートを使います。
Create React AppはReact同様にMetaが提供しているオープンソースであり、React環境の構築にほとんど時間をかけずに立ち上げることができます。
昔はReact環境の構築はbabelやwebpackなどのライブラリを自前で設定する必要があったのですが、Create React Appでは必須となる設定が標準で組み込まれているためすぐにプロジェクトを立ち上げられます。
それでは、実際にCreate React Appを使って環境構築から始めます。
まずはNode.jsとYarnからインストールしてください。Macをご使用の方はnodebrewなどのNodeのバージョン管理ツールをインストールすることをおすすめします。Windowsの方はこちらの公式サイトからインストールを進めてください。
nodebrewのインストール
brew install nodebrewインストール後は環境変数の設定を忘れずに行いましょう。設定の仕方はインストール時にターミナルに表示されます。
nodebrewを使ってNode.jsのセットアップ
nodebrew install 18.14.1
nodebrew use 18.14.1node -v を実行し、18.14.1と表示されれば無事に今回使用するNode.jsの環境が出来上がりです。
次にYarnをインストールします。
npm install -g yarnここまでで、Reactの環境を作るための下準備が整いました。早速、React環境を作っていきましょう。
yarn create react-app todo-frontend
cd todo-frontend
yarn startこれで環境の起動までできました。
http://localhost:3000 にアクセスしてみてください。
問題なく以下の画面が表示されたら成功です。
ここから先は
この記事が気に入ったらサポートをしてみませんか？