Django 5入門チュートリアル｜実践ブログ開発で学ぶWeb開発

第4回 / 全10回

はじめに：いよいよコードを書く時が来た！
この記事で学べること
ビュー（View）とは？
最初のビューを作成しよう
URL とビューを結びつける
動作確認
もう少し複雑なビューを作ってみよう
テンプレートを使って HTML を表示
テンプレートにデータを渡す
URL パラメータを受け取る
実践的な例：簡単なブログ記事リスト
よくあるエラーと対処法
まとめ
完成したコード
次回予告

【Django View入門】関数ベースビューでHello Worldを表示する方法

2025/09/07に更新

はじめに：いよいよコードを書く時が来た！

前回は、Django のプロジェクト構造について学び、practiceアプリケーションを作成しました。ファイルがたくさんあって少し圧倒されたかもしれませんね。

でも今回は、ついに実際のコードを書いていきましょう！「Hello Django!」をブラウザに表示させる瞬間の感動を、一緒に体験してみましょう。

プログラミングの醍醐味は、自分が書いたコードが実際に動くのを見ることです。その第一歩を踏み出してみましょう！

Note

初めてこの記事を読む方へ：

この記事は連載の第4回目です。プロジェクト構造の理解がまだの方は、第3回の記事をご覧ください。もしすぐにビューの作成を始めたい方は、前回GitHubコードを参考にしながら進めることもできます。

Important

コマンド実行について

今回から、Django のコマンドは以下のような形式で記載します：

ターミナル

$ python manage.py runserver

この$マークはプロンプトを表す記号で、実際には入力しません。

Django のコマンドはWindows/Mac 共通です
すべて VSCode のターミナルから実行してください
仮想環境（venv）が有効になっていることを確認してください
特に指定がない限り、プロジェクトのルートディレクトリ（manage.pyがあるフォルダ）で実行します

OS 固有のコマンド（ファイル操作など）が必要な場合は、これまで通りタブで分けて記載します。

この記事で学べること

Django の「ビュー（View）」とは何か
関数ベースビューの基本的な書き方
URL とビューを結びつける方法
HttpResponse を使った文字列の表示
テンプレートを使った HTML の表示
ビューからテンプレートへのデータの渡し方

それでは、Django での最初のプログラミングを始めてみましょう！

ビュー（View）とは？

▶MVT パターンのおさらい

前々回、Django の MVT パターンについて学びましたね。覚えていますか？

Model：データの管理
View：リクエストを受けて、レスポンスを返す（今回の主役！）
Template：HTML の生成

今回は、この「View」の部分を実装していきます。

▶ビューの役割

ビューは「処理の司令塔」です。具体的には：

ブラウザからのリクエストを受け取る
必要な処理を実行する
レスポンス（HTML や JSON など）を返す

例えるなら、レストランのウェイターのような存在です。お客様（ブラウザ）の注文（リクエスト）を聞いて、料理（レスポンス）を提供します。

最初のビューを作成しよう

▶VSCode で views.py を開く

まず、前回作成したpracticeアプリケーションのviews.pyを開いてみましょう。

Tip

practiceアプリを使う理由

今回はDjangoの基本を学ぶため、練習用のコードはpracticeアプリに作成します。 blogアプリはまだ作成していませんが、後の回で本格的なブログ機能を作るときに作成します。

VSCode のエクスプローラーから： practice → views.py をクリック

最初はこんな内容になっているはずです：

practice/views.py

from django.shortcuts import render

# Create your views here.

ほぼ空っぽですね。ここに最初のビューを書いていきましょう！

▶Hello Django を表示する関数を作成

views.pyを以下のように編集してみましょう：

practice/views.py

from django.shortcuts import render
from django.http import HttpResponse


# Create your views here.
def hello_world(request):
    return HttpResponse("Hello Django!")

コードの説明：

from django.http import HttpResponse：レスポンスを返すためのクラスをインポート
def hello_world(request):：ビュー関数の定義
request：ブラウザからのリクエスト情報が入っている
HttpResponse("Hello Django!")：文字列をレスポンスとして返す

Tip

Django のビュー関数の基本ルール：

必ずrequestを第一引数として受け取る
必ずHttpResponseオブジェクト（またはその派生）を返す
関数名は分かりやすい名前にする（hello_world、post_listなど）

URL とビューを結びつける

