メディアチーム【第1回】Djangoで日記アプリを作ろう～環境構築編～
メディアチームエンジニアになろう！
【第1回】Djangoで日記アプリを作ろう～環境構築編～
Django は、Web アプリケーション開発を支援してくれる、Python 製のフルスタックなフレームワークです。
【Django：公式サイト】
https://www.djangoproject.com/
認証機能や管理サイトなど、Web アプリケーションを作るのに必要な機能が、一通り揃っているのが特徴。
サードパーティ製の拡張機能も充実していて、追加のアプリケーションやミドルウェアという形で、リッチな機能を簡単に導入できます。
さらに、開発効率の高い Python を採用しているので、高速なアプリケーション開発も期待できます。
本連載では、「日記アプリ」を作成しながら、Django の使い方を学んでいきましょう！
Djangoのアーキテクチャ
まず初めに、Django アプリケーションのアーキテクチャ全体像と、その中で特に重要な「MVT」という考え方を学びます。
アーキテクチャの全体像
Djnago に限らず、アプリケーションの基本的な役目は、
- クライアント（Web ブラウザなど）からのリクエストを受け取る
- リクエストより「何かしらの処理」を施し、レスポンスを作成する
ことです。
その役目を果たすアーキテクチャ（設計）には、色々なものがあります。
その中でも Django では、以下のような仕組みを採用しているのです。
リクエスト受信（図の①）から、レスポンス送信（図の⑦）までの流れを掴むために、重要なコンポーネントだけを厳選しています。
では早速、図の①から⑦までの流れを、追っていきましょう！
- ① クライアントの HTTP リクエストは、Web サーバーなどを介し URL ディスパッチャへ
- ② URL とそれに対応する処理の一覧表が「URLConf」
- ③ 実際の処理内容が記述されたプログラムが「View」
- ④ View は、Model と呼ばれるデータを取得
- ⑤ Template と呼ばれる HTML ファイルを取得
- ⑥ レスポンスは、URL ディスパッチャに渡される
- ⑦ ミドルウェアや Web サーバーを介してクライアントに返却
①の URL ディスパッチャでは、 リクエストが示す URL に対応した「処理」を探します。
④⑤を取得後は、Template に埋め込み、View はテンプレートを含むレスポンスを作成していきます。
具体的に例えると…
さて、簡単な具体例で、先ほどの流れをもう一度辿ってみます。
例えば、「マイページが見たい（例：http://~~~/mypage）」という、リクエストを受信したとします。
URL ディスパッチャは、まずそのマイページの URL に対応する、View を呼び出します。
その後、ユーザー情報を意味する Model から、ユーザーネームや性別などのデータを取得。
そのデータを、Template に埋め込んで、マイページ HTML ファイルを含んだレスポンスを返却します。
なんとなくでも、流れが掴めれば OK です。
MVT
Djnago のアーキテクチャの中で、特に重要なのが「Model・View・Template」という、3つのコンポーネントです。
- 「Model」は、データの定義をする役目があり、データベースと密接に関わります。
- 「View」は、リクエストに対応する処理の内容を記述します。
- 「Template」の実体は「変数を含んだ HTML ファイル」です。
「Model・View・Template」という、上記3つのコンポーネントに基づいて開発をしていくことから、Django は「MVT アーキテクチャ」と呼ばれます。
実際の開発では MVT に加えて、「URL Conf」の記述が必要です。
さらに、入力フォームの作成が必要な場面では、「Form」という別の概念も登場します。
MVT と URL Conf、そして時々 Form …。
基本的には、上記5つのコンポーネントを実装するという意識を持てば、Django の開発はスムーズに進むでしょう。
日記アプリの開発を始めよう！
では、Django のアーキテクチャが理解できたところで、いよいよ日記アプリの開発に取り掛かっていきます。
今回は、環境構築をメインに行っていきましょう！
仮想環境の作成とDjangoのインストール
まずは、作業用ディレクトリとして、「djangotutorial」を作成します。
作業用ディレクトリを作成する場所は、任意で OK です。
1# 作業用ディレクトリの作成
2mkdir djangotutorial
3
4# 作業用ディレクトリへ移動
5cd djangotutorial続いて、仮想環境を作成し、Django のパッケージを pip 経由でインストールしていきましょう。
1# 仮想環境の作成（仮想環境作成に必要なプログラムは.djangoenvディレクトリに格納）
2python3 -m venv .djangoenv
3
4# 仮想環境の起動
5source .djangoenv/bin/activate
6
7# Django（ver. 3.1.2）のインストール
8pip install django==3.1.2pip show Django を実行すると、インストールした Django パッケージの情報が、以下のような具合で確認できます。
1Name: Django
2Version: 3.1.2
3Summary: A high-level Python Web framework that encourages rapid development and clean, pragmatic design.
4Home-page: https://www.djangoproject.com/
5Author: Django Software Foundation
6Author-email: foundation@djangoproject.com
7License: BSD-3-Clause
8...（省略）...プロジェクトの作成
Django で Web アプリを作成する場合には、まず「プロジェクト」と呼ばれるディレクトリを作成しましょう。
そのプロジェクトの中に、なるべくまとまった機能がある「アプリケーション」を、たくさん詰め込みます。
このように、一つの大きな Web アプリケーション（＝プロジェクト）を作るというのが、Djnago のスタンスとなっているわけですね！
例えば、「日記の投稿や編集に関するアプリケーション」「ユーザー登録に関するアプリケーション」というように、機能単位でアプリを分割します。
では早速、プロジェクトとなるディレクトリを作成していきましょう！
まずは、日記アプリを作成するので、「mydiaryproject」という名前のディレクトリを作成します。
1# プロジェクト用ディレクトリの作成
2mkdir mydiaryproject
3
4# プロジェクト用ディレクトリへ移動
5cd mydiaryproject続いて、mydiaryproject に、Djnago プロジェクトに必要な構成ファイルを作成します。
以下のコマンドを実行しましょう。
1# プロジェクトの作成
2django-admin startproject config .実行すると、mydiaryproject ディレクトリの中に、ファイルやディレクトリが新規に作成されたかと思います。
「django-admin startproject config .」って？
ここで、 django-admin startproject config . コマンドの意味を概説しておきます。
| django-admin | Djnago の管理コマンドラインユーティリティ |
| startproject | プロジェクトの構成ファイルを作成する、django-admin のサブコマンド |
| config | mydiaryproject ディレクトリ配下にできた、config ディレクトリに対応 （※ここで指定した名前のディレクトリが自動で作成） |
| . | config ディレクトリと manage.py を配置するディレクトリを指定 （※今回は、「mydiaryproject ディレクトリ」を指定） |
django-admin は、一つのプロジェクトのみを操作する状況では、後ほど出てくる manage.py を利用することが多く、プロジェクト作成時以外で使う機会は滅多にありません。
また config といったように、指定した名前のディレクトリが自動で作成され、その中にプロジェクトに関する設定ファイルなどが格納されます。
ここでは、「config」としておくのが無難でしょう。
プロジェクトの中身を確認してみよう
現在プロジェクトの中は、以下のような構造となっています。
1.
2└── mydiaryproject
3 ├── config
4 │ ├── __init__.py
5 │ ├── settings.py
6 │ ├── urls.py
7 │ └── wsgi.py
8 └── manage.pyconfig ディレクトリは、Python パッケージとして扱われます。
このディレクトリには、Python パッケージであることを示す「__init__.py」をはじめ、様々なファイルが入っています。
| settings.py | プロジェクトの設定ファイルで、データベースの接続設定やアプリケーションの登録などを記載 |
| urls.py | URL を設定するファイルで、URLConf のこと |
| wsgi.py | Web サーバーとDjangoアプリを連携させる WSGI（Web Server Gateway Interface）に関する記述がある （ WSGI が、読み込む設定ファイルの指定など） |
上表の「urls.py」については、次回の「日記アプリのトップページを作成」で、詳しく説明します。
また、ローカル環境での開発時に、 WSGI を意識する必要はあまりありません。
サーバーへのデプロイといったリリース時に、考えていけばよいと思います。
Djangoプロジェクトを起動しよう
最後に、Django プロジェクトを起動してみましょう！
ちなみに Djnago には、簡易的な開発用 Web サーバーが付属しています。
なので、プロジェクトの動作を、ローカル環境で確認することができるのです。
早速、以下のコマンドを実行してみましょう。
1python3 manage.py runserverブラウザより、「http://127.0.0.1:8000/」にアクセスしてみてください。
以下のような画面が表示されれば、Django の起動が成功しています！
第2回へつづく！
今回の記事のポイントは、以下の3つです。
- Djnago のアーキテクチャ
- Djnago プロジェクトの作成コマンド
- Django プロジェクトの起動コマンド
特に MVT は、本連載で幾度となく登場します。
「Model・View・Template」の役割は、確実に理解しておきましょう！
次回は、View とTemplate を実装して「日記アプリのトップ画面」を作成していきたいと思います。
では、次回もお楽しみに！
第2回はこちら！
こちらの記事もオススメ！
ライトコードでは、エンジニアを積極採用中！
ライトコードでは、エンジニアを積極採用しています！社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の（株）ライトコードです！ ライトコードは、福岡、東京、大阪、名古屋の４拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎！ また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です！ インターンや新卒採用も行っております。 以下よりご応募をお待ちしております！ https://rightcode.co.jp/recruit
