ChatGPTを使ってToDoアプリを作りながらフレームワークを学んでみた

はじめに

• ChatGPT を使って、ToDo アプリを作ってみた
• 以下の技術を使って構築
  • フロントエンド
    • React
    • Next.js
    • TypeScript
  • バックエンド
    • FastAPI
    • Python
    • SQLAlchemy
    • Alembic
  • データベース
    • PostgreSQL

先に感想

• Web 開発の基本的な知識があると爆速で動くものが作れて良い
• 今回はスムーズに行けたが、どのフレームワークでも適用できるかは不明
• ある程度成熟した技術であれば、同様に進められると思う
• 以下を理解していないと ChatGPT に適切な指示が出しにくい
  • REST API
  • CORS
  • データベースマイグレーション
  • UI コンポーネント
  • フレームワークの基本的な知識

作ったもの

• こんな感じ

事前準備

• Node は既にインストール済み
• Python も動作可能な環境
• Docker も動作可能な前提

ステップ

• 下記のステップで、ChatGPT に質問しながら進めた
• ポイントは、一気に最終段階を作成せず、動作確認できるステップに区切りながら進めたこと
• ChatGPT を使うかどうかに限らず重要なポイントだと思う
• ただ、対話的に ChatGPT を使って一歩一歩学んでいくという意味でも大事なことだと思う

1. React だけで、メモリ上で ToDo リストを保持して表示するものを作成
   1. ブラウザで動作確認
2. MUI を使って、少しだけリッチなものを作成
   1. ブラウザで動作確認
3. バックエンド API を呼び出す方法を確認
   1. コードだけで確認
4. FastAPI を使って、メモリ上で ToDo リストを保持する API を作成
   1. OpenAPI のインターフェースが自動で動くのでそれで確認
5. React をバックエンド API を呼び出す形に修正
   1. ブラウザで動作確認
6. FastAPI で CORS 設定を緩和する修正
   1. ブラウザで動作確認
   2. OpenAPI からデータが変わっていることを確認
7. FastAPI から PostgreSQL に接続して ToDo リストを管理する方法を確認
   1. コードだけで確認
8. PostgreSQL 環境を Docker で起動
   1. PostgreSQL クライアントを使って起動していることを確認
9. Python のマイグレーションツールを使って必要なテーブルを作成
   1. PostgreSQL クライアントを使ってテーブルが作成されたことを確認
10. FastAPI から PostgreSQL に接続して ToDo リストを管理するように修正
    1. OpenAPI からデータを作成して、PostgreSQL に反映されることを確認
    2. ブラウザから操作して PostgreSQL のデータが変わっていることを確認

ChatGPT への指示

• 長いけど、こんな感じ
• 日本語で聞いており、プロンプトエンジニアリング的な工夫は特にない
• 必要な情報を伝えるようには意識した（当たり前だが）

おわりに

• ChatGPT は本当に賢い
• 今までは、新しい技術を学ぶときは、良い感じの技術記事やチュートリアルを探して試していた
• これからはとりあえず ChatGPT に聞いてから考えるようになると思う
• もっと色々試したい