ビュー関数を作っただけでは、まだブラウザからアクセスできません。URL とビューを結びつける必要があります。

▶アプリケーション用の urls.py を作成

practiceフォルダの中に新しくurls.pyファイルを作成します。

VSCode で：

practiceフォルダを右クリック
「新しいファイル」を選択
ファイル名をurls.pyと入力

作成したpractice/urls.pyに以下の内容を記述してみましょう：

practice/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("hello/", views.hello_world, name="hello_world"),
]

コードの説明：

from . import views：同じフォルダのviews.pyをインポート
path("hello/", views.hello_world, name="hello_world")：
- 'hello/'：URL パターン
  - ユーザーがアクセスする URL（http://localhost:8000/practice/hello/）
  - 最後の/（スラッシュ）は重要！Django は基本的に URL の末尾に/を付けます
  - もし/なしでアクセスすると、Django が自動的に/付きにリダイレクトしてくれます
- views.hello_world：呼び出すビュー関数
  - hello/にアクセスがあったときに実行される関数
  - views.pyの中のhello_world関数を指定
- name='hello_world'：URL の名前（エイリアス）
  - この URL に名前を付けることで、テンプレートやビューから名前で参照できる
  - 例：{% url 'hello_world' %}で URL を生成できる
  - URL パスを変更しても、名前で参照している箇所は自動的に追従する

▶プロジェクトの urls.py に追加

次に、プロジェクト全体のurls.py（mysite/urls.py）を編集します：

mysite/urls.py

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

urlpatterns = [
    path("admin/", admin.site.urls),
    path("practice/", include("practice.urls")),
]

変更点：

includeをインポートに追加
path("practice/", include("practice.urls"))：practice アプリの URL を含める

Note

URL の設定は 2 段階になっています：

プロジェクトのurls.py：大まかな振り分け
アプリケーションのurls.py：詳細な URL 設定

これにより、アプリケーションごとに URL を管理できます。

動作確認

さあ、いよいよ動かしてみましょう！

▶開発サーバーを起動

VSCode のターミナルで：

ターミナル

$ python manage.py runserver

▶ブラウザで確認

ブラウザを開いて http://localhost:8000/practice/hello/ にアクセスしてください。

「Hello Django!」が表示されましたか？おめでとうございます！これがあなたの最初の Django ビューです！

もし表示されない場合は、以下を確認してください：

URL は正しいか（最後の/を忘れていないか）
urls.pyの設定は正しいか
サーバーは起動しているか

もう少し複雑なビューを作ってみよう

▶現在時刻を表示する

practice/views.pyに新しい関数を追加します：

practice/views.py

from django.shortcuts import render
from django.http import HttpResponse
from datetime import datetime

# Create your views here.
def hello_world(request):
    return HttpResponse("Hello Django!")

def current_time(request):
    now = datetime.now()
    html = f"<html><body>現在時刻は {now} です。</body></html>"
    return HttpResponse(html)

practice/urls.pyにも URL を追加：

practice/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("hello/", views.hello_world, name="hello_world"),
    path("time/", views.current_time, name="current_time"),
]

▶動作確認と hotreload の確認

ブラウザで http://localhost:8000/practice/time/ にアクセスしてみましょう。現在時刻が表示されます！

ところで、ここでちょっと嬉しい機能を紹介します。 Django の開発サーバーにはホットリロード（自動再読み込み）機能が備わっているんです。つまり、ファイルを変更して保存すると、サーバーが自動的に再起動してくれるんですよ！

実際に確認してみましょう：

ブラウザで http://localhost:8000/practice/time/ を開いたままにしておく
practice/views.pyのcurrent_time関数を少し変更してみる：

practice/views.py

def current_time(request):
    now = datetime.now()
    html = f"<html><body><h1>現在時刻は {now} です！</h1></body></html>"  # h1タグを追加
    return HttpResponse(html)

ファイルを保存する（Ctrl+S または Cmd+S）
ターミナルを見ると、自動的に再起動したメッセージが表示される：

C:\Users\techarm\Desktop\django_study\mysite\blog\views.py changed, reloading.
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).

ブラウザをリロード（Ctrl+R または Cmd+R）すると、変更が反映されている！

Tip

Django のホットリロード機能について

Django の開発サーバー（runserver）は、以下のファイルの変更を監視しています：

