最初の Django のサポートプロジェクトを作成して実行する

Django プラグインを有効化

この機能は、Django プラグインに依存しており、PyCharm にはデフォルトでバンドルされて有効になっています。関連機能が利用できない場合は、プラグインが無効になっていないことを確認してください。

Ctrl+Alt+S を押して設定を開き、プラグインを選択します。
インストール済みタブを開き、 Django プラグインを見つけて、プラグイン名の横にあるチェックボックスを選択します。

このチュートリアルでは、基本的な ToDo アプリケーションを作成します。

始める前

次の前提条件が満たされていることを確認してください：

PyCharm バージョン 2022.2 以降を使用しています。 PyCharm をまだお持ちでない場合は、このページからダウンロードしてください。 PyCharm をインストールするには、プラットフォームに応じた手順に従ってください。

このチュートリアルは、次の前提で作成されています。

Python 3.11
Django 4.2.

新しいプロジェクトを作成する

ファイル | 新規プロジェクトに移動するか、ようこそ画面の新規プロジェクトボタンをクリックします。新規プロジェクトダイアログが開きます。
新規プロジェクトダイアログで、次の操作を行います。
- プロジェクトタイプ Django を指定します。
- 必要に応じて、デフォルトのプロジェクトの場所を変更します。
- デフォルトのプロジェクト venv インタープリタータイプをそのままにしておきます。
詳細設定をクリックし、アプリケーション名フィールドに todo を指定します。
作成をクリックしてください。

プロジェクトの構造を探る

新しく作成されたプロジェクトには、Django のサポート固有のファイルやディレクトリが含まれています。

プロジェクトの構造はプロジェクトツールウィンドウ (Alt+1) に表示されます。

myDjangoProject ディレクトリは、プロジェクトのコンテナーです。太字で表記しています。
ネストされたディレクトリ myDjangoProject は、プロジェクトの実際の Python パッケージです。
myDjangoProject/__init__.py : この空のファイルは Python に、このディレクトリを Python パッケージとみなすべきであることを伝えます。
myDjangoProject/settings.py : このファイルには、 Django プロジェクトの構成(英語)が含まれています。
myDjangoProject/urls.py : このファイルには Django プロジェクトの URL 宣言(英語)が含まれています。
myDjangoProject/wsgi.py : このファイルは、プロジェクトにサービスを提供するための WSGI 互換 Web サーバーのエントリポイントを定義します。詳細については、 WSGI を使用してデプロイする方法(英語)を参照してください。
templates ディレクトリは今では空です。 Django のサポートテンプレートが含まれます。
ネストされたディレクトリ todo には、Django アプリケーションの開発に必要なすべてのファイルが含まれています。
- 繰り返しますが、 todo/_init_.py は、このディレクトリを Python パッケージと見なす必要があることを Python に通知します。
- todo/models.py : このファイルでは、アプリケーションのモデルを作成します。
- todo/views.py : このファイルでは、ビューを作成します。
ネストされたディレクトリ migrations には、現在はパッケージファイル _init_.py のみが含まれていますが、将来、モデルに加えた変更（フィールドの追加、モデルの削除など）をデータベーススキーマに伝達するために使用されます。移行の説明はここを参照してください(英語)。
manage.py は、Django プロジェクトと対話できるようにするコマンドラインユーティリティです。詳細については、 Django のドキュメント(英語)を参照してください。

Django サーバーの起動

Django サーバーの実行 / デバッグ構成は自動的に作成されます。必要に応じて、メインツールバーの実行 / デバッグ構成リストで実行構成の編集コマンドを選択して編集できます。

例: 構成の起動時にブラウザーウィンドウを自動的に開くように選択できます。

をクリックして、 myDjangoProject 構成を実行します。ブラウザーウィンドウが自動的に開かない場合は、実行ツールウィンドウのリンクをクリックします。

次のページが開きます。

モデルの作成

Django のサポートモデルは、データのフィールドと挙動を定義します。これらは、 django.db.models.Model クラスのサブクラスである Python クラスで表されます。

ToDo アプリの ToDoItem モデルを作成しましょう。これを行うには、 todo/models.py を開き、次のコードを入力します。

            from django.db import models
            from django.utils import timezone

            class ToDoItem(models.Model):
                text = models.CharField(max_length=100)
                due_date = models.DateField(default=timezone.now)

モデルには、フィールドクラスのインスタンスによって表される 2 つのクラス変数があります。

text： CharField クラスのインスタンスであり、何をすべきかの説明を保存するために使用します。
due_date: DateField クラスのインスタンスなので、To-Do の期限を保存するために使用します。

