Djangoチュートリアル

DjangoはWebアプリをフルスタックで開発することのできるPythonのフレームワークです。
ここではDjangoによるアプリの立ち上げやrenderによるページの表示方法などについて紹介します。

チュートリアルといいつつ少し細かく説明してます。
最初のうちはわからなくて全然OKです！(それが普通)
焦らずまずはWebアプリが簡単に作れることを実感してみてください！

いつか見返したときにちょっとでもわかっていればもう無敵です。

Djangoのインストール

まずはDjangoのインストールをしましょう！
DjangoはPythonのフレームワークなので外部からインストールをすることで使えるようになります。

以下のコマンドをコマンドプロンプトやターミナルで実行することでインストールが始まります。

pip install django

ちゃんとDjangoが入っているかを確認するには以下のコマンドで表示されればOKです!

python -m django --version

または

django-admin --version

これでDjangoのセットアップは完了です！ 次にアプリの立ち上げについて説明します。

Djangoアプリの立ち上げ

まずはエディター(VsCodeなど)で好きなフォルダーを開いてください。
そのフォルダー内に今回のDjangoアプリ全体が入ります。(作業場所的な)

作業フォルダー内にいくつもDjangoアプリを作成しても問題ありません！
それぞれアプリごとに独立してます。

おすすめはDjango_appsなどのフォルダーを作成してその中に練習でいくつもアプリを作るのがおすすめ？

エディターで練習用のフォルダーには入れたらいよいよDjangoアプリを作成します。
以下のコマンドでアプリを作成しましょう！

django-admin startproject testproject

このコマンドを実行すると今のフォルダーの中にtestproject というフォルダーができているはずです。
この中にDjangoのアプリ全体が入っています！

アプリ全体のことをプロジェクト、作成されたフォルダーをプロジェクトフォルダーと言います。

ちなみにtestprojecctのところは好きなプロジェクト名にしてもらってOKです。
今回は分かりやすいようにtestprojectで進めていきます。

次にVscodeの作業場所をプロジェクト内に移動します。
ターミナルのcdコマンドを利用してプロジェクト内に移動します。

cd testproject

今はまだアプリのベース部分だけができた状態です。
これから機能ごとの骨組み(アプリ)を作成します。

python manage.py startapp app

これがアプリが作られたはずです。
appのところは好きなアプリ名で作ることができます。

機能ごとにアプリを作成するのが一般的とされています。

• Djangoプロジェクト
  • auth(ユーザー登録機能)
  • todo(Todoアプリ機能)
  • comments(コメント機能)

このように各機能ごとにstarappで機能を独立に分割します。

アプリまで作成したらこのようなフォルダ構成となっているはずです。

testproject(プロジェクト全体を格納するフォルダ)
├─ app(アプリディレクトリ)
│   ├─ migrations
│   │   └─ __init__.py
│   ├─ __init.py
│   ├─ admin.py
│   ├─ apps.py
│   ├─ models.py
│   ├─ test.py
│   └─ views.py
├─ testproject(プロジェクトディレクトリ)
│   ├─ __init__.py
│   ├─ asgi.py
│   ├─ settings.py
│   ├─ urls.py
│   └─ wsgi.py
└─ manage.py

いろんなファイルが作成してびっくりするかもですがあまり気にしなくて大丈夫です！
簡単に各ファイルの説明だけします。(どんなものなのかだけ)

各ファイル説明

init.py
Python の パッケージであることを示す特別なファイル。気にする必要はありません

migrations
DBを作る際の設計図的なものです。
プログラム側が読むので余り意識する必要はないです。

admin.py
DBの管理者ページを編集する際に使います。

apps.py
アプリの設定が定義されているファイル。基本いじることはないです。

models.py
めちゃくちゃ使います！ DBのモデル(ユーザーなどの骨組み)を定義するファイル。
DBに登録するデータの骨組みはここで作ります。

test.py
テストプログラムを記述するファイル。テストしたいときには使いますが、、、

