【初めてのDjango】（入門編 #01）単一ページのアプリケーション作成まで

本記事では「初めてのDjango」（入門編）として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーションの作り方をご紹介していきます。

※私が使用しているPCがMacですので、環境構築部分などで一部Windowsと異なる部分等ある場合がございます。

まえおき

はじめに

私の場合は、pythonをすでにある程度理解したからとっつきやすいんではないか？という理由で、最初はDjangoを用いてWebアプリケーションに挑戦しました。

もしかしたら同じような方もいらっしゃるのではないでしょうか？

なので、という訳ではないですが、pythonに関する基本的な文法や技術を詳しく解説してしまうと膨大な量になってしまいますので、ある程度のpythonに関する知識がある前提で解説していきます。

HTML、CSSの知識もあると望ましいです！

また本記事では「とりあえず手を動かして形にする」というのをモットーに、解説は必要最小限に抑えつつ進めていく予定です。関連する技術などで気になる内容等ありましたら、書籍やその他のブログなどで適宜深掘りしていただけたらと思います。

また各記事の進行具合に合わせたコードもGitHub上に載せておりますので、適宜確認しながら進めていただけるかと思います。

入門編で作成予定のアプリケーションはこんな感じです。

入門編と発展編

本シリーズは「入門編」と「発展編」で分けています。

入門編

「入門編」ではデータベースを使用することはせず、通常のHTMLとCSSで作成するサイトの延長線上のようなアプリケーションを作成します。

さらにGCP（Google Cloud Platform）と呼ばれるGoogleが提供するサーバーにデプロイし、本番環境で運用（一般ユーザーが使用できるような環境）する方法までご紹介します。

発展編

「発展編」ではデータベースを使用して、アプリケーション内でデータの表示・作成・追加・削除など一連の操作を行う方法や、本番環境におけるデータベースの連携方法などをご紹介いたします。

「発展編」と謳ってはいますが、Webアプリケーションに必要な基本的な技術をご紹介しております。もしよろしければ、発展編+αを終えて作成できる予定のデモサイトをご覧ください。

Webアプリケーションについて

「とりあえず手を動かす」なんてことを謳っておいて恐縮ですが、まずは簡単にWebアプリケーションを作成するときに考慮すべき項目などをざっと紹介していきたいと思います。

Webアプリケーションとは

現在ご覧いただいているこの記事は、いつアクセスしても同じ内容が表示されますよね？

それに対して、「いつ・誰が」アクセスするかでページ内容が変わるような動的なコンテンツを返すWebサイトのことをWebアプリケーションと呼びます。

例えばAmazonにアクセスした時は、ログインしたアカウントによっておすすめされる商品が異なりませんか？？

このように内容が変化するようなページのことを動的なページと呼びます。

新米エンジニア

ついつい買ってしまう…

これは、ブラウザからページにアクセスする際に、アプリが何らかの処理を行なってからそのページを構築するからです。

Webアプリケーションを作る際に考慮すべき点

これはDjangoに限った話ではないのですが、Webアプリケーションに共通して考慮すべき点をいくつか紹介します。

などです。

これを読んで「あ〜それな」となる方はそもそもこの記事を読んでいないと思いますが、現時点でこれらを理解する必要はありません。「こんな項目があるんだ」程度の認識で構いません！

やりながら覚えていきましょう！

仮想環境の構築

ではいよいよ実際にアプリケーションを作成していきます！（※pythonがすでにインストールされている前提で話を進めていきます。）

今回作成するアプリケーション用の仮想環境をまずは作成します。

仮想環境を作成したいお好きなディレクトリに移動し、下記のコマンドを実行して作成しましょう。

Windowsの場合

$ python -m venv venv_cafe

python -m venv <仮想環境名>

とすることで仮想環境を作成することができます。

さらに、作成した venv_cafe 内にある Scripts 内にある「activate.bat」を実行してください。

$ cd venv_cafe¥Scripts
$ activate.bat
(venv_cafe)>

コマンドラインが「(仮想環境名) >」となっていればOKです！

Macの場合

ターミナルにて次のコードを実行します。

$ python -m venv venv_cafe

python -m venv <仮想環境名>

とすることでpythonの仮想環境を作成することができます。

するとこのようにvenv_cafe（仮想環境名）のフォルダが作成されます。

このフォルダ内に仮想環境に関するファイルたちが格納されています。

ターミナル上で 「venv_cafe/bin/activate」 というファイルをsourceコマンドで実行します。

$ cd venv_cafe/bin
$ source activate

コマンドラインの先頭が（venv_cafe）となっていればOKです！

※仮想環境を抜けたい場合は deactivate とコマンド入力します。

(venv)$ deactivate

無事仮想環境を作成し、起動することが出来たでしょうか？

pip list コマンドでパッケージの確認をしてみます。

この通り仮想環境を作成したばかりなので、何もパッケージがインストールされていません。

ここでメインであるDjangoをインストールしておきましょう。

(venv)$ pip install django