モデルフィールドの詳細については、 Django のサポートドキュメントを参照してください。

移行の実行

デフォルトでは、PyCharm は Django のサポートプロジェクト用の SQLite データベースを自動的に作成します。 todo アプリケーションと ToDoItem モデル用のテーブルをデータベースに作成する必要があります。 Django では、これは移行を使用して行われます。移行は人間が編集可能なファイルであり、データモデルへの変更が保存されます。

次のいずれかを実行します：
- メインメニューでツール | manage.py タスクの実行に移動します
- ボタン Ctrl+Alt+R
- ターミナル (Alt+F12) を開き、ターミナルツールウィンドウのツールバーで New Predefined Session をクリックし、 manage.py を選択します。
manage.py ユーティリティはターミナルタブで起動します。
makemigrations に続けて Enter と入力します。
コンソール出力に Process finished with exit code 0 が表示されるはずです。 todo/migrations ディレクトリには、移行ファイル 0001_initial.py が含まれています。
migrate と入力し、 Enter を押して変更を適用し、データベースに 2 つの新しいモデル用のテーブルを作成します:

ビューの作成

Django のサポートビューは、Web リクエストがどのように処理され、どの Web レスポンスが返されるかを指定する関数またはクラスです。慣例として、ビューは <app_dir>/views.py に定義され、 <app_dir> は Django のサポートアプリケーションディレクトリです。

todo/views.py を開き、次のコードを入力します。

            from django.views.generic import ListView
            from .models import ToDoItem

            class AllToDos(ListView):
                model = ToDoItem
                template_name = "todo/index.html"

ここでは、Django ListView 基本ビュークラスを継承する AllToDos クラスを定義しました。このビューを使用して、利用可能なすべての To-Do を表示します。

テンプレートの作成

Django テンプレートは基本的に、 Django テンプレート言語(英語)の要素を含む HTML ファイルです。テンプレートは、ビューによって提供されるコンテキストに従って HTML ページを生成するために使用されます。

views.py の todo/index.html が未解決の参照としてハイライトされていることがわかります。

PyCharm はクイックフィックスを提案します: index.html の上にマウスを置くか Alt+Enter を押すと、対応するテンプレートファイルを templates フォルダーに作成することが選択できます:

PyCharm は、このテンプレートが置かれるディレクトリ todo も作成します。この操作を確認します。

PyCharm は todo/index.html を作成して開きます。基本的な HTML コードを入力するには、「html:5 」と入力し、続いて「Tab 」と入力します。

Django テンプレート言語要素を含むコンテンツをテンプレートに追加してみましょう。次のコードを body タグの間に貼り付けます。

                
                <h1>Things to do:</h1>
                <table>
                    {% for item in object_list %}
                    <tr>
                        <td>{{ item.text }}</td>
                        <td>{{ item.due_date }}</td>
                    </tr>
                    {% endfor %}
                </table>
                
            
  

h1 の見出しと表があります。 for サイクルを使用して、 AllToDos ビューから渡される object_list の項目を反復処理しています。 Django は項目ごとに、 text および due_date の値を含む行をテーブルにレンダリングします。

URL の設定

次に、ブラウザーで AllToDos ビューにアクセスする方法を設定する必要があります。

todo ディレクトリにファイル urls.py を作成し、次のコードを入力します。
from django.urls import path from . import views urlpatterns = [ path("", views.AllToDos.as_view(), name="index") ]
次に、ファイル myDjangoProject/urls.py (PyCharm によってすでに作成されています) を開き、 todo/urls.py からのパスが含まれるように構成します。最終的には次のコードが完成するはずです。
from django.contrib import admin from django.urls import path, include urlpatterns = [ path("todo/", include("todo.urls")), path("admin/", admin.site.urls), ]
django.urls.include をインポートすることを忘れないでください !
ブラウザーで http://127.0.0.1:8000/todo/ ページを開きます。次のテキストが表示されます。

見出しはありますが、To Do はまだありません。 Django 管理インターフェースを使用してタスクを追加してみましょう。

Django 管理者の使用

管理サイトでは、コンテンツの追加、編集、その他の管理が可能です。デフォルトでは、PyCharm は新しい Django プロジェクトで Django 管理インターフェースを自動的に有効にします。

管理サイトのセットアップ

まず、スーパーユーザーを作成する必要があります。これを行うには、 manage.py コンソール (Ctrl+Alt+R) で createsuperuser と入力し、メールアドレスとパスワードを指定します。
今度は、Django のサポートサーバーの /admin/ に移動します。例えば、 http://127.0.0.1:8000/admin/。次のログインページが表示されます。