views.py
めちゃくちゃ使います！ 画面を表示するビューの役割を担うファイル。
ここでフロントとのやり取りやページの表示をします。

asgi.py
デプロイ作業の時のWebサーバーとのエントリーポイントです。使いません。

wsgi.py
デプロイ作業の時のWebサーバーとのエントリーポイントです。使いません。

manage.py
Djangoプロジェクトを動かすためのコマンドが定義されたファイル。

urls.py
ルーティングの設定をするファイルです。views.pyで作ったページをurlと結び付けます。

settings.py
Djangoのプロジェクト全体の設定を定義しているファイルです。意外といじります。

アプリの立ち上げ

長くなってしまいましたがアプリの立ち上げをしていこうと思います！
といいたいのです、もう少しだけアプリの設定をします。

作成したアプリをプロジェクトに読み込ませます。
settings.pyに以下のような記述を追加してください。

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "app.apps.AppConfig" ← ここを追加
]

ちょっと詳しいお話 (飛ばして大丈夫です)
settings.pyに追加した内容はこれはappアプリのapps.pyの中のAppConfigというのを呼び出しています。
これがapps.pyの中身です。

from django.apps import AppConfig
 
class AppConfig(AppConfig):  ←　これを呼び出している。
    default_auto_field = "django.db.models.BigAutoField"
    name = "app"

つまり例えばauthアプリを作ったらAuth.apps.AuthConfigとすればプロジェクトに読み込ませることができます。 もしわからなくなってもそのアプリのapps.pyを見れば書き方がわかるはずです。

それではDjangoアプリをローカル環境(PC内)で立ち上げてみましょう。 以下のコードでDjangoのアプリは立ち上げることができます。

python manage.py runserver

これでターミナルに表示されるURLhttp://127.0.0.1:8000/にアクセスしてみましょう。

こんな感じの画面が表示されればOKです🎊

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.

終了するにはターミナルでCtrl + Cを押してください。

今のままだと英語の表記なのでWebページを開くと翻訳が出てしまいます。
なのでここで言語とタイムゾーンの設定をしておきましょう。

settings.pyのところを変更してください。

LANGUAGE_CODE = "en-us" ← "ja"に変更
 
TIME_ZONE = "UTC" ← "Asia/tokyo"に変更

これでサーバーを再起動すれば日本語になっているはずです。

ページの表示(view.pyとurls.py)

開発用サーバーの立ち上げができたので次はページの表示です。
ページの表示にはviews.pyを使用します。

views.py

まずはapp/views.py以下のコードを追加してみてください。

from django.http import HttpResponse
 
def index(request):
    return HttpResponse("Hello, world. You're at the polls index.")

これはアクセスしたときにHello Worldと返答(レスポンス)を返すindexというページです。

実際にどのような流れでページの表示が行われているのかを説明します。

そのページにアクセスするとブラウザ(クライアント側)はリクエストを送ります。
それを受け取ったDjangoはそのお返しにレスポンスを返します。

最後にそのレスポンスをブラウザが読み取ってページを表示します。

よくわからないカタカナで出ていますがやっていることは

以下がその簡単な流れです！(ふわふわとした理解で全然OK)

urls.py

今のままではこのページにアクセスしたくてもページとURLが紐づけされていません。
よってURLとindexページを紐づける必要があります。

ここで登場するのがurls.pyです。ページとurlの紐づけ(ルーティング)を設定できます。

urls.pyはプロジェクトディレクトリ内にありますが
すべてのurlをプロジェクトディレクトリで管理するのは余りいい方法ではないです。
読みやすさやアプリの機能分割というメリットがなくなってしまいます、、、

よってアプリディレクトリ内にurls.pyを作る方法が一般的です。

作成した結果appディレクトリはこうなるはずです。

testproject
└─ app
    ├─ migrations
    │   └─ __init__.py
    ├─ __init.py
    ├─ admin.py
    ├─ apps.py
    ├─ models.py
    ├─ test.py
    ├─ urls.py ← ここに追加
    └─ views.py

ではルーティングの設定をapp/urls.pyに書いていきます。
以下のコードでindexページとurlの紐づけができます。

from django.urls import path
 
from . import views
 
urlpatterns = [
    path("", views.index, name="index"),
]

ルーティングの設定はリスト型のurlpatternsにカンマ区切りで追加していきます。
pathはurlとページの紐づけ設定を作ってくれる命令みたいなものです。

pathの第一引数の""のところがurlを記述するところです。
今回はページの先頭に配置したいので空にしています。("test/"とすれば/test/でアクセスできます)

プロジェクトとの紐づけ

app/urls.pyにpathを書いただけではまだアクセスできません、、
最後にプロジェクト全体のルーティングを管理しているurls.pyに各アプリurlsを投げます。

プロジェクトディレクトリ内のurls.pyに以下の記述を追加してください。

from django.contrib import admin
from django.urls import path,include ← includeを追加
 
urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("app.urls")) ← ここを追加
]

includeは各アプリのルーティング設定をまとめて渡してくれる命令です。

これでルーティングの設定は完了です!
Webページのトップに今回は設定しています。
早速開発サーバーを立ててhttp://127.0.0.1:8000/にアクセスしましょう！

ここでもurls.pyの動きを図で見てみましょう！

少し図がごちゃごちゃしていますが結局はページにアクセスしたら表示という基本的な動きをプログラミングで作っているだけです！

ルーティングの使用例

pathの第一引数に設定したurlはincludeで渡したアプリのurlのすべてに設定されるurlです。
つまりここを"test/"とすればapp/urls.pyで設定したurlはすべて/test/‥となります。

イメージが難しいと思うので例を挙げておきます。 app/urls.pyで以下のように設定したとします。

from django.urls import path
from . import views
 
urlpatterns = [
    path('', views.index, name='index'),            # /
    path('create/', views.create, name='create'),   # /create/
    path('read/all/', views.read, name='read'),         # /read/all/
]

これをincludeでプロジェクトに渡します。

• もしincludeで渡すとき、pathのurlをappにすると
  • http://127.0.0.1:8000/app/
  • http://127.0.0.1:8000/app/create/
  • http://127.0.0.1:8000/app/read/all/

このようにアプリごとに共通のurlからスタートできるので各アプリでURLを整理しやすいです。
またurlから今何をしているのかも理解しやすくなります！

HTMLの生成と表示

ここまではページにアクセスすることでHttpResponseを返していました。
ですがこのままではレスポンスの中に文字を格納して表示しているだけなのでページらしさがありません。

実際のWebページはHTMLというマークアップ言語で書かれたHTMLファイルを表示させています。
よって私たちのアプリでもHTMLでページを作ってそれを返すようにします。
※今までの方法はリクエストとレスポンスをわかりやすくしたもので実際にはあまり使いません。

ここからはviews.pyやHTMLを書きながらDjangoがどのような挙動をしているかを解説していきます。

ページの表示の仕組み

Djangoはviews.pyなどのビューと言われるページ表示のロジック部とHTMLなどのテンプレートを別々に管理します。
最後にそれらをまとめて1つのページとして生成をしフロント側に出力結果として返します。

• 簡単に言えば、、
  • HTMLなどのテンプレートとはページの模型
  • views.pyなどのビューはデータを外から受け取り、処理する
  • 最後にviews.pyは模型にデータを組み込んでページ完成！

ちなみにこのように模型にデータを組み合わせてその場でページを完成させる機能をテンプレートエンジンと言います。

これを実現するためにHTMLなどの模型を補完する場所を作ります。

templatesフォルダの作成

管理の方法は色々ありますが、アプリごとに表示ページを管理するのが一般的です。

アプリフォルダに新しくtemplatesというフォルダーを作成してください。
その後、今作成したtemplatesの中にさらにアプリ名と同じフォルダーを作成します。
そのフォルダーの中にindex.htmlというファイルを作成してください。

アプリフォルダ内はこのような構成になっているはずです！(templatesをappで挟む形になる)

testproject
└─ app
    ├─ migrations
    │   └─ __init__.py
    ├─ templates
    │   └─ app
    │       └─ index.html   ← これを追加
    ├─ __init__.py
    ├─ admin.py
    ├─ apps.py
    ├─ models.py
    ├─ test.py
    ├─ urls.py 
    └─ views.py

HTMLを書いてみよう！

作成したindex.htmlを開いてみましょう。
HTMLはマークアップ言語なのでもちろん文法が存在します。

まずはHTMLのひな型(お約束)を書いてみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

これがHTMLのひな形です。

気づいた人もいるかもですがHTMLの基本文法は単純です。

• <body> などの開始タグ
  • 中に入れる要素
• </body>などの対となる終了タグ

このようなタグで囲うのが文法です。
タグの種類によっていろんなものを表示できます。

簡単に主要なタグを説明をします。

• <head></head>タグ
  htmlのメタデータ(画面には関係ない裏のデータ)を要素として記述します。

• <body></body>タグ
  実際に画面に表示される部分の大枠です。
  このタグの中にいろんなタグを書いてページを表現します。

• <h1></h1> タグ
  見出しを表すタグで、<h1>〜<h6>まであります。
  数字が小さいほど文字が大きく重要な見出しになります。

• <p></p> タグ
  段落を表すタグで、通常の文章に使います。

• <a href=""></a> タグ
  リンクを作成するタグです。hrefという属性(追加情報的な)にリンク先を指定します。
  このタグに囲われた要素がリンクになります。

  <a href="https://example.com">Exampleサイトへ移動</a>

• <img src="" alt=""> タグ
  画像を表示するタグです。srcという属性に画像のURL、alt属性に画像が表示されなかったときの代わりの文章を指定します。

  <img src="/images/sample.jpg" alt="サンプル画像" />

これらがよく使う基本的なタグです！

簡単に好きにHTMLを書いてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>こんにちはページ！</h1>
    <p>こんにちは！ようこそ</p>
</body>
</html>

renderによるページの表示

お待たせしました！いよいよページの表示です🚀

app/views.pyで関数indexを変更しましょう。

from django.shortcuts import render
 
from django.http import HttpResponse
 
 
def index(request):
    return render(request, "app/index.html") ← ここを変更してください。

これで関数indexをルーティングで結び付けたURLにアクセスしてみてください！
HTMLが表示されているはずです。

renderはフロントもらったrequestとページの模型をもらいます。
もらったデータから先ほどのようなHttpResponseを作りそれをreturnすることでページを表示します。

なにをやっているのかいまいち理解しづらいかもしれませんが深く考える必要はないです！
renderはrequestsとHTMLをもらえばページを作成してくれるという認識でOKです。

ここはもしかしたら図の方がわかりやすいかもしれません。
以下がDjangoがHTMLでページを表示するまでの流れです！

少し複雑なので飛ばしても全然OKです。

画面に表示されるページはブラウザがHTMLを読み込んだ結果です。
DjangoはそのHTMLをアクセスされたら受け取ったデータと合わせて表示しているんです。

ここでもしかしたら受け取ったデータってなに？となった人がいるかもしれない。

実は今のままでDJangoのテンプレートエンジンの力を発揮できていません。
次は実際にフロントやpythonからデータを受け取ってHTMLで表示します！！

この動作は例えばユーザー情報などをページに表示する際に使用します。

Contextを利用しよう！

ついにページが表示できました！これでWebアプリの基本は完璧です。
ですがもう少しDjangoの威力を知ってもらいたいです。

ここからはDjangoのテンプレートエンジンをフルに活用します。

