この記事では「Djangoを使ってWebアプリ(Todoアプリ)を開発する方法」を分かりやすく紹介していきます。Djangpの日本語情報は少ないので、この記事が間違いなく役立つはずです!この記事を読めば、たとえPython初心者でも、Djangoを使って以下のようなWebアプリを開発できるようになりますよ。元スクール講師であり、YouTubeで3.2万人以上、Udemyで2,000人以上にプログラミングを教えている僕が丁寧に解説していきます。GitHub.本格的にDjangoを学びたい人へUdemyで「Django基礎マスターコース」を公開しました。このコースを受講すれば、Djangoの基礎をマスターして、自分の好きなWebアプリを開発できるようになりますよ!Djangoは国内・海外問わず採用する企業が多く、市場価値の高いスキルなので、今のうちに習得しておきましょう。Django基礎マスターコース〜PythonでWebアプリを開発できるようになろう〜独学に役立つLINE配信Python独学のコツや役に立つ情報を配信するLINEアカウントを作りました!いまなら学習に役立つ限定音声コンテンツ73本や、YouTubeで使えるソースコードをプレゼントしています。Djangoアプリ作成の準備をするさて、さっそくDjangoを使ってアプリを開発していきましょう。作ってみることが重要です。STEP1では、Djangoでアプリ開発するための準備をします。紹介するトピックは次のとおりです。必要なライブラリのインストール一緒に手を動かしていきましょう。今回のアプリ開発で使うプロジェクトフォルダを作成しましょう。好きな場所にフォルダを作成すれば大丈夫です。僕は/Users/hayato/dev/の下にプロジェクトフォルダを作成します。ターミナルを使える環境なら以下のコマンド、そうでないなら右クリックでフォルダを作成しましょう。djangotodo作成が完了したら、djangotodoに移動します。/Users/hayato/dev/djangotodoこのフォルダをVSCodeで開きましょう。今後はVSCodeのターミナルを使っていきます。必要なライブラリのインストールこのチュートリアルでは、Python3.9を使っていきます。3.9.7今だったらPython3.8以降にするのがおすすめです。2021年12月以降にリリースされるDjango4系では、Python3.8以降のサポートになります。https://docs.djangoproject.com/en/dev/releases/4.0/Python3.8以降の準備ができていれば、ライブラリのインストールを進めましょう。pipコマンドをアップグレードし、そのあとでDjangoをインストールします。listで確認してみましょう。0.37.0僕の環境に入っているライブラリは上記のとおりです。Djangoはバージョン3.2になっています。自分でエラー修正する自信がなければ、バーションを合わせてインストールするのがおすすめです。django==3.2.8これでPythonとDjangoの準備が完了しました。Djangoアプリ作成の初期設定をおこなうSTEP2ではDjangoアプリ開発の初期設定をおこないます。Djangoではあらかじめアプリ開発に必要なパーツを準備されています。自分が作りたいアプリに合わせて、設定を少しだけ変更すれば土台の部分が完成します。具体的には、以下の設定をおこないます。Djangoプロジェクトを開始するサーバーを立ち上げてロケットを飛ばすアプリを作成する初期設定をおこなうそれでは順番に見ていきましょう。Djangoプロジェクトを開始するDjangoでアプリ開発するとき「プロジェクト」を開始する必要があります。プロジェクト名はなんでも大丈夫です。ここではconfigという名前にしておきたいと思います。configという名前でプロジェクトを開始するには、以下のコマンドをターミナルに入力しましょう。.このコマンドを実行しても、ターミナル上では何の変化もありません。みると、新しいファイルとフォルダが作成されているはずです。manage.pyconfigはプロジェクトフォルダです。ここに各種設定を記入していきます。manage.pyはDjangoで色々な操作をおこなうためのファイルです。具体的にどんな操作ができるのか、さっそく見ていきましょう。サーバーを立ち上げてロケットを飛ばす先ほど作成したmanage.pyを使って、Djangoでロケットを飛ばしてみます。ロケットを飛ばす...というのは、サーバーを立ち上げることを意味しています。以下のコマンドを入力してみてください。runserver赤文字の警告は後で解消できます。今は気にしなくて大丈夫です。それよりもhttp://localhost:8000にアクセスしてみてください。サーバーが立ち上がり、ロケットが発射されているはずです。これでサーバーの立ち上げまで完了しました。最終的にはプログラムを書いていくことで、ロケットの代わりにTodoアプリが表示されます。アプリを作成するさて。ここまでプロジェクトの作成と、サーバーの立ち上げまで完了しました。次にやるべきことは「アプリ」の作成です。cで停止してから、以下のコマンドをターミナルに入力しましょう。todoターミナル上の変化は何もありません。その代わりに新しくtodoというフォルダが作成できています。todoこれでアプリを作成できました。ここでいうアプリというのは、”機能”みたいなイメージです。以下にDjango公式で書かれている説明を載せておきます。アプリケーションです。プロジェクトは、特定のウェブサイトの構成とアプリのコレクションです。プロジェクトには複数のアプリを含めることができます。アプリは複数のプロジェクトに存在できます。Todoアプリだとイメージじづらいので、YouTubeで考えてみましょう。YouTubeでは、1つのアプリケーションに色々な機能が備わっています。映画やドラマをレンタル・購入できる機能これらをまとめて”YouTube”が作られていますよね?もしDjangoでYouTubeを作るとなれば、まずYouTubeプロジェクトを準備して、その中に各機能を構成するアプリを開発していくことになります。今回はTodoアプリ1つだけ開発するので、複数のアプリは登場しません。初期設定をおこなう最後に以下の初期設定をおこないます。使用する言語とタイムゾーンの変更Djangoでは作成するアプリ(=機能)をプロジェクトに登録する必要があります。僕たちは日本人なので言語を日本語にしましょう。タイムゾーンも東京に変更します。Djangoの設定はdjangotodo/settings.pyに書かれています。下にスクロールして、INSTALLED_APPS/LANGUAGE_CODE/TIME_ZONEの3つを探してください。見つかったら以下のように設定を書き換えます。'Asia/Tokyo'これで初期設定は完了です。runserverでサーバーを立ち上げてみましょう。日本語に切り替わっているはずです。Worldを表示してみるそろそろロケットを飛ばすのに飽きてきたと思います。World”を表示させてみましょう。そのために、まずconfig/urls.pyを以下のように編集します。追加]これはプロジェクトとアプリの繋ぎ込みです。URLがlocalhost:8000/adminだったら、管理者サイトに遷移します。その他の場合であれば、todoアプリのURL設定を参照するようになります。URL設定のファイルはデフォルトで存在しません。ゆえに自分でtodo/urls.pyを作成する必要があります。以下のコマンドを入力するか、VSCode内でtodoフォルダ内に新しくurls.pyを作成しましょう。todo/urls.pyあとは、この中にURLの設定を書いていくことになります。Djangoのように大規模なフレームワークを使うと、自分が何をやっているのか、何をするべきなのか迷うことがあります。基本的に以下の流れだけおさえておけば大丈夫です。World”の表示も、上記の手順でやってみます。todoフォルダに入っているviews.pyで、以下のコードを書いてみましょう。World”を返すHTTPレスポンスを作成しました。あとはURLにアクセスしたとき、index()を呼び出せるようにすれば良いですね。そこでurls.pyに以下のコードを追記します。views.index),]urlpatternsはconfigフォルダ内でも使いました。URLの設定をするためのリストです。path()の第一引数で""を指定しているので、トップページにアクセスしたらviews.indexが呼び出される設定になっています。World”が表示されるわけです。本当に表示されるのか、確認してみましょう。モデルの作成とマイグレーションをおこなうTodoアプリを作るためには、タスクを保存しておくデータベースが必要になります。Djangoでは”Model”を定義することで、SQLを書かずともデータベースで使うテーブルを作成できます。STEP4では、その具体的な手順を見ていきましょう。models.pyでモデルを定義するマイグレーションファイルを作成するデータベースにテーブルを作成する順番に紹介していきます。models.pyでモデルを定義するtodoフォルダ内のmodels.pyにModelを定義していきます。タスクの登録には、まずタイトルを付けます。タイトルだけでなくタスクの詳細も記入するようにしましょう。内容によっては詳細がいらない場合もあるので、ブランクを許可することにします。タスクには締め切りを設けたいですね。これらをmodels.pyに反映すると、以下のコードになります。self.titleモデルフィールドの詳しい解説は省きます。Djangoの公式ドキュメントを確認してみてください。Djangoマイグレーションファイルを作成するmodels.pyで定義したモデルを、データベースのテーブルに反映していきます。以下のコマンドを入力して、マイグレーションファイルを作成しましょう。makemigrationsコマンドの実行結果を見てみるとtodo/migrations/0001_initial.pyと書かれています。この0001_initial.pyがマイグレーションファイルです。データベースにテーブルを作成するマイグレーションファイルを作成したら、その内容をデータベースのテーブルに反映します。以下のコマンドを実行してみてください。migrate各項目で”OK”が表示されていれば、データベースにテーブルを追加できています。SQLを書かずにテーブルを作成できるなんて便利ですよね...!これだけ簡単だど、本当にテーブルを作成できてるか気になります。次のステップでは、テーブルを作成できたか確認し、そのあとでタスクを登録してみたいと思います。管理画面の設定とTodoタスクの登録SQLを使えば、テーブルとその中身を確認できます。ここでは、Djangoで用意されている管理画面を使って、テーブルの確認とタスクの登録をやっていきます。このステップで紹介するトピックは以下です。SuperUserを作成して管理画面にログインするTodoテーブルを管理画面で確認できるようにするTodoデーブルにタスクを登録するそれでは順番に見ていきましょう。SuperUserを作成して管理画面にログインする“管理画面”というくらいなので、そもそもアプリを管理人が必要ですよね。Djangoでは以下のコマンドを実行するだけで、管理者権限を持ったユーザー(=SuperUser)を作成できます。createsuperuser途中でユーザー名、メールアドレス、パスワードを聞かれます。自分の好きなユーザー名とパスワードを入力してください。メールアドレスは必要ありません。エンターキーを押せばスキップできます。SuperUserを作成できたら、管理者画面にログインしましょう。以下でサーバーを立ち上げます。Worldが表示されているはずです。今回は管理者画面を使うので、http://localhost:8000/adminにアクセスします。ここで、いま作成したアカウント名とパスワードを入力してください。ログイン後に表示されたこのページでは、データベースに作成したテーブルを確認できます。Todoテーブルが表示されていませんね...。Todoテーブルを管理画面で確認できるようにする作成したテーブルを管理画面で確認するには、todoフォルダのadmin.pyに使用するモデルを登録する必要があります。以下のコードを追加しましょう。here.admin.site.register(Todo)コードを保存したら、管理画面をリフレッシュします。無事にTodoテーブルが表示されていますね!Todoデーブルにタスクを登録する適当にタスクを追加してみてください。あとでタスクを追加する機能は作成しますが、先にトップページの表示を実装します。Readそれでは作成したタスクをトップページで表示してみましょう。ここからはHTMLの編集もおこないます。ゆえに「Djangoにおける機能開発の流れ」は以下になります。すべて上記の流れで開発していきます。views.pyを編集してListViewを追加するまずはviews.pyの編集からです。view(ビュー)の編集には、以下の2パターンあります。Views」を使っていきます。作成したタスクを表示するためには、views.pyに以下のコードを追加してください。"tasks"このListViewを使うことで、タスクの表示が可能になります。使用するモデルは、STEP4で作成したTodoです。context_object_nameは、あとでHTMLに表示するとき使う変数名になります。World”を表示するために、index()を使っていました。これをいま作成したTodoListに変更しましょう。name="list"),]これでurls.pyの設定は完了です。todo_list.htmlの作成と編集サーバーを立ち上げてhttp://localhost:8000にアクセスしてみてください。するとtodo_list.htmlが読み込めないというエラーが表示されるはずです。いうわけで、これから作っていきましょう。HTMLを保存しておくフォルダは、todo/templates/todoです。templatesの下にtodoを作成する必要があります。その中にtodo_list.htmlを作っていきます。ターミナルを使えるなら、以下を実行しましょう。todo/templates/todo/todo_list.htmlこれで必要なフォルダとファイルが作成できました。それでは試しに以下のHTMLを書いてみてください。List</h1>保存したあとにサーバーを立ち上げます。List”と表示されていますね!あとは作成したタスクを表示するだけです。todo_list.htmlの中に、以下の内容を書いていきます。</tbody></table>テーブルタグを使ってタスクを表示しています。サーバーを立ち上げて確認してみてください。自分で作成したタスクが一覧で表示されているはずです。Readトップページではタイトルだけ表示しました。タスクの説明は、詳細ページで確認できるようにしましょう。STEP7でも、やはり以下の流れで機能を開発していきます。アプリ内のviews.pyでロジックを作成し、アプリ内のurls.pyでURLを設定するそのあとHTMLファイルを書くまずはviews.pyからです。views.pyを編集してDetailViewを追加する詳細ページを作成するにはDetailViewを使います。"task"上記のようにListViewの下に追加しましょう。urls.pyを編集してルーティング設定する次にURLの設定ですが、ここでは少し注意が必要になります。タスクの一覧を表示するときは、""に設定すれば大丈夫でした。今回設定する詳細ページは、「どのタスクの詳細を表示するのか」指定する必要があります。表示したいタスクに応じて、URLを変更する必要があるわけです。key)を指定します。name="detail"),]detail/<int:pk>と設定することで、各タスクごとに詳細ページを表示できます。todo_detail.htmlの作成と編集あとはHTMLを編集しましょう。先にトップから詳細ページへ遷移できるようにしておきます。</tbody></table>次にtodo_detail.htmlという名前で、詳細ページを表示するHTMLファイルを作成してください。ファイルの中には、以下のコードを書いていきます。<p>{{task.description}}</p></div>これでタスクのタイトル、詳細な説明、締切日を確認できるようになります。Create次はタスクを作成できる機能を開発しましょう。アプリ内のviews.pyでロジックを作成し、アプリ内のurls.pyでURLを設定するそのあとHTMLファイルを書くもちろんこの流れで進めていきます。views.pyを編集してCreateViewを追加するタスクを作成するにはCreateViewを使います。reverse_lazy("list")CreateViewでは、入力する項目をfieldsで設定する必要があります。入力できる項目は、データベースで定義したカラムから選ぶことになります。今回は、以下のカラムを設定していました。titledescriptiondeadlineこれらの項目はすべて入力できるようにしたいので、__all__で全選択しているわけですね。タスクの作成が完了したらreverse_lazy()を使ってlistという名前が付いたページに遷移させます。urls.pyを編集してルーティング設定するタスクの作成は以下のように設定すれば大丈夫ですね。name="create"),]個別のタスクを選ぶ必要がないから、create/にアクセスすれば作成ページが表示されるように設定します。todo_form.htmlの作成と編集ここでサーバーを起動して、タスクの作成ページにアクセスしてみてください。「todo_form.htmlがないですよ」とエラーが表示されるはずです。このエラーから分かるように、タスクの作成ページではtodo_create.htmlではなくtodo_form.htmlを準備する必要があります。todo_form.htmlを作成したら、タスクを投稿するためのフォームを準備します。value="送信"></form>これでタスクを作成するためのフォームが完成しました。あとはトップページから、このフォームへアクセスできるようにtodo_list.htmlを編集します。--></table>ファイルを保存したら、タスクを新規作成してみてください。トップページに遷移して、作成したタスクが表示されているはずです。Update間違えて作成したタスクを編集できる機能も開発しましょう。いつもどおりviews.pyから編集していきます。views.pyを編集してUpdateViewを追加するタスクを編集するにはUpdateViewを使います。クラス内で書く内容はCreateViewと同じです。reverse_lazy("list")これをコードの一番下に追加してください。タスクの作成と同様に、編集が完了したらトップページに遷移するよう設定しています。urls.pyを編集してルーティング設定する「タスクを編集する」ということは、個別のタスクを選択する必要があります。タスクの詳細を表示する」と同じURL設定が必要になるわけです。詳細ページのURL設定を参考にしながら、タスク編集のルーティングを設定していきます。name="update"),]これでURLの設定が完了しました。Viewを使うときは、以下の3つをセットに実装していました。アプリ内のviews.pyでロジックを作成し、アプリ内のurls.pyでURLを設定するそのあとHTMLファイルを書くですがタスクの編集では、HTMLファイルを書く必要がありません。それはタスクの作成と同じHTML(=todo_form.html)を使いまわせるからです。いうわけで、トップページからタスクを編集できる設定だけやっておきます。</tbody></table>ファイルを保存したら、ぜひトップページから編集画面を開いてみてください。タスクの作成と同じ画面が表示されるはずです。Deleteタスクの詳細、作成、編集まで完成しました。最後にタスクを削除する機能を開発していきましょう。views.pyを編集してDeleteViewを追加するタスクを削除するにはDeleteViewを使います。reverse_lazy("list")クラスの中身は、これまでと同じですね。key)を使ってURLを設定します。name="delete"),]これでタスクを削除できるページのURL設定が完了しました。todo_confirm_delete.htmlの作成と編集あとはタスクを削除するためのHTMLを準備するだけです。todo_list.htmlでタスクの削除ページへリンクを設定しておきましょう。</tbody></table>あとは削除ページのHTMLを書くだけです。タスクを削除するからファイル名はtodo_delete.htmlにしたいところですよね。ここでファイルを保存して、削除ページにアクセスしてみてください。すると「todo_confirm_delete.htmlが読み込めない」とエラーが表示されます。タスク削除ページのHTMLファイル名はtodo_confirm_delete.htmlである必要があります。名前を間違えないようファイルを作成したら、以下の内容を記入します。value="delete"></form>タスクの削除ではフォームの中身すべてを表示する必要はありません。タイトルだけ分かれば良いので{{task}}としています。ここまで書けたらサーバーを立ち上げてタスクを削除してみてください。タスクの表示/作成/編集/削除と、すべての機能を開発できましたね!これでTodoアプリは完成しました。あとは見た目の問題なので、Djangoの使い方だけ知りたいなら以後は不要です。Djangoで作成したTodoアプリの見た目を整えるそれでは最後にTodoアプリの見た目を整えていきましょう。言っても、今回はゼロからCSSを書くことはしません。誰でもサクッと良い感じの見た目に変更できるBootStrapを使っていきます。世界で最も人気のあるフロントエンドフレームワークまた、見た目を整えるために、新しいHTMLファイルを作成していきます。base.htmlの作成ターミナルを使えるなら以下のコマンド、そうでなければtemplates/todo/配下にbase.htmlを追加してください。todo/templates/todo/base.htmlここで作成したbase.htmlは、ファイル名のとおりでベースになるHTMLを書いていきます。どのページでも共通で使うHTMLはbase.htmlで記述して、このテンプレートを読み込むことで他のページも作成していきます。いうわけで、まずはベースになるHTMLを書いていきましょう。base.htmlに以下のHTMLを記述していきます。%}</body></html>8行目はBootStrapを使うための設定です。%}は、他のHTMLファイルでも使用します。このタグの中に各ページ独特のコードを記入することで、HTMLテンプレートを拡張できる仕組みです。テンプレートの拡張それでは具体的にどうやって使うのか見ていきましょう。todo_list.htmlを以下のように編集してみてください。%}サーバーを立ち上げて、トップページにアクセスしてみましょう。以前と少し見た目が違っていますよね。見た目が変わる理由は、base.htmlで書いておいたBootStrapの設定が読み込まれているからです。%}などのテンプレートタグ内にコードを書くことで中身を反映しています。%}にコードを書かないと、ページにHTMLが反映されません。本来ならbase.htmlと同じように<head></head>や<body></body>を準備する必要がありますが、テンプレート拡張を使えばどのファイルでも共通して使うHTMLを使い回しできるわけですね!base.htmlの編集base.htmlとテンプレート拡張の仕組みが分かったら、あとはHTMLファイルを編集するだけです。base.htmlにどのページでも共通して使うテンプレートを準備しておきましょう。Fontも使っていきます。Sansを選んでいますが、ぜひ自分が好きなフォントを使ってみてください。</div></body></html>これでbase.htmlの編集が完了しました。このHTMLで使ったBootStrapのページは以下です。次にトップページを編集していきます。%}新規作成のページは青色で装飾してみました。テーブルもBootStrapを使えば綺麗に表示できます。次にタスクの作成・編集ページです。%}これくらいシンプルで良いと思います。自分が好きなようにスタイルを当ててくださいね!todo_detail.html詳細ページでは、タスクの表示にカードを使ってみます。v5.0todo_confirm_detail.html最後に削除ページです。%}ここではボタンだけ装飾しました。サーバーを立ち上げてTodoアプリを確認するこれで簡単な装飾も完成しました。サーバーを立ち上げてTodoアプリを確認してみてください。Djangoにしては上出来ではないでしょうか?もしアプリをWeb上に公開したいなら、ぜひFlask編を確認してみてください。この記事では「Flaskを使ったWebアプリ(Todoアプリ)の作り方」を分かりやすく紹介していきます。Flaskの日本語情報は少な...こちらで丁寧に解説しています。Djangoというわけで、この記事ではDjangoでTodoアプリを開発する方法を紹介してきました。今回は初心者向けだったので、ミニマムでWebアプリを作るための知識だけ書きました。本当はDjangoを使うと、色々な機能をカンタンに実装できます。寄稿、記事の掲載依頼はお問い合わせページからお願い致します。当サイトで使用する「仮想通貨」とは、「暗号資産」のことを指します。当サイトで使用する「仮想通貨」とは「暗号資産」のことを指します。当サイトで掲載している情報に基づいて被ったいかなる損害についても、運営者及び情報提供者は一切の責任を負いません。保証されたものではありません。