ログインすると管理ページが表示されます。認証と認可 (グループとユーザー) セクションはありますが、ToDo を追加する方法はありません。これを行うには、管理インターフェースで ToDoItem モデルを登録する必要があります。

コンテンツの追加

ファイル todo/admin.py を開き、次のコードを入力します。
from django.contrib import admin from .models import ToDoItem admin.site.register(ToDoItem)
ブラウザーでページをリフレッシュします。アイテムを実行するにを含むやることリストセクションが表示されます。
追加をクリックして To-Do を作成します。
準備ができたら、 SAVE をクリックします。

新しく作成された To-Do はリストに ToDoItem object (1) として表示されます。このような名前を付けると、各タスクを開いて説明を読む必要があるため、コンテンツ管理が複雑になります。

__str__() メソッドを ToDoItem モデルに追加して、この問題を修正しましょう。 todo/models.py を開き、以下を追加します。

                def __str__(self):
                    return f"{self.text}: due {self.due_date}"

次のようになるはずです:

                from django.db import models
                from django.utils import timezone

                class ToDoItem(models.Model):
                    text = models.CharField(max_length=100)
                    due_date = models.DateField(default=timezone.now)

                    def __str__(self):
                        return f"{self.text}: due {self.due_date}"

To Do リストには、必要な情報がすべて含まれるようになりました。

機能の提供

To-Do をいくつか追加したので、もう一度 http://127.0.0.1:8000/todo/ にアクセスします。タスクのリストがそこにあるはずです。

今日完了する必要があるタスクのみを表示するフィルタリングはどうでしょうか ? この機能をアプリケーションに追加してみましょう。

views.py に移動し、次のコードを使用して TodayToDos クラスを追加します。

            class TodayToDos(ListView):
                model = ToDoItem
                template_name = "todo/today.html"

                def get_queryset(self):
                    return ToDoItem.objects.filter(due_date=date.today())
        
  

このクラスは AllToDos に非常に似ていますが、別のテンプレート (後で作成します) を使用し、 get_queryset メソッドを実装して、現在 due_date である ToDoItem オブジェクトのみを返します。

date は赤い波線でハイライトされます。その上にマウスを移動し、 Import this name をクリックし、 datetime.date を選択して、対応するインポートステートメントをファイルの先頭に追加します。

today.html テンプレートを作成する必要があります。 index.html からコピー & ペーストしてプロジェクト内にコードが重複することを避けるために、 Django テンプレートの継承(英語)を使用します。

Project ツールウィンドウで templates を右クリックし、コンテキストメニューから新規 | HTML ファイルを選択して、 myDjangoProject/templates に base.html を作成します。
コードを index.html から base.html にコピーし、 <body> タグ間のすべてを次のコードに置き換えます。
{% block content %}{% endblock %}
myDjangoProject/templates/base.html は次のようになります。
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> {% block content %}{% endblock %} </body> </html>
index.html に移動し、 <h1> タグと <table> タグの内容を除くすべてを削除し、次のように Django テンプレート言語要素で囲みます。
{% extends "base.html" %} {% block content %} <h1>Things to do:</h1> <table> {% for item in object_list %} <tr> <td>{{ item.text }}</td> <td>{{ item.due_date }}</td> </tr> {% endfor %} </table> {% endblock %}
myDjangoProject/templates/todo/today.html を作成し、次のコードを入力します。
{% extends "base.html" %} {% block content %} <h1>Things to do today:</h1> <table> {% for item in object_list %} <tr> <td>{{ item.text }}</td> </tr> {% endfor %} </table> {% endblock %}
このページには期限が今日である To Do のみが表示されるため、ここでは期限は必要ないことに注意してください。

すべての一般的な HTML タグを含む基本テンプレート base.html を作成しました。 index.html と today.html は子テンプレートであり、共通の要素を継承しますが、特定の内容を持ちます。

また、ブラウザーで今日のタスクにアクセスする方法を設定する必要もあります。 myDjangoProject/todo/urls.py に移動し、 path("today/", views.TodayToDos.as_view(), name="today") を urlpatterns に追加すると、次のようになります。

            from django.urls import path
            from . import views

            urlpatterns = [
                path("", views.AllToDos.as_view(), name="index"),
                path("today/", views.TodayToDos.as_view(), name="today")
            ]
        
  

すべてが期待どおりに機能することを確認しましょう。 http://127.0.0.1:8000/admin/ に移動し、期限日を今日に設定して To-Do をいくつか追加します。次に、 http://127.0.0.1:8000/todo/today/ に移動し、新しく追加された To-Do が表示されていることを確認します:

