1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. 【第1回】Djangoで日記アプリを作ろう~環境構築編~
第1回】Djangoで日記アプリを作ろう~環境構築編~

【第1回】Djangoで日記アプリを作ろう~環境構築編~

【第1回】Djangoで日記アプリを作ろう~環境構築編~

Django は、Web アプリケーション開発を支援してくれる、Python 製のフルスタックなフレームワークです。

【Django:公式サイト】
https://www.djangoproject.com/

認証機能や管理サイトなど、Web アプリケーションを作るのに必要な機能が、一通り揃っているのが特徴。

サードパーティ製の拡張機能も充実していて、追加のアプリケーションやミドルウェアという形で、リッチな機能を簡単に導入できます。

さらに、開発効率の高い Python を採用しているので、高速なアプリケーション開発も期待できます。

本連載では、「日記アプリ」を作成しながら、Django の使い方を学んでいきましょう!

Djangoのアーキテクチャ

まず初めに、Django アプリケーションのアーキテクチャ全体像と、その中で特に重要な「MVT」という考え方を学びます。

アーキテクチャの全体像

Djnago に限らず、アプリケーションの基本的な役目は、

  1. クライアント(Web ブラウザなど)からのリクエストを受け取る
  2. リクエストより「何かしらの処理」を施し、レスポンスを作成する

ことです。

その役目を果たすアーキテクチャ(設計)には、色々なものがあります。

その中でも Django では、以下のような仕組みを採用しているのです。

仕組み

リクエスト受信(図の①)から、レスポンス送信(図の⑦)までの流れを掴むために、重要なコンポーネントだけを厳選しています。

では早速、図の①から⑦までの流れを、追っていきましょう!

  1. ① クライアントの HTTP リクエストは、Web サーバーなどを介し URL ディスパッチャへ
  2. ② URL とそれに対応する処理の一覧表が「URLConf」
  3. ③ 実際の処理内容が記述されたプログラムが「View」
  4. ④ View は、Model と呼ばれるデータを取得
  5. ⑤ Template と呼ばれる HTML ファイルを取得
  6. ⑥ レスポンスは、URL ディスパッチャに渡される
  7. ⑦  ミドルウェアや Web サーバーを介してクライアントに返却

①の URL ディスパッチャでは、 リクエストが示す URL に対応した「処理」を探します。

④⑤を取得後は、Template に埋め込み、View はテンプレートを含むレスポンスを作成していきます。

具体的に例えると…

さて、簡単な具体例で、先ほどの流れをもう一度辿ってみます。

