PythonとDjangoで始めるWebアプリ開発入門

DjangoはPythonで開発できる強力なWebフレームワークです。Djangoを使用することで、迅速にWebアプリケーションを構築し、実装することができます。本記事では、Djangoを活用してシンプルなWebアプリを作成する手順を詳しく解説します。

しおり

Djangoのインストール
プロジェクトの作成
アプリケーションの作成
データモデル（Model）の定義
ビュー（View）の実装
テンプレート（Template）の作成
ルーティング（URLの定義）
開発サーバーの起動と動作確認
まとめ

Djangoのインストール

まず最初に、Djangoをインストールしましょう。以下のコマンドを実行します。

pip install django

このコマンドを実行後、Djangoが正しくインストールされているか確認するには、次のコマンドを実行してください。

django-admin --version

インストールが成功していれば、Djangoのバージョンが表示されます。

プロジェクトの作成

Djangoをインストールした後、新しいプロジェクトを作成します。

django-admin startproject myproject

このコマンドを実行すると、以下のようなディレクトリ構造が作成されます。

myproject/
    manage.py
    myproject/
        __init__.py
        asgi.py
        settings.py
        urls.py
        wsgi.py

次に、プロジェクトディレクトリに移動します。

cd myproject

アプリケーションの作成

このプロジェクトの中にアプリケーションを作成します。アプリケーションはWebサイトの特定の機能を担当する小さなモジュールと考えることができます。

python manage.py startapp myapp

次のようなディレクトリ構造が追加されます。（manage.pyと同じディレクトリ）

myapp/
    __init__.py
    admin.py
    apps.py
    models.py
    tests.py
    views.py

作成したアプリケーションをプロジェクトに登録するために、settings.py の INSTALLED_APPS に myapp を追加します。

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',  # 追加
]

データモデル（Model）の定義

Djangoでは、データモデルをmodels.pyに記述します。例えば、シンプルな投稿データを保存するモデルを作成しましょう。

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_at = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.title

このモデルをデータベースに反映するために、次のコマンドを実行します。

python manage.py makemigrations myapp
python manage.py migrate

ビュー（View）の実装

ビューは、ユーザーのリクエストを処理し、適切なレスポンスを返す機能を持っています。 views.pyに以下のコードを追加して、投稿の一覧を表示するビューを作成します。

from django.shortcuts import render
from .models import Post

def post_list(request):
    posts = Post.objects.all()
    return render(request, 'myapp/post_list.html', {'posts': posts})

テンプレート（Template）の作成

ビューによって取得したデータを表示するために、HTMLファイルを作成します。Djangoではテンプレートを templates フォルダ内に配置します。次のようにフォルダを作成し、post_list.html を作成します。

myapp/
    templates/
        myapp/
            post_list.html

次に、post_list.html に以下のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>投稿一覧</title>
</head>
<body>
    <h1>投稿リスト</h1>
    <ul>
        {% for post in posts %}
            <li>{{ post.title }} - {{ post.created_at }}</li>
        {% empty %}
            <li>投稿がありません</li>
        {% endfor %}
    </ul>
</body>
</html>

ルーティング（URLの定義）

urls.py にビューを紐づけるためのルーティングを設定します。myapp/urls.py を新しく作成し、以下のように記述します。

from django.urls import path
from . import views

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

次に、プロジェクトの urls.py でこのアプリのルーティングを登録します。

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

開発サーバーの起動と動作確認

ここまでの設定が完了したら、開発サーバーを起動して、実際に動作を確認してみましょう。

python manage.py runserver

ブラウザで http://127.0.0.1:8000/ にアクセスすると、投稿一覧のページが表示されるはずです。

テンプレートを追加

post.htmlを通して投稿をデータベースに入力、修正、削除ができるようにしてみます。

myproject/myapp/templates/myapp/に新しいpost.htmlを作成します。

コードは以下のとおり。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>投稿フォーム</title>
</head>
<body>
    <h1>{% if post %}投稿編集{% else %}新規投稿{% endif %}</h1>
    <form method="POST">
        {% csrf_token %}
        <div>
            <label for="title">タイトル：</label>
            <input type="text" id="title" name="title" value="{{ post.title|default:'' }}" required>
        </div>
        <div>
            <label for="content">内容：</label>
            <textarea id="content" name="content" required>{{ post.content|default:'' }}</textarea>
        </div>
        <button type="submit">保存</button>
    </form>

    {% if post %}
    <form method="POST" action="{% url 'delete_post' post.id %}">
        {% csrf_token %}
        <button type="submit" onclick="return confirm('本当に削除しますか？')">削除</button>
    </form>
    {% endif %}

    <a href="{% url 'post_list' %}">投稿一覧に戻る</a>