エクスペリエンスの向上

この段階では、To-Do アプリケーションは本来の目的を果たしています。

すべての To-Do のリストを表示します
今日やるべきことを示す
Django 管理インターフェースを使用して新しいタスクを追加できるようにします

しかし、見た目もあまり良くないし、使い心地もあまり良くありません。それを直しましょう !

HTML ページの外観を改善する最も簡単な方法は、CSS を実装することです。例: シンプルな CSS(英語) を使用できます。 base.html を開き、 <head> タグ間の任意の場所に次の行を挿入します。

ブラウザーで http://127.0.0.1:8000/todo/ にアクセスして、アプリケーションの新しい外観を確認します:

基本テンプレートを使用しているため、 http://127.0.0.1:8000/todo/today/ の外観も変わります:

次に、ブラウザーのアドレスバーにアドレスを入力する必要がないように、いくつかのナビゲーション要素を追加しましょう。 base.html で、開始 <body> タグの後に次のコードを貼り付けます。

            
            <div>
                <a class="button" href='{% url "index" %}'>All tasks</a>
                <a class="button" href='{% url "today" %}'>Today</a>
            </div>

結果は次のとおりです。

アプリケーションのテスト

アプリケーションのすべてのタスクページにあるいくつかの ToDo の期限が 5 月 12 日であることに気づいたかもしれません。これらのタスクは実際には期限を過ぎているため、表示する必要はありません。このような見落としは、アプリケーション開発時にテストを導入することで回避できます。

myDjangoProject/todo ディレクトリには、 tests.py ファイルがあります。これは、Django テストを対象としています。 To-Do が期限に応じてアプリケーションのホームページに正しく表示されるかどうかを確認するテストを作成してみましょう。

            from datetime import date, timedelta

            from django.test import TestCase
            from django.urls import reverse
            from .models import ToDoItem


            def create_todo(todo_text, days):
                return ToDoItem.objects.create(text=todo_text, due_date=date.today() + timedelta(days=days))


            class AllToDosViewTest(TestCase):

                def test_today(self):
                    todo = create_todo("To be done today", 0)
                    response = self.client.get(reverse("index"))
                    self.assertQuerySetEqual(
                        response.context["todoitem_list"],
                        [todo]
                    )

                def test_last_week(self):
                    todo = create_todo("This task is past due", -7)
                    response = self.client.get(reverse("index"))
                    self.assertQuerySetEqual(
                        response.context["todoitem_list"],
                        []
                    )

                def test_next_week(self):
                    todo = create_todo("Still have some time", 7)
                    response = self.client.get(reverse("index"))
                    self.assertQuerySetEqual(
                        response.context["todoitem_list"],
                        [todo]
                    )

        
  

ここで、 create_todo は To Do を作成するためのショートカット関数であり、 AllToDosViewTest は 3 つのメソッド (test_today、 test_last_week、 test_next_week) を持つテストクラスです。各メソッドは、対応する期日を持つタスクを作成し、そのタスクがアプリケーションのホームページに表示されるかどうかを確認します。期限が現在の日付より 7 日前であるタスクは表示されません。

このテストを実行するには、エディターでファイル tests.py の背景を右クリックし、オプション実行を選択するか、単に Ctrl+Shift+F10 を押します。

テスト結果は、実行ツールウィンドウのテストランナータブに表示されます。

作成した To Do が期限を過ぎているにもかかわらず、ホームページに表示される項目のリストに追加されるため、 test_last_week が失敗したことがわかります。

get_queryset メソッドを AllToDos クラスに追加して、これを修正しましょう。

            def get_queryset(self):
                return ToDoItem.objects.filter(due_date__gte=date.today())

このメソッドはオブジェクトをフィルター処理して、期限が今日の日付以降のタスクのみをビューで返すようにします (これは __gte の略です)。

実行ツールウィンドウのツールバーにあるをクリックしてテストを再実行します。これで、すべてのテストが正常に成功しました。

要約

このチュートリアルは終了しました。単純な Django のサポートアプリケーションの作成、起動、テストが正常に完了しました。 PyCharm を使って行ったことをまとめましょう:

アプリケーション付きで Django のサポートプロジェクトを作成しました
Django のサポートサーバーを立ち上げました
作成されたモデル、ビュー、テンプレート
設定された URL
アプリケーションを起動しました
テストを作成して実行しました

2026 年 6 月 1 日

最初の Django のサポート プロジェクトを作成して実行する