Python ファイル（.py）
テンプレートファイル（.html）
設定ファイル

これらのファイルを変更・保存すると：

自動的にサーバーが再起動
変更がすぐに反映される
手動でサーバーを停止・再起動する必要がない！

ただし、以下の場合は手動での再起動が必要です：

新しいアプリを追加した時
新しい Python パッケージをインストールした時
構文エラーでサーバーが停止した時

この機能のおかげで、開発効率が大幅に向上します！

▶リクエスト情報を表示する

ビュー関数のrequest引数には、様々な情報が含まれています。それを表示してみましょう。

practice/views.pyのcurrent_time関数の下に新しい関数を追加してください：

practice/views.py

def show_request_info(request):
    info = f"""
    <html>
    <body>
        <h1>リクエスト情報</h1>
        <p>メソッド: {request.method}</p>
        <p>パス: {request.path}</p>
        <p>ユーザーエージェント: {request.META.get('HTTP_USER_AGENT', 'なし')}</p>
    </body>
    </html>
    """
    return HttpResponse(info)

practice/urls.pyに URL を追加：

practice/urls.py

urlpatterns = [
    path("hello/", views.hello_world, name="hello_world"),
    path("time/", views.current_time, name="current_time"),
    path("info/", views.show_request_info, name="request_info"),
]

▶リクエスト情報を確認してみよう

ブラウザで http://localhost:8000/practice/info/ にアクセスしてみてください。

あなたのブラウザとリクエストに関する情報が表示されましたね！これらの情報は、Django が自動的にrequestオブジェクトに含めてくれているものです。

method(メソッド): 通常のページアクセスはGETメソッドです
path(パス): アクセスした URL のパス部分
HTTP_USER_AGENT(ユーザーエージェント): あなたが使っているブラウザの種類

実際の開発では、このrequestオブジェクトから様々な情報を取得して、処理に活用することができます。

テンプレートを使って HTML を表示

ここまでは、ビュー関数の中に直接 HTML を書いていました。でも、これだと複雑な HTML を書くのが大変です。そこで、テンプレートを使いましょう！

▶テンプレートフォルダの作成

practiceフォルダの中にtemplates/practiceフォルダを作成します。

practiceフォルダを右クリック → 「新しいフォルダー」→ templates
templatesフォルダを右クリック → 「新しいフォルダー」→ practice

Tip

なぜ templates/practice という二重構造にするの？

実は、これには重要な理由があるんです。

Django は「すべてのアプリの templates フォルダを 1 つの場所として扱う」という特徴があります。

例えば、2 つのアプリでそれぞれgreeting.htmlというファイルを作ったとします：

practice/
  └── templates/
      └── greeting.html  ← 練習用の挨拶ページ

blog/
  └── templates/
      └── greeting.html  ← ブログの挨拶ページ

この状態でrender(request, 'greeting.html')と書くと...

Django「どっちの greeting.html のこと？？」😵

そこで、アプリ名のフォルダをもう一つ作ります：

practice/
  └── templates/
      └── practice/       ← これ！
          └── greeting.html

blog/
  └── templates/
      └── blog/           ← これ！
          └── greeting.html

これでrender(request, 'practice/greeting.html')と書けば、確実にpracticeの方を指定できます！

ちょっと面倒に感じるかもしれませんが、プロジェクトが大きくなったときに「同じ名前のテンプレートがあってエラー！」なんてことを防げるんです。

▶最初のテンプレートを作成

practice/templates/practice/hello_template.htmlを作成：

practice/templates/practice/hello_template.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Hello Django Template</title>
  </head>
  <body>
    <h1>Djangoテンプレートからこんにちは！</h1>
    <p>これはテンプレートから表示されています。</p>
  </body>
</html>

▶テンプレートを使うビューを作成

practice/views.pyのshow_request_info関数の下に新しい関数を追加してください：

practice/views.py

def hello_template(request):
    return render(request, "practice/hello_template.html")

render関数の説明：

第 1 引数：requestオブジェクト
第 2 引数：テンプレートファイルのパス
テンプレートを HTML に変換してレスポンスを返す

practice/urls.pyに追加：

practice/urls.py:

urlpatterns = [
    path("hello/", views.hello_world, name="hello_world"),
    path("time/", views.current_time, name="current_time"),
    path("info/", views.show_request_info, name="request_info"),
    path("template/", views.hello_template, name="hello_template"),
]