</body>
</html>

urls.pyに新しいURLパターンを追加

myproject/myapp/urls.pyに新しいURLパターンを追加します。

from django.urls import path
from . import views

urlpatterns = [
    path('', views.post_list, name='post_list'),
    path('post/new/', views.post_new, name='post_new'),　//追加
    path('post/<int:pk>/edit/', views.post_edit, name='post_edit'),　//追加
    path('post/<int:pk>/delete/', views.delete_post, name='delete_post'),　//追加
]

views.pyに新しいビュー関数を追加

myproject/myapp/views.pyに新しいビュー関数を追加します。

from django.shortcuts import render, get_object_or_404, redirect   //修正
from .models import Post

def post_list(request):
    posts = Post.objects.all()
    return render(request, 'myapp/post_list.html', {'posts': posts})

// 以下、追加したもの

def post_new(request):　　　　　　
    if request.method == "POST":
        title = request.POST['title']
        content = request.POST['content']
        Post.objects.create(title=title, content=content)
        return redirect('post_list')
    return render(request, 'myapp/post.html')

def post_edit(request, pk):
    post = get_object_or_404(Post, pk=pk)
    if request.method == "POST":
        post.title = request.POST['title']
        post.content = request.POST['content']
        post.save()
        return redirect('post_list')
    return render(request, 'myapp/post.html', {'post': post})

def delete_post(request, pk):
    if request.method == "POST":
        post = get_object_or_404(Post, pk=pk)
        post.delete()
    return redirect('post_list')

post_list.htmlを修正

myproject/myapp/templates/myapp/post_list.htmlを編集機能へのリンクを追加するように更新します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>投稿一覧</title>
    <style>
        .post-content {
            margin: 10px 0;
            padding: 10px;
            background-color: #f5f5f5;
        }
        .post-item {
            margin-bottom: 20px;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }
    </style>
</head>
<body>
    <h1>投稿リスト</h1>
    <a href="{% url 'post_new' %}">新規投稿</a>
    <div class="post-list">
        {% for post in posts %}
            <div class="post-item">
                <h2>{{ post.title }}</h2>
                <p class="post-date">投稿日時: {{ post.created_at|date:"Y/m/d H:i" }}</p>
                <div class="post-content">
                    {{ post.content|linebreaks }}
                </div>
                <a href="{% url 'post_edit' post.pk %}">編集</a>
            </div>
        {% empty %}
            <p>投稿がありません</p>
        {% endfor %}
    </div>
</body>
</html>

主な変更点

これらの変更により、以下の機能が追加されます。

・新規投稿の作成：フォームの入力値は必須（required）としている
・既存投稿の編集：編集時は既存の値をフォームに表示する
・投稿の削除：削除時は確認ダイアログを表示する
・投稿一覧からの編集ページへのリンク
・linebreaksフィルターを使用して改行を適切に表示
・リスト形式からディビジョン形式に変更して、より見やすいレイアウトに

これらのファイルを作成・更新後、データベースへの投稿の作成、編集、削除が可能になります。

階層構造

以下のとおり。

├─ myproject
│  ├─ myapp
│  │  ├─ migrations
│  │  │  ├─ __init__.py
│  │  │  ├─ 0001_initial.py
│  │  ├─ templates
│  │  │  ├─ myapp
│  │  │  │  ├─ post_list.html
│  │  │  │  ├─ post.html
│  │  ├─ __init__.py
│  │  ├─ admin.py
│  │  ├─ apps.py
│  │  ├─ models.py
│  │  ├─ tests.py
│  │  ├─ urls.py
│  │  ├─ views.py
│  ├─ myproject
│  │  ├─ __init__.py
│  │  ├─ asgi.py
│  │  ├─ settings.py
│  │  ├─ urls.py
│  │  ├─ wsgi.py
│  ├─ db.sqlite3
│  ├─ manage.py

まとめ

本記事では、DjangoでシンプルなWebアプリを作成する手順を解説しました。

Djangoのインストール
プロジェクトとアプリケーションの作成
モデルの定義とデータベースのマイグレーション
ビューとテンプレートの作成
ルーティングの設定
開発サーバーの起動と動作確認

Djangoは簡単かつ強力なフレームワークであり、この基本を押さえておけば、さらに高度な機能を持つWebアプリケーションも構築できます。ぜひ試してみてください！

以下のリンクでは、Pythonに関する記事をまとめています。各記事をクリックして、詳しい情報をご確認ください。