ツイートはてブ LINE Pocket

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

Django プラグインを有効にする

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

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

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

Run/Debug configuration for a Django server

をクリックして、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 では、これは移行を使用して行われます。移行は人間が編集可能なファイルであり、データモデルへの変更が保存されます。

以下のいずれか 1 つを実行します:
- メインメニューでツール | manage.py タスクの実行に移動します
- ボタン Ctrl+Alt+R
- ターミナル (Alt+F12) を開き、ターミナルツールウィンドウのツールバーで新規定義済みセッションをクリックし、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 で定義されます。ここで、<アプリのディレクトリ> は 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 が未解決の参照としてハイライトされていることがわかります。

Unresolved reference to a Django templates

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)
ブラウザーでページをリフレッシュします。アイテムを実行するにはを含む TODO セクションが表示されます。
追加をクリックして 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 リストには、必要な情報がすべて含まれるようになりました。

機能の提供

ToDo をいくつか追加したため、もう一度 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 は赤い波線でハイライトされます。その上にマウスを移動し、この名前をインポートするをクリックし、datetime.date を選択して、対応するインポートステートメントをファイルの先頭に追加します。

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

プロジェクトツールウィンドウで 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
アプリケーションを起動しました
テストを作成して実行しました

2024 年 10 月 11 日

PyCharm 2025.3 ヘルプ