ブラウザで http://localhost:8000/practice/template/ にアクセスしてみてください。

Tip

もしエラーが出たら？

もし以下のようなエラーが表示されたら：

TemplateDoesNotExist at /practice/template/
practice/hello_template.html

原因として最も多いのは、settings.pyのINSTALLED_APPSにpracticeアプリを追加し忘れていることです。

mysite/settings.pyを開いて確認してみてください：

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "practice",  # ← これがあるか確認！
]

もし"practice",がなければ追加して、サーバーを再起動してください。

その他の確認ポイント：

テンプレートファイルのパスが正しいか（templates/practice/hello_template.html）
ファイル名のスペルミスがないか
フォルダ構造が正しいか

テンプレートにデータを渡す

テンプレートの真価は、動的にデータを表示できることです。

▶コンテキストを使ったデータの受け渡し

practice/views.pyのhello_template関数の下に新しい関数を追加してください：

practice/views.py

def greeting(request):
    context = {
        "name": "太郎",
        "age": 25,
        "hobbies": ["プログラミング", "読書", "散歩"],
    }
    return render(request, "practice/greeting.html", context)

コンテキスト（context）って何？

コンテキストは、ビューからテンプレートにデータを渡すための「橋渡し役」です。Python の辞書（dictionary）形式で定義します。

基本的な形：

context = {
    "キー名": 値,
    "キー名2": 値2,
    # ... 好きなだけ追加できる
}

渡せるデータの種類：

種類	データ
文字列	`"name": "太郎"`
数値	`"age": 25`
リスト	`"hobbies": ["読書", "ゲーム"]`
辞書	`"user": {"name": "太郎", "email": "taro@example.com"}`
真偽値	`"is_logged_in": True`
オブジェクト	モデルのインスタンスなど（後の回で学びます）

テンプレート側でコンテキストを使う

practice/templates/practice/greeting.htmlを作成：

practice/templates/practice/greeting.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ご挨拶</title>
  </head>
  <body>
    <h1>こんにちは、{{ name }}さん！</h1>
    <p>年齢：{{ age }}歳</p>

    <h2>趣味</h2>
    <ul>
      {% for hobby in hobbies %}
      <li>{{ hobby }}</li>
      {% endfor %}
    </ul>
  </body>
</html>

テンプレート構文の説明：

{{ 変数名 }}：変数の値を表示
{% for ... %}：繰り返し処理
{% endfor %}：繰り返しの終了

ビューとテンプレートの関係を理解しよう

コンテキストを使ったデータの流れを整理すると：

# views.pyでキーを定義
context = {
    "name": "太郎",        # テンプレートでは {{ name }} でアクセス
    "age": 25,            # テンプレートでは {{ age }} でアクセス
    "hobbies": ["読書"]    # テンプレートでは {% for hobby in hobbies %} でループ
}

つまり：

ビュー：context辞書のキーを決める
テンプレート：そのキーを使って値を取り出す
Django：自動的に変換して HTML を生成

例えば、{{ name }}は実際には「太郎」に置き換わります。これが「テンプレートエンジン」の仕事です。

最後はpractice/urls.pyに以下の URL 定義を追加：

practice/urls.py

urlpatterns = [
    path("hello/", views.hello_world, name="hello_world"),
    path("time/", views.current_time, name="current_time"),
    path("info/", views.show_request_info, name="request_info"),
    path("template/", views.hello_template, name="hello_template"),
    path("greeting/", views.greeting, name="greeting"),
]

▶動的なデータ表示を確認してみよう

ブラウザで http://localhost:8000/practice/greeting/ にアクセスしてみてください。

すごいですね！views.pyで定義したデータ（名前、年齢、趣味）が、きれいな HTML として表示されました。

ここで重要なポイントがあります。HTML ファイルには「太郎」という名前は書いていませんでした。でも、ブラウザには「太郎」と表示されていますよね？

実は、こんな流れで動いているんです：

ビュー（views.py） で、データを準備

1context = { 2 "name": "太郎", 3 "age": 25, 4 "hobbies": ["プログラミング", "読書", "散歩"], 5}
テンプレート（greeting.html） に、データの「入れ物」を用意

1<h1>こんにちは、{{ name }}さん！</h1>
Django が自動的に、{{ name }}の部分を「太郎」に置き換えて HTML を生成
ブラウザに、完成した HTML が送られる

