今回は、Pythonの代表的なフレームワーク「Django(ジャンゴ)」を使って、
ログイン機能付きのTodoアプリを一緒に作っていきます。
Djangoを使えるようになると、
ユーザ登録やログイン、データの保存・表示など、
本格的なWebアプリの仕組みを自分の手で構築できるようになります。
Web開発の第一歩としてぴったりの題材なので、
ぜひこの記事を参考に、一緒に作りながら学んでいきましょう！
アプリの全体像
今回作成するアプリでは、以下のような機能を実装します。
Todoアプリとして、基本的な操作からログイン機能まで、
一通りのWebアプリ開発の流れを体験できる構成になっています。
実装機能
- 一覧表示機能
- 詳細表示機能
- 追加機能
- 編集機能
- 削除機能
- ステータス変更機能(完了/未完了の切り替え)
- 検索・絞り込み機能
- ログイン/ログアウト機能
使用技術
フロントエンド：HTML / CSS / JavaScript / Bootstrap
バックエンド：Python / Django
データベース：SQLite(Djangoが標準で採用している軽量データベース)
それでは、ステップごとに完成イメージを見ていきましょう！
一覧表示機能
この機能では、登録されているTodo一覧を画面上に表示します。
登録件数が1件もない場合は、「まだTodoがありません。」というメッセージを表示します。
完成イメージ
詳細表示機能
この機能では、選択したTodoの詳細内容を確認できるページを作成します。
タイトルや本文、作成日時・更新日時などを一覧画面から遷移して表示します。
完成イメージ
追加機能
この機能では、新しいTodoを登録できる画面を作成します。
タイトルと内容を入力し、「追加する」ボタンを押すことでデータベースに保存されます。
完成イメージ
編集機能
この機能では、登録済みのTodoを編集・更新できる画面を作成します。
内容を修正して「更新する」ボタンを押すと、データベースの情報が上書きされます。
完成イメージ
削除機能
この機能では、登録済みのTodoを削除できる画面を作成します。
削除ボタンを押すと確認ダイアログが表示され、OKを押すと該当のTodoがデータベースから削除されます。
完成イメージ
ステータス変更機能
この機能では、Todoの「完了 / 未完了」状態を切り替えるボタンを実装します。
一覧画面上でボタンをクリックするだけで、即座にステータスを変更できます。
完成イメージ
検索・絞り込み機能
この機能では、Todoをキーワード検索したり、ステータス別（完了 / 未完了）に絞り込みできるようにします。
件数が増えてきたときでも、目的のTodoを素早く探せるようになります。
完成イメージ
ログイン/ログアウト機能
この機能では、Djangoの標準認証機能を使って、ログイン・ログアウトの仕組みを追加します。
これにより、アプリにアクセスできるユーザーを制限し、認証済みのユーザーだけがTodoを操作できるようになります。
完成イメージ
これで、今回作成するTodoアプリの全体像がつかめたと思います。
どんな機能を実装するのか、どんな画面を作るのかをイメージできたところで、
次はいよいよ開発の準備編に入っていきます。
次の記事では、
Djangoの開発を進めるための環境構築手順を詳しく解説します。
Pythonの仮想環境の作り方から、Djangoのインストール、
そして実際にプロジェクトを立ち上げるところまでを一緒に進めていきましょう！