処理が完了したとこで、再び pip list でインストールされているパッケージを確認します。

ちゃんとDjangoがインストールされています！

Djangoプロジェクトの作成

いよいよDjangoのプロジェクトを作成します。

まずはターミナルでプロジェクトを作成したいディレクトリまで移動します。

今回は仮想環境のディレクトリの直下に作成します。

(venv_cafe)$ cd venv_cafe

ディレクトリを移動したらDjangoプロジェクトを作成します。

(venv_cafe)$ django-admin startproject cafe

django-admin startproject <プロジェクト名> によってプロジェクトを作成することができます。

するとこのようにプロジェクト名のフォルダが自動生成されます。

cafeフォルダ内はこんな感じです。

これがプロジェクトのルートディレクトリになります。

この cafe というディレクトリ内に、プロジェクトの設定ファイルがまとめて格納されています。

Djangoアプリケーションを作成する

Djangoは、１つのプロジェクト内に複数のアプリケーションを作成して構築していきます。

現在はプロジェクトを作成しただけなので、アプリケーションはまだありません。早速アプリケーションも作成していきましょう！

プロジェクトディレクトリに移動

仮想環境ディレクトリから、先ほど作成したプロジェクト内に移動します。

(venv_cafe)$ cd cafe

「manage.py」があるディレクトリに移動します。

アプリケーションを作成

次のコマンドを実行してアプリケーションを作成します。

(venv_cafe)$ python manage.py startapp cafe_app

python manage.py startapp <アプリケーション名>

によってアプリケーションを作成することができます。

プロジェクトディレクトリを確認すると、このように cafe_app フォルダが自動生成されています。

アプリケーションをプロジェクトに登録する

先ほど、１つのDjangoプロジェクト内に複数のアプリケーションを作成して構築できると述べましたが、アプリケーションを作成するたびにプロジェクトに登録する作業が必要になります。

作成したcafe_app内の apps.py の中身を見てみます。

from django.apps import AppConfig


class CafeAppConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'cafe_app'

ここのクラス名（CafeAppConfig）をコピーしておきます。

続いて cafe/settings.py 内の INSTALLED_APPSリストに値を追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles', 

    'cafe_app.apps.CafeAppConfig',    # 追加
]

この後半の CafeAppConfig は、先ほどコピーしたクラス名に対応しています。

このリストに追加することで、プロジェクトにアプリケーションを追加することができます。

言語・タイムゾーンを日本仕様に変更

ここでついでに言語とタイムゾーンを日本仕様に変更しましょう（デフォルトでは欧米仕様になっている）。

cafe/settings.py内の次の２つの変数の値を変更します。

# 変更前
LANGUAGE_CODE = 'en-us'
TIME_ZONE = 'UTC'

# 変更後
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

ログの設定

Djangoのログの設定をします。

cafe/settings.py に次のコードを追加しましょう！

# Settings of logger

LOGGING = {
    'version': 1,   # 1固定
    'disable_existing_loggers': False, 

    # ロガーの設定
    'loggers': {
        # Djangoが利用するロガー
        'django': {
            'handlers': ['console'], 
            'level': 'INFO', 
        }, 
        # cafe_app_resultアプリケーションが利用するロガー
        'cafe_app_result': {
            'handlers': ['console'], 
            'level': 'DEBUG', 
        }, 
    }, 

    # ハンドラの設定
    'handlers': {
        'console': {
            'level': 'DEBUG', 
            'class': 'logging.StreamHandler', 
            'formatter': 'dev',
        }, 
    }, 

    # フォーマッタの設定
    'formatters': {
        'dev': {
            'format': '\t'.join([
                '%(asctime)s', 
                '[%(levelname)s]', 
                '%(pathname)s(Line:%(lineno)d)',
                '%(message)s',
            ])
        }, 
    }
}

※pythonでログを出力する考え方についてはこちらをご覧ください。

あわせて読みたい

【python】print()は不要！？loggerでログを出力する方法をわかりやすく解説！ みなさん、何かを開発する際、途中の計算結果などが正しく処理されているかを何で確認していますか？ pythonのprint()関数のみを使用していませんか？？ print()は簡単…

ルーティング設定

続いてルーティングの設定をしていきます。

私は最初ここでつまづきました、、、。

ルーティングとは？

Webアプリケーションにおけるルーティングとは、簡単に言うとどのURLにアクセスしたらどのページを表示させるかの設定です。

例えば本ブログで例えると、

といった具合に、https://bestrong-it-men.com/<> の <>に入る文字列（空欄も含める）によって表示されるページが異なります。

このようにユーザーがどのURLにアクセスしたらどんなページを表示させるのかを設定します。

プロジェクトルーティング

Djangoの場合のルーティングについてですが、まずは実際にコードを書いて動かしてみましょう。

Djangoでは urls.py というファイルがルーティングの役割を担っています。

すでに自動生成されているプロジェクト管理ディレクトリにある urls.py（cafe/urls.py）を次のように編集します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls), 
    // cafe_appにルーティングを渡す
    path('', include('cafe_app.urls')), 
]