例えば、「マイページが見たい(例:http://~~~/mypage)」という、リクエストを受信したとします。

URL ディスパッチャは、まずそのマイページの URL に対応する、View を呼び出します。

その後、ユーザー情報を意味する Model から、ユーザーネームや性別などのデータを取得。

そのデータを、Template に埋め込んで、マイページ HTML ファイルを含んだレスポンスを返却します。

なんとなくでも、流れが掴めれば OK です。

MVT

Djnago のアーキテクチャの中で、特に重要なのが「Model・View・Template」という、3つのコンポーネントです。

  1. Model」は、データの定義をする役目があり、データベースと密接に関わります。
  2. View」は、リクエストに対応する処理の内容を記述します。
  3. Template」の実体は「変数を含んだ HTML ファイル」です。

「Model・View・Template」という、上記3つのコンポーネントに基づいて開発をしていくことから、Django は「MVT アーキテクチャ」と呼ばれます。

実際の開発では MVT に加えて、「URL Conf」の記述が必要です。

さらに、入力フォームの作成が必要な場面では、「Form」という別の概念も登場します。

MVT と URL Conf、そして時々 Form …。

基本的には、上記5つのコンポーネントを実装するという意識を持てば、Django の開発はスムーズに進むでしょう。

日記アプリの開発を始めよう!

では、Django のアーキテクチャが理解できたところで、いよいよ日記アプリの開発に取り掛かっていきます。

今回は、環境構築をメインに行っていきましょう!

仮想環境の作成とDjangoのインストール

まずは、作業用ディレクトリとして、「djangotutorial」を作成します。

作業用ディレクトリを作成する場所は、任意で OK です。

続いて、仮想環境を作成し、Django のパッケージを pip 経由でインストールしていきましょう。

pip show Django を実行すると、インストールした Django パッケージの情報が、以下のような具合で確認できます。

プロジェクトの作成

Django で Web アプリを作成する場合には、まず「プロジェクト」と呼ばれるディレクトリを作成しましょう。

そのプロジェクトの中に、なるべくまとまった機能がある「アプリケーション」を、たくさん詰め込みます。

このように、一つの大きな Web アプリケーション(=プロジェクト)を作るというのが、Djnago のスタンスとなっているわけですね!

例えば、「日記の投稿や編集に関するアプリケーション」「ユーザー登録に関するアプリケーション」というように、機能単位でアプリを分割します。

では早速、プロジェクトとなるディレクトリを作成していきましょう!

まずは、日記アプリを作成するので、「mydiaryproject」という名前のディレクトリを作成します。

続いて、mydiaryproject に、Djnago プロジェクトに必要な構成ファイルを作成します。

以下のコマンドを実行しましょう。

実行すると、mydiaryproject ディレクトリの中に、ファイルやディレクトリが新規に作成されたかと思います。

「django-admin startproject config .」って?

ここで、  django-admin startproject config . コマンドの意味を概説しておきます。

django-adminDjnago の管理コマンドラインユーティリティ
startprojectプロジェクトの構成ファイルを作成する、 django-admin のサブコマンド
configmydiaryproject ディレクトリ配下にできた、config ディレクトリに対応
(※ここで指定した名前のディレクトリが自動で作成
.config ディレクトリと manage.py を配置するディレクトリを指定
(※今回は、「mydiaryproject ディレクトリ」を指定)

django-admin は、一つのプロジェクトのみを操作する状況では、後ほど出てくる manage.py を利用することが多く、プロジェクト作成時以外で使う機会は滅多にありません。

また config といったように、指定した名前のディレクトリが自動で作成され、その中にプロジェクトに関する設定ファイルなどが格納されます。

ここでは、「config」としておくのが無難でしょう。

プロジェクトの中身を確認してみよう

現在プロジェクトの中は、以下のような構造となっています。

config ディレクトリは、Python パッケージとして扱われます。

このディレクトリには、Python パッケージであることを示す「__init__.py」をはじめ、様々なファイルが入っています。

settings.pyプロジェクトの設定ファイルで、データベースの接続設定やアプリケーションの登録などを記載
urls.pyURL を設定するファイルで、URLConf のこと
wsgi.pyWeb サーバーとDjangoアプリを連携させる WSGI(Web Server Gateway Interface)に関する記述がある
( WSGI が、読み込む設定ファイルの指定など)

上表の「urls.py」については、次回の「日記アプリのトップページを作成」で、詳しく説明します。

また、ローカル環境での開発時に、 WSGI を意識する必要はあまりありません。

サーバーへのデプロイといったリリース時に、考えていけばよいと思います。

Djangoプロジェクトを起動しよう

最後に、Django プロジェクトを起動してみましょう!

ちなみに Djnago には、簡易的な開発用 Web サーバーが付属しています。

なので、プロジェクトの動作を、ローカル環境で確認することができるのです。

早速、以下のコマンドを実行してみましょう。

ブラウザより、「http://127.0.0.1:8000/」にアクセスしてみてください。

以下のような画面が表示されれば、Django の起動が成功しています!

Django の起動画面

第2回へつづく!

今回の記事のポイントは、以下の3つです。

  1. Djnago のアーキテクチャ
  2. Djnago プロジェクトの作成コマンド
  3. Django プロジェクトの起動コマンド

特に MVT は、本連載で幾度となく登場します。

「Model・View・Template」の役割は、確実に理解しておきましょう!

次回は、View とTemplate を実装して「日記アプリのトップ画面」を作成していきたいと思います。

では、次回もお楽しみに!

第2回はこちら!

こちらの記事もオススメ!


書いた人はこんな人

広告メディア事業部
広告メディア事業部
「好きを仕事にするエンジニア集団」の(株)ライトコードです!

ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もり大歓迎!

また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」「WEBディレクター」を積極採用中です!
インターンや新卒採用も行っております。

以下よりご応募をお待ちしております!
https://rightcode.co.jp/recruit

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア