学ぶ|Web開発入門 #4

Djangoの基本を独学で身につける完全ガイド|HTTPの仕組みからビュー・テンプレートまで

  • Django
  • Python
  • Web開発入門
  • プログラミング未経験

📋 この記事の目次
  1. Webの仕組みは「レストランの注文」だと考える
  2. Part A: Djangoの構造と環境構築
  3. Part B: ルーティングとビュー
  4. Part C: テンプレートと動的コンテンツ
  5. Part D: ベストプラクティスとセキュリティ
  6. 実践プロジェクト:ゲストブック機能を動かす
  7. 🧠 理解度チェック(一部抜粋)
  8. 挫折ポイントTOP3と対処法
  9. この先、何を学べばいいか
  10. まとめ
  11. 🎓 理解度テスト

前回、Pythonで訪問者コメントを集計するスクリプトを作りました。ですがまだ「自分のパソコンの中だけ」で完結しています。今回は、これをブラウザからアクセスできるWebアプリケーションにしていきます。使うのはPython製の代表的なWebフレームワーク「Django(ジャンゴ)」です。

「Pythonの文法は分かってきたけど、それがどうWebサイトになるのか繋がらない」 「サーバーとかリクエストとか、そもそも何をしている仕組みなのかイメージできない」

この2つを解消しながら、自己紹介カードに 「ゲストブック(訪問者からのメッセージ帳)」 機能を実装していきます。


Webの仕組みは「レストランの注文」だと考える

  • ブラウザ(お客さん) が「このページをください」とリクエスト(注文) を送る
  • サーバー(お店) がその注文を受け取り、キッチン(アプリケーションの処理)で用意して
  • レスポンス(できあがった料理) を返す

Djangoの役割は、この「お店」の運営を効率化するための仕組み一式です。「どの注文がどの担当(機能)に回るか」を管理する仕組み(urls.py)、実際に注文をさばく「調理担当」(views.py)、お客さんに出す「盛り付け」(テンプレート)が、それぞれ役割分担されています。

HTTPリクエスト・レスポンスとステータスコード

ブラウザとサーバーのやり取りは「HTTP」という共通のルールで行われます。

リクエスト: GET /guestbook/ HTTP/1.1
レスポンス: HTTP/1.1 200 OK
ステータスコード 意味
200 成功。正常にページを返せた
302 リダイレクト。別のページに移動してほしい
404 見つからない。指定されたページが存在しない
500 サーバー側のエラー。プログラムの不具合など

「動的Webページ」とは、この仕組みの中でリクエストの内容に応じて内容を変えて返すページのことです(例: ログインしている人には名前を表示する)。前回までの自己紹介カードは、誰がアクセスしても同じ内容を返す「静的ページ」でした。

🧓 ベテランの現場コラム 「エラー404」という言葉自体はよく知られていますが、実務では「このステータスコードが返ってきているから、原因はサーバー側かクライアント側どちらにありそうか」を切り分ける材料として使います。障害調査の第一歩は、まずステータスコードを確認することです。


Part A: Djangoの構造と環境構築

Djangoとは・インストール・プロジェクト作成

pip install django
django-admin startproject profile_site
cd profile_site
python manage.py startapp guestbook

プロジェクトとアプリの違い

Djangoでは「プロジェクト」(サイト全体の入れ物)の中に、複数の「アプリ」(機能単位のまとまり)を配置します。今回はprofile_siteプロジェクトの中にguestbook(ゲストブック機能)というアプリを作りました。

ディレクトリ構造

profile_site/
├── manage.py            # 各種コマンドの実行役
├── profile_site/
│   ├── settings.py      # プロジェクト全体の設定
│   └── urls.py          # プロジェクト全体のURL振り分け
└── guestbook/
    ├── views.py          # 処理(調理担当)
    ├── urls.py           # アプリ内のURL振り分け
    └── templates/        # 表示用テンプレート

manage.pyコマンドとsettings.pyの主要設定

python manage.py runserver       # 開発用サーバーを起動
python manage.py startapp <>  # 新しいアプリを追加
python manage.py migrate         # データベースを最新の状態にする(次回詳しく扱う)

settings.pyにはINSTALLED_APPS(有効化するアプリの一覧)やALLOWED_HOSTS(アクセスを許可するドメイン)といった、プロジェクト全体に関わる設定が集まっています。


Part B: ルーティングとビュー

views.pyとHttpResponse

# guestbook/views.py
from django.http import HttpResponse

def index(request):
    return HttpResponse("ゲストブックへようこそ")

views.pyの関数(ビュー)は「リクエストを受け取り、レスポンスを返す」という1つの役割に専念します。HttpResponse以外にも、JSON形式で返すJsonResponseや、404を返すHttp404などが用途に応じて使い分けられます。

URLパターンとプロジェクトレベルの設定

# guestbook/urls.py
from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="guestbook-index"),
]
# profile_site/urls.py
from django.urls import path, include

urlpatterns = [
    path("guestbook/", include("guestbook.urls")),
]

/guestbook/にアクセスが来たら、guestbookアプリのURL設定に処理を委ねる」という2段構えになっているのが、Djangoの特徴的な設計です。

エラーハンドリング(404)

from django.shortcuts import get_object_or_404

def message_detail(request, message_id):
    message = get_object_or_404(Message, pk=message_id)
    return render(request, "guestbook/detail.html", {"message": message})

存在しないメッセージIDにアクセスされたときは、自前でエラー処理を書かなくてもget_object_or_404が自動的に404エラーを返してくれます。


Part C: テンプレートと動的コンテンツ

テンプレートの役割とレンダリング

from django.shortcuts import render

def index(request):
    messages = [
        {"visitor_name": "山田花子", "message": "参考になりました"},
        {"visitor_name": "佐藤次郎", "message": "応援しています"},
    ]
    return render(request, "guestbook/index.html", {"messages": messages})

render()は「テンプレートファイル+渡したいデータ」を組み合わせて、最終的なHTMLを生成する関数です。

テンプレート記法(DTL: Django Template Language)

<!-- guestbook/templates/guestbook/index.html -->
<h1>ゲストブック</h1>
<ul>
  {% for m in messages %}
    <li>{{ m.visitor_name }}: {{ m.message }}</li>
  {% empty %}
    <li>まだメッセージがありません</li>
  {% endfor %}
</ul>

{{ }}で変数を埋め込み、{% %}で繰り返しや条件分岐といったロジックを書きます。

テンプレートフィルターとURLタグ

<p>{{ m.message|truncatechars:20 }}</p>  <!-- 20文字で省略 -->
<p>{{ m.posted_at|date:"Y年m月d日" }}</p>
<a href="{% url 'guestbook-index' %}">ゲストブックに戻る</a>
{# これはコメントで、出力には表示されない #}

|で繋げる「フィルター」は、表示直前にちょっとした加工(文字数制限・日付整形など)を施す仕組みです。{% url %}タグは、URLを直接文字列で書かずに名前で参照できるため、後でURL構造を変えてもリンク切れが起きにくくなります。

テンプレート継承

<!-- base.html -->
<html>
<body>
  {% block content %}{% endblock %}
</body>
</html>

<!-- guestbook/index.html -->
{% extends "base.html" %}
{% block content %}
  <h1>ゲストブック</h1>
{% endblock %}

共通のヘッダー・フッターをbase.htmlにまとめ、各ページはその「差分」だけを書く仕組みです。9本のガイド共通デザイン(ナビゲーションやフッター)を実装する際にも、この継承の考え方をそのまま使います。

🧓 ベテランの現場コラム 新人時代によくあるのが、すべてのページに同じヘッダー・フッターのHTMLをコピペしてしまうケースです。修正が必要になるたびに全ページを直す羽目になり、1箇所直し忘れるとサイト全体でデザインがバラバラになります。テンプレート継承は、この「コピペ地獄」から抜け出すための仕組みです。


Part D: ベストプラクティスとセキュリティ

  • 実装フロー: urls.pyでルートを決める→views.pyで処理を書く→テンプレートで表示、という順番を毎回意識する
  • セキュリティ考慮: フォームからの入力をそのままテンプレートに表示する場合、Djangoは標準で自動エスケープ(悪意あるコードが実行されないよう無害化)してくれます。この仕組みを無効化する書き方(|safeフィルター等)は、本当に必要な場合以外は避けましょう(詳しくは9回目のセキュリティ回で扱います)

実践プロジェクト:ゲストブック機能を動かす

  1. guestbookアプリを作成し、urls.pyとルーティングを設定する
  2. views.pyでメッセージ一覧を返すビューを実装する
  3. テンプレートを作り、base.htmlから継承する
  4. 前回のPythonスクリプトのロジック(集計処理)をビューの中に組み込み、「件数」も一緒に表示する

これで、ブラウザからアクセスすると動的にゲストブックの内容が表示される状態になります。次回、実際にメッセージを保存する「データベース」を接続します。


🧠 理解度チェック(一部抜粋)

  • Q. urls.pyviews.pyの役割分担は? → urls.pyはどのURLをどの処理に振り分けるかの案内板、views.pyは実際の処理を行う担当者
  • Q. テンプレート継承のメリットは? → 共通部分を1箇所にまとめ、修正漏れやコピペによるデザインのばらつきを防げる
  • Q. HTTPステータスコード404の意味は? → リクエストされたページが見つからないことを示す

挫折ポイントTOP3と対処法

1. 「ページが真っ白/エラー画面になる」問題

urls.pyのパス指定ミスか、テンプレートファイルの配置場所の間違いがほとんどです。Djangoの開発サーバーが表示するエラー画面には原因箇所が具体的に示されるので、まずそこを読みます。

2. 「テンプレートに変数が反映されない」問題

render()に渡す辞書のキー名と、テンプレート内の{{ }}の変数名が一致しているか確認します。

3. 「アプリを追加したのに反映されない」問題

settings.pyINSTALLED_APPSに、新しく作ったアプリ名を追加し忘れているケースが多いです。

🧓 ベテランの現場コラム Djangoに限らずフレームワークを学ぶときは、「決まり事(お作法)が多くて窮屈」と感じるかもしれません。ですが、この「お作法」こそが、複数人での開発や半年後の自分が混乱しないための仕組みです。慣れないうちは面倒に感じても、まずは型通りに沿って動かすことを優先しましょう。


この先、何を学べばいいか

ゲストブックの画面ができたら、次は送られてきたメッセージを保存する「データベース(SQL)」 を学びます。今はまだ、ビューの中に直接書いたダミーデータを表示しているだけの状態です。


まとめ

  • Webの基本は「リクエストを受けてレスポンスを返す」というやり取り
  • Djangoはurls.py(振り分け)→views.py(処理)→テンプレート(表示)の役割分担で構成される
  • テンプレート継承で共通パーツをまとめ、コピペによる修正漏れを防ぐ
  • Djangoは標準でHTMLの自動エスケープを行い、セキュリティ面の初期対応をしてくれている

参考にした学習リソースについて

本記事は、ハーバード大学が提供する人気講座「CS50’s Web Programming with Python and JavaScript」の内容を参考にしつつ、独自の題材・独自の構成・自作のサンプルで書き下ろしたオリジナル解説記事です。CS50そのものに興味を持った方は、以下の公式サイトも覗いてみてください。

🎓 理解度テスト

学んだ内容を確認しましょう。全6問。