これで 「https://<ホスト名>/ にアクセスした場合は、cafe_app にルーティングを渡す」という意味になります。

空欄なので分かりにくいですが、

# 例
path('hogehoge', include('cafe_app.urls'))

とした場合は「https://<ホスト名>/hogehoge/ にアクセスした場合は、cafe_app にルーティングを渡す」という意味になります。

アプリケーションルーティング

続いてアプリケーション側のルーティングを行います。

プロジェクトとしての urls.py とはまた別に、アプリケーションごとにまた urls.py を作成し、どのページを表示させるかの設定を行います。

cafe_appディレクトリ内に urls.py を新規作成しましょう！（自動生成されていないので注意です！）さらに次のようにコードを書き込みます。

from django.urls import path
from . import views

app_name = 'cafe_app'
urlpatterns = [
    path('', views.IndexView.as_view(), name="index"), 
]

プロジェクトルーティングと同様に、urlpatternsリストにルーティングを追加していくだけです。

path()メソッドの第一引数「”」は、先ほどと同様に「どのURLにアクセスしたら」という意味を表します。

第二引数の views.IndexView.as_view() は、どこにページを描写してもらうかを記述します（後ほどでてきます）。

第三引数の name=”index” は、ページ内で <a>タグを用いてリンクを貼る際などに用いられます。

新米エンジニア

urls.py はあくまでルーティング機能のみで、ページを描写する機能は持っていないんですね。

その通りです。ページを描写する機能は次に出てくるビューが担います！

全体を通してからの方が分かりやすいと思うので、ここでは話半分で大丈夫です！

ビューの設定

ルーティングの次はビューの設定です。

cafe_appディレクトリに自動生成されている views.py を次のように編集しましょう。

from django.views import generic

class IndexView(generic.TemplateView):
    template_name = "index.html"

ここででてくるクラス名 IndexView（3行目） は、先ほどのpath()の第二引数に対応しています。

// cafe_app/urls.py より抜粋
path('', views.IndexView.as_view(), name="index")

すなわち、アクセスしたURLがpath()の第一引数に引っ掛かったら、どのデータをページとして描写させるかの機能を第二引数のクラス（今回ならIndexView）にお願いする、といった具合です。

トップページは静的ページなので、静的ページに特化した TemplateViewクラスを用いています。

クラス変数である template_name に表示させるファイル名を指定する事で、そのデータを描写させます。今回は index.html というファイル（まだ作成していません）を指定しています。

テンプレートを作成する

トップページである index.html を作成しましょう！

トップページを作成

cafe_appディレクトリ内にtemplatesというフォルダを作成し、さらにそのフォルダ内に index.html というファイルを作成します。

その index.html 内の内容はこんな感じにしましょう。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>トップページ</title>
    </head>
    <body>
        <h1>welcome to django app.</h1>
    </body>
</html>

これで準備は整いました！

ローカルサーバーを立ち上げてみる

ローカルサーバーを立ち上げて、きちんとルーティングやビューの設定がうまくできているか確認してみましょう！

ターミナルで manage.py があるディレクトリに移動し、下記のコマンドを実行します。

(venv_cafe)$ python manage.py runserver

その後 http://127.0.0.1:8000/ にアクセスします。

このように表示されればOKです、お疲れ様でした！

このページが表示されるまでの流れを簡単におさらいをしますと、

といった流れになります。

Githubでコードの管理を行う

最後に、Githubを用いてコード管理をするための準備を行います！

すでにGithubを用いた管理方法をご存知の方は、この章をは飛ばしてOKです！

Githubを用いる事でソースコードのバージョンを管理したり、１つのプロジェクトを複数のメンバーが同時に修正したり機能の追加を簡単に行うことができるツールです。

エンジニアとして必ずと言っていいほど必要な知識だと思いますので、勉強しておいて損はないかと思います。

Githubの設定については別記事で解説しておりますのでよかったらご覧ください！

あわせて読みたい

Github リモートリポジトリ作成からローカルへの紐付けまで コード管理の定番であるGithubにおいて、リモートリポジトリの作成方法からローカルリポジトリとの紐付けまでを解説します。 自分もこの作業を行うたびに毎回調べている…

まとめ

ここまで長かったと思いますが、お疲れ様でした。

本記事ではWebアプリケーションに必要な考え方から、実際に簡単なページで構成されたアプリケーションをローカルサーバーで表示させる所までを行いました。

ページを表示させるまでの流れが最初は複雑に感じると思いますが、作成していく内に理解するかと思います！

次回はCSSの適用方法や各ページに共通して表示させるコンテンツの作成方法などをご紹介しますので、よければご覧ください。

あわせて読みたい

【初めてのDjango】（入門編 #02）CSSの適用からベーステンプレートの作成まで 本記事では「初めてのDjango」（入門編）として、初めてDjangoというフレームワークを使用してWebアプリケーションを作ってみたい！という方向けに、簡単なアプリケーシ…