先ほども説明した通りDjangoはデータとページの模型を組み合わせてページを作成します。
つまりDjangoは受け取ったデータによってページの表示を動的に変更することができます。

まずは実験して見てみましょう！
app/views.pyに以下の記述を追加しましょう

from django.shortcuts import render
 
 
from django.http import HttpResponse
 
 
def index(request):
    username = "R1N" ← 追加
 
    context = {"username": username} ← 追加
    return render(request, "app/index.html", context=context) ←　追加

上のコードはまずusernameという変数にユーザー名を渡しています。
それをcontextというdict型の変数にusernameというキー名でusernameを登録しています。
最後にdict型のcontextをrenderに渡しています。

つまりこれはcontextのusernameキーにアクセスするとR1Nという値が取得できます。

次にindex.htmlに以下の記述を追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>こんにちはページ！</h1>
    <p>こんにちは！ようこそ{{ username }}さん</p> ←　追加
</body>
</html>

これでindex.htmlのページを開いてみてください。
ページにはR1Nの文字が表示されているはずです。

つまりcontextを用いてrenderに渡すことでpythonの変数を渡すことができます。

HTMLはプログラミング言語ではないので普通はこのような変数などはHTML内では使えません。
しかしDjangoのテンプレートエンジンを使うことでHTMLを編集することなくHTMLの表示を変更できます。

試しにviews.pyのusernameの"R1N"を変更してみてください。

使う際は以下のような記述で使用できます。

{{ キー名 }}

おまけ

今のままだとよく見るWebアプリのおしゃれなデザインになりません。
機能事態にはあまり影響はありません。
でもやっぱりおしゃれなデザインは作っていてモチベーションになります。

HTMLの見た目を装飾するには**CSS(Cascading Style Sheets)**を使います。 ですがデザインの領域なので覚えることなども多く、何か作りながら覚えるのが一番です。

よってここでは簡単にCSSを書けるCSSのフレームワークを使いましょう！

今回はフレームワークのBootstrapを使用します。
インストールは必要なく、HTMLにリンクを記述するだけで使用できるようになります。

練習のために新しいページとHTMLを用意して以下のようにひな形に追加しましょう！

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    ↓ 追加
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <title>Document</title>
</head>
<body>
 
↓ 追加
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
 
</body>
</html>

Bootstrapはタグのclass属性にBootstrap特有の記述をすることで見た目を適用することができます。

Bootstrapの書き方はたくさんありますが、公式ドキュメントにサンプルがあるのでそれを流用するだけでも十分使えます。

Bootstrap 公式ドキュメント リンク: Bootstrap公式サイト

例としてBootstrapのNavbarを使ってみます。
以下は公式ドキュメントからそのまま流用したものです！

これをbodyタグの中に貼り付けてみてみましょう！おしゃれなナビゲーションバーが作られるはずです。

<nav class="navbar navbar-expand-lg bg-body-tertiary">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown
          </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
      <form class="d-flex" role="search">
        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success" type="submit">Search</button>
      </form>
    </div>
  </div>
</nav>

他にもたくさんあるので色々試してみましょう！

まとめ

これが基本的なDjangoでのページの作成の流れです。
あとはページが必要になるたびに

• templates/app/~~.htmlでページの模型を作る
• views.pyでページを表示するロジックを作る
• urls.pyでviews.pyで作ったページとURLを紐づける

をするだけでWebアプリを作成できます！

もしかしたら
ここはどうしてこの書き方なんだろう？
これでどうして動くの？
と疑問が出るかもしれません。

こういってはあれですが、あまり気にしなくて大丈夫です!!

そういうもん

おまじない

Djangoはフレームワークなのでそういった面倒くさい処理を代わりにすでに用意してくれる存在です。
なので初めのうちはDjangoのご厚意?に乗っかって、まずはWebアプリ作れるすげー！で行きましょう！

もちろん深く知ることも大切です！Djangoの公式ドキュメントは日本語なのでいつか読んでみてください。

📚 参考資料