Python+DjangoでSNSを作る~Day2 Webアプリケーションの仕組み

前回はWebサイトの仕組みについて記載しました。

今回はWebアプリケーションの仕組みについて書きます。

そもそも、WebサイトとWebアプリケーション（=サービス）って何が違うの？と問われたら、どう答えますか。

1．WebサイトとWebアプリケーションの違い

Webサイトは、HTMLで記載されたいわばテキスト情報を、HTMLタグに応じてWebブラウザがお化粧して表示しています。（WebサーバーにあるHTML情報を返すだけ）

Webサイトの仕組み

例えば、自己紹介ページがあったとして、1年後に誕生日を迎え一つ歳を重ねても年齢はHTMLファイルに記載されている年齢のまま変わりません。

つまり、静的です。（永遠の18歳・・・）

これに対し、Webアプリケーションはこれを動的にコントロールすることが可能です。上記の年齢を常に更新していく方法として、2つ記載します。

1つ目は、年齢の欄に直接数字を記載せず、「サイト表示年月日ー生年月日」を年齢欄に表示するようプログラムする。

2つ目は、データベースに「年齢」と「生年月日」を項目とし保有し、データベースから「年齢」を取り出してサイトに表示。また、表示の都度、「現在の年月日ー生年月日」で算出して、差異があればデータベースの「年齢」を更新する。

このように、動的にHTTPレスポンスの内容を変えたりすることができるものがWebアプリケーションというものです。
（違ってたら、ご指摘ください）

そして、1つ目の例でいうと動的ではあるものの、データベースや裏側での別プログラムでの更新はしていません。
JavaScriptというコードを、htmlファイル内に記述すると、このように動的にサイト上の表示等をコントロールすることができます。
また、CSS（カスケード・スタイル・シート）というスタイルシートをHTMLに適用することで、見た目を整えることができます。

また、2つ目の例でいうと別プログラムを用意し、その中で算出やデータベース参照・更新等を行っています。この別プログラムがPythonやPHP、JAVAやRuby等のプログラム言語で記載されたもので、データベースがMySQLやOracle、PostgreSQL等です。

ちなみに、1つ目のようにクライアントとWebサイト等の通信の部分(HTML・CSS・JavaScript等）をフロントエンド（クライアントサイド）、2つ目の例の別プログラム（Python・PHP・JAVA・Ruby等）やデータベースの部分をバックエンド（サーバーサイド）といいます。

2．Webアプリケーションの構成(フロントエンドとバックエンド）

アーキテクチャというと小難しく聞こえますが、要するに構成です。
フロントエンド・バックエンドの構成をざっと図解すると以下のようになります。

3．Webアプリケーションのログイン機能でいうと

例えば、ネットショッピングのWebアプリケーションを例としてイメージしてみましょう。

細かいことを省いて、必要となるのはWebサイトにアクセスして、商品やサービスの購入を顧客ができることです。ログインでの動きをざっと書くと、以下のようになります。

画面表示をさせるたり、顧客に入力や押下させるのはフロントエンド。入力内容をもとに、登録情報とのチェックや、チェック結果に伴い表示すべき画面を判定するのはバックエンド。

大体、フロントエンドとバックエンド、Webアプリケーションがどのように動くかが大体伝わりましたでしょうか。

4．Djangoってなに？フレームワークの何がいいの？

Djangoはフレームワークといって、予め用意された複数のPythonプログラムを使ってWebアプリケーションが開発できます。

フレームワーク（枠組み）という言葉のとおりです。

なお、PythonによるWebアプリケーション作成のためのフレームワークとして、他にも「Flask」というものがあります。
FlaskはDjangoよりライトにWebアプリケーションを構築できる簡易的なものとなっています。(Djangoに標準実装されているログイン機能は、Flaskだと拡張機能で実装する必要がある等、違い目があります）

また、Python以外の言語でも、フレームワークが存在します。以下、主なフレームワークの一覧。

「Webアプリケーションが作りたいから、Pythonを勉強してDjangoをやる」という人がいたら、いまいちどお考えいただいた方がいいと思います。
既にPythonを使っているから、延長でFlaskかDjangoをやるという方が、学習コストをかけずに済みます。

僕はDjangoを勉強して、簡単なアプリを作ったあと、PHP単体でもう一つWebアプリを作りました。
Webフレームワークを使わずに、単体でやったらどうなるかということを試してみたかったのです。

PHPでバックエンドを書いて、フロントはHTML・CSS・JavaScript、DBはMySQLで、Webサーバーはlolipopでやりました。結論からいうと、時間はかかります(笑)

5．MVCモデルとDjangoにおける各プログラムの役割

最後に、上の表にも記載されているMVCモデルを説明して、Djangoがどういう仕組みで動くのかをなんとなく掴んでいただければと思います。

・MVCモデルとDjangoの構成

ちょっと見づらいかもしれませんが、これを書くのに2時間くらいかかりました(笑)

M（Model）

動的更新の要となるデータベースとの連携です。
Djangoでは、models.pyでデータベースのテーブル毎の項目定義や他テーブルとのリンク（外部キー）等の設定ができます。

V（View）

クライアント側にどのような表示を返すかをコントロールする部分です。Djangoでは、urls.pyというファイルでルーティング（どのページにアクセスさせるか）を、Views.pyでページにアクセスした際の挙動を設定します。

その際、templatesフォルダに格納した、htmlファイルにDBから抽出した項目をテンプレートタグを使って、表示させることができます。
その際も、views.pyファイルにmodels.pyファイルで定義した項目をどのように渡すかを記載します。

また、スタイルシート（CSS）や画像ファイル等の静的ファイルはstaticフォルダに格納し、別途settings.pyファイルで格納場所を定義し、表示をさせます。これも、テンプレートタグというものを使って、htmlファイル上に記述できるようになっています。

C（Controller）

ModelとViewをコントロールしてハンドリングする部分です。先ほどから複数回登場する、views.pyファイルがコントローラーのイメージです。

また、manage.pyというファイルや書き忘れましたが、admin.pyというファイルもDBのマイグレーション（初期化）をしたり、ログインやユーザー管理機能を保有していたり、アプリケーションを動かす上での重要な機能を保有しています。

以上、自分の理解の範囲で記載しましたが、ご指摘等あればぜひお願いします。

そして、何よりまずは「手を動かす」のが何より重要です！次回は実際にDjangoを使って、前回の例で記載した年齢を動的に表示するアプリケーションを作ってみましょう。