つまり、テンプレートは「型」みたいなもので、ビューから渡されたデータを使って、Django が自動的に最終的な HTML を作ってくれるんです。

試しに、views.pyのgreeting関数のnameを「花子」に変更して、ブラウザをリロードしてみてください。HTML ファイルは一切変更していないのに、表示される名前が変わりますよ！

これが「動的な Web ページ」の仕組みです。データベースから取得した情報や、ユーザーが入力した情報など、様々なデータを使って、その都度違うページを表示できるんです。

Tip

テンプレート変数の便利な使い方：

辞書のキー：{{ user.name }}
リストのインデックス：{{ items.0 }}
メソッドの呼び出し：{{ name.upper }}（引数なしのメソッドのみ）

URL パラメータを受け取る

URL から動的に値を受け取ることもできます。

▶パスパラメータの使用

practice/views.pyのgreeting関数の下に新しい関数を追加してください：

practice/views.py

def greet_user(request, username):
    context = {
        "username": username,
    }
    return render(request, "practice/greet_user.html", context)

practice/templates/practice/greet_user.htmlを作成：

practice/templates/practice/greet_user.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>個人挨拶</title>
  </head>
  <body>
    <h1>ようこそ、{{ username }}さん！</h1>
    <p>このページはあなた専用です。</p>
  </body>
</html>

practice/urls.pyに追加：

practice/urls.py

urlpatterns = [
    path("hello/", views.hello_world, name="hello_world"),
    path("time/", views.current_time, name="current_time"),
    path("info/", views.show_request_info, name="request_info"),
    path("template/", views.hello_template, name="hello_template"),
    path("greeting/", views.greeting, name="greeting"),
    path("greet/<str:username>/", views.greet_user, name="greet_user"),
]

ブラウザで http://localhost:8000/practice/greet/Django/ にアクセスしてみてください。URL の最後の部分を変えると、表示される名前も変わります！

<str:username>の説明：

str：文字列型
username：ビュー関数の引数名と一致させる（greet_user関数の第 2 引数username）

▶他のパスパラメータの型について

Django では、URL パスから様々な型のパラメータを受け取ることができます：

型	説明	マッチする例
`str`	文字列（`/`以外のすべての文字）	`hello`、`django-user`
`int`	整数のみ	`123`、`42`
`slug`	英数字・ハイフン・アンダースコア	`my-first-post`、`django_tutorial`
`uuid`	UUID 形式	`550e8400-e29b-41d4-a716-446655440000`
`path`	`/`を含むすべての文字列	`docs/django/intro.html`

Note

クエリパラメータという方法もあります

今回使った「パスパラメータ」以外にも、URL から値を受け取る方法があります。

クエリパラメータ（URL の?以降の部分）：

1http://localhost:8000/search/?q=django&page=2

ビューでの受け取り方：

def search(request):
    query = request.GET.get("q", "")   # "django"
    page = request.GET.get("page", 1)  # 2

パスパラメータ：URL の一部として必須の値（/post/123/）
クエリパラメータ：オプションの値（?sort=date&limit=10）

使い分けの目安：

必須の識別子 → パスパラメータ
フィルタやオプション → クエリパラメータ

実践的な例：簡単なブログ記事リスト

最後に、もう少し実践的な例を作ってみましょう。今度はblogアプリを作成して使います。

Note

サーバーが起動中の場合は、ターミナルで Ctrl + C を押して停止してください。

▶blogアプリの作成

まず、blogアプリを作成します：

ターミナル

$ python manage.py startapp blog

次に、settings.pyにblogアプリを追加します：

mysite/settings.py

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "practice",
    "blog",  # ← 追加
]

Note

blogアプリは、実際のブログ機能を作るための本物のアプリです。

練習用のpracticeアプリとは別に管理することで、コードが整理されます。

▶blogアプリの準備

まず、blogアプリ用のurls.pyファイルを作成します：

blogフォルダを右クリック
「新しいファイル」を選択
ファイル名をurls.pyと入力

blog/urls.pyに以下の内容を記述：

blog/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.post_list, name="post_list"),
]

次に、mysite/urls.pyにblogアプリのURLを追加します。ここで重要なのは、blogアプリをデフォルトアプリとして設定することです：

mysite/urls.py

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

urlpatterns = [
    path("admin/", admin.site.urls),
    path("", include("blog.urls")),　# blogをデフォルトアプリに設定
    path("practice/", include("practice.urls")),
]

Important

デフォルトアプリとは？

デフォルトアプリとは、URLに特定のプレフィックス（前置き）なしでアクセスできるアプリのことです。

例：

path("blog/", include("blog.urls")) → http://localhost:8000/blog/ でアクセス
path("", include("blog.urls")) → http://localhost:8000/ で直接アクセス（デフォルト）

ブログサイトでは、記事一覧が http://localhost:8000/ で表示されるのが自然ですよね。だからblogアプリをデフォルトに設定しています。

一方、practiceアプリは練習用なので、http://localhost:8000/practice/ というプレフィックス付きでアクセスします。

▶仮の記事データを表示

blog/views.pyを編集して、ブログ記事一覧を表示する関数を作成します：

blog/views.py

from django.shortcuts import render

# Create your views here.
def post_list(request):
    # 仮のデータ（後でデータベースから取得するようになります）
    posts = [
        {
            "id": 1,
            "title": "Djangoを始めました",
            "content": "Djangoの学習を始めました。楽しいです！",
            "created_at": "2025-07-01",
        },
        {
            "id": 2,
            "title": "ビューについて学んだこと",
            "content": "今日はビューについて学びました。",
            "created_at": "2025-07-02",
        },
        {
            "id": 3,
            "title": "テンプレートは便利",
            "content": "テンプレートを使うとHTMLが書きやすいです。",
            "created_at": "2025-07-03",
        },
    ]

    context = {
        "posts": posts,
    }
    return render(request, "blog/post_list.html", context)

テンプレートフォルダを作成します：

blogフォルダを右クリック → 「新しいフォルダー」→ templates
templatesフォルダを右クリック → 「新しいフォルダー」→ blog

blog/templates/blog/post_list.htmlを作成：

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ブログ記事一覧</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
      }
      .post {
        border: 1px solid #ddd;
        padding: 15px;
        margin-bottom: 20px;
        border-radius: 5px;
      }
      .post-title {
        color: #333;
        margin: 0 0 10px 0;
      }
      .post-date {
        color: #666;
        font-size: 0.9em;
      }
    </style>
  </head>
  <body>
    <h1>ブログ記事一覧</h1>

    {% for post in posts %}
    <div class="post">
      <h2 class="post-title">{{ post.title }}</h2>
      <p class="post-date">投稿日: {{ post.created_at }}</p>
      <p>{{ post.content }}</p>
    </div>
    {% endfor %}
    
    {% if not posts %}
    <p>まだ記事がありません。</p>
    {% endif %}
  </body>
</html>

サーバーを再度起動し、ブラウザで http://localhost:8000/ にアクセスすると、ブログ記事一覧が表示されます！

Tip

URLがシンプルになりました！

デフォルトアプリに設定したおかげで、/blog/というプレフィックスが不要になりました。これは実際のブログサイトと同じ構成です。

一方、練習用のpracticeアプリの機能は、引き続き http://localhost:8000/practice/hello/ のようにアクセスします。

おめでとうございます！🎉

ここまでの内容をしっかり理解していれば、このコードはもう難しくないはずです。

やっていることは今までと同じ：

views.pyで記事データを定義
HTML ファイルでレイアウトを準備 (style タグは HTML をきれいに表示するための飾り付け)
urls.pyでブラウザの URL 入力と views.py のつなぎを設定

そう、あなたはもう Django の基本的な流れを理解しているんです！

この長い記事を最後まで読んで、実際に手を動かしてコードを書いてきたあなたは、本当に素晴らしいです。プログラミング学習で最も大変なのは、「始めること」と「続けること」です。でも、あなたはすでにその両方をクリアしています。

最初の「Hello Django!」から始まって、現在時刻の表示、テンプレートの使い方、そしてデータの動的表示まで、一歩一歩確実にスキルアップしてきました。その姿勢があれば、これからも必ず成長し続けることができるでしょう。

ぜひ、この調子で Django 学習を続けてくださいね！🚀

よくあるエラーと対処法

▶TemplateDoesNotExist

症状：

TemplateDoesNotExist at /template/
blog/hello_template.html

原因と対処法：

テンプレートファイルのパスが間違っている
templates/blog/フォルダ構造を確認
ファイル名のスペルミスをチェック

▶NoReverseMatch

症状：

NoReverseMatch at /
Reverse for 'xxx' not found.

原因と対処法：

URL のname属性が間違っている
urls.pyで URL パターンが定義されているか確認

▶ViewDoesNotExist

症状：

1ViewDoesNotExist: Could not import 'blog.views.xxx'.

原因と対処法：

ビュー関数の名前が間違っている
views.pyで関数が定義されているか確認
インポートエラーがないか確認

まとめ

今回は、Django のビューについて学びました：

ビューはリクエストを受けてレスポンスを返す
HttpResponseで直接文字列を返せる
render関数でテンプレートを使える
テンプレートにcontextでデータを渡せる
URL パラメータで動的な値を受け取れる
練習用のコードはpracticeアプリに、本番用のコードはblogアプリに分けて管理する

最初のコードを書いて、実際に動くのを見られましたね。この達成感を忘れずに！

プログラミングは「書いて、動かして、理解する」の繰り返しです。エラーが出ても落ち込まないでください。エラーメッセージをよく読んで、一つずつ解決していけば必ず動きます。

完成したコード

もし実行でエラーが出たり、不明な点がある場合は、以下の完成後のコードと比較してみてください：

https://github.com/techarm/django-blog-tutorial/tree/04-first-view

特にviews.py、urls.py、テンプレートファイルの内容を確認することで、問題を解決できるでしょう。

次回予告

次回は、テンプレートをもっと深く学びます。テンプレートの継承、静的ファイル（CSS、JavaScript、画像）の扱い方、より高度なテンプレートタグの使い方を学んでいきましょう。

あなたの Web ページをもっと美しく、機能的にする方法をお教えします！

この記事はいかがでしたか？

もしこの記事が参考になりましたら、
高評価をいただけると大変嬉しいです！

皆様からの応援が励みになります。ありがとうございます！ ✨

Django入門 Python Web開発 Web開発基礎

Django 5入門チュートリアル｜実践ブログ開発で学ぶWeb開発について

このシリーズでは、プログラミング初心者の方でもDjangoを使ったWebアプリケーション開発ができるようになることを目標としています。わからないことがあれば、コメント欄でお気軽にご質問ください！

はじめに：いよいよコードを書く時が来た！
この記事で学べること
ビュー（View）とは？
最初のビューを作成しよう
URL とビューを結びつける
動作確認
もう少し複雑なビューを作ってみよう
テンプレートを使って HTML を表示
テンプレートにデータを渡す
URL パラメータを受け取る
実践的な例：簡単なブログ記事リスト
よくあるエラーと対処法
まとめ
完成したコード
次回予告

目次

【Django View入門】関数ベースビューでHello Worldを表示する方法

はじめに：いよいよコードを書く時が来た！

この記事で学べること

ビュー（View）とは？

▶MVT パターンのおさらい

▶ビューの役割

最初のビューを作成しよう

▶VSCode で views.py を開く

▶Hello Django を表示する関数を作成

URL とビューを結びつける

▶アプリケーション用の urls.py を作成

▶プロジェクトの urls.py に追加

動作確認

▶開発サーバーを起動

▶ブラウザで確認

もう少し複雑なビューを作ってみよう

▶現在時刻を表示する

▶動作確認と hotreload の確認

▶リクエスト情報を表示する

▶リクエスト情報を確認してみよう

テンプレートを使って HTML を表示

▶テンプレートフォルダの作成

▶最初のテンプレートを作成

▶テンプレートを使うビューを作成

テンプレートにデータを渡す

▶コンテキストを使ったデータの受け渡し

コンテキスト（context）って何？

テンプレート側でコンテキストを使う

ビューとテンプレートの関係を理解しよう

▶動的なデータ表示を確認してみよう

URL パラメータを受け取る

▶パスパラメータの使用

▶他のパスパラメータの型について

実践的な例：簡単なブログ記事リスト

▶blogアプリの作成

▶blogアプリの準備

▶仮の記事データを表示

よくあるエラーと対処法

▶TemplateDoesNotExist

▶NoReverseMatch

▶ViewDoesNotExist

まとめ

完成したコード

次回予告

この記事はいかがでしたか？

Django 5入門チュートリアル｜実践ブログ開発で学ぶWeb開発について

目次