<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<ul>
<li>ChatGPT を使って、ToDo アプリを作ってみた</li>
<li>以下の技術を使って構築
<ul>
<li>フロントエンド
<ul>
<li>React</li>
<li>Next.js</li>
<li>TypeScript</li>
</ul>
</li>
<li>バックエンド
<ul>
<li>FastAPI</li>
<li>Python</li>
<li>SQLAlchemy</li>
<li>Alembic</li>
</ul>
</li>
<li>データベース
<ul>
<li>PostgreSQL</li>
</ul>
</li>
</ul>
</li>
</ul>
<h1 id="%E5%85%88%E3%81%AB%E6%84%9F%E6%83%B3">
<a class="header-anchor-link" href="#%E5%85%88%E3%81%AB%E6%84%9F%E6%83%B3" aria-hidden="true"></a> 先に感想</h1>
<ul>
<li>Web 開発の基本的な知識があると爆速で動くものが作れて良い</li>
<li>今回はスムーズに行けたが、どのフレームワークでも適用できるかは不明</li>
<li>ある程度成熟した技術であれば、同様に進められると思う</li>
<li>以下を理解していないと ChatGPT に適切な指示が出しにくい
<ul>
<li>REST API</li>
<li>CORS</li>
<li>データベースマイグレーション</li>
<li>UI コンポーネント</li>
<li>フレームワークの基本的な知識</li>
</ul>
</li>
</ul>
<h1 id="%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE">
<a class="header-anchor-link" href="#%E4%BD%9C%E3%81%A3%E3%81%9F%E3%82%82%E3%81%AE" aria-hidden="true"></a> 作ったもの</h1>
<ul>
<li>こんな感じ</li>
</ul>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--uGtaLTKE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/05434f7e042381669159b2cf.png%3Fsha%3Dad3135833e28cd21259c14605425e46008485800" alt loading="lazy" class="md-img"></p>
<h1 id="%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99">
<a class="header-anchor-link" href="#%E4%BA%8B%E5%89%8D%E6%BA%96%E5%82%99" aria-hidden="true"></a> 事前準備</h1>
<ul>
<li>Node は既にインストール済み</li>
<li>Python も動作可能な環境</li>
<li>Docker も動作可能な前提</li>
</ul>
<h1 id="%E3%82%B9%E3%83%86%E3%83%83%E3%83%97">
<a class="header-anchor-link" href="#%E3%82%B9%E3%83%86%E3%83%83%E3%83%97" aria-hidden="true"></a> ステップ</h1>
<ul>
<li>下記のステップで、ChatGPT に質問しながら進めた</li>
<li>ポイントは、一気に最終段階を作成せず、動作確認できるステップに区切りながら進めたこと</li>
<li>ChatGPT を使うかどうかに限らず重要なポイントだと思う</li>
<li>ただ、対話的に ChatGPT を使って一歩一歩学んでいくという意味でも大事なことだと思う</li>
</ul>
<ol>
<li>React だけで、メモリ上で ToDo リストを保持して表示するものを作成
<ol>
<li>ブラウザで動作確認</li>
</ol>
</li>
<li>MUI を使って、少しだけリッチなものを作成
<ol>
<li>ブラウザで動作確認</li>
</ol>
</li>
<li>バックエンド API を呼び出す方法を確認
<ol>
<li>コードだけで確認</li>
</ol>
</li>
<li>FastAPI を使って、メモリ上で ToDo リストを保持する API を作成
<ol>
<li>OpenAPI のインターフェースが自動で動くのでそれで確認</li>
</ol>
</li>
<li>React をバックエンド API を呼び出す形に修正
<ol>
<li>ブラウザで動作確認</li>
</ol>
</li>
<li>FastAPI で CORS 設定を緩和する修正
<ol>
<li>ブラウザで動作確認</li>
<li>OpenAPI からデータが変わっていることを確認</li>
</ol>
</li>
<li>FastAPI から PostgreSQL に接続して ToDo リストを管理する方法を確認
<ol>
<li>コードだけで確認</li>
</ol>
</li>
<li>PostgreSQL 環境を Docker で起動
<ol>
<li>PostgreSQL クライアントを使って起動していることを確認</li>
</ol>
</li>
<li>Python のマイグレーションツールを使って必要なテーブルを作成
<ol>
<li>PostgreSQL クライアントを使ってテーブルが作成されたことを確認</li>
</ol>
</li>
<li>FastAPI から PostgreSQL に接続して ToDo リストを管理するように修正
<ol>
<li>OpenAPI からデータを作成して、PostgreSQL に反映されることを確認</li>
<li>ブラウザから操作して PostgreSQL のデータが変わっていることを確認</li>
</ol>
</li>
</ol>
<h1 id="chatgpt-%E3%81%B8%E3%81%AE%E6%8C%87%E7%A4%BA">
<a class="header-anchor-link" href="#chatgpt-%E3%81%B8%E3%81%AE%E6%8C%87%E7%A4%BA" aria-hidden="true"></a> ChatGPT への指示</h1>
<ul>
<li>長いけど、こんな感じ</li>
<li>日本語で聞いており、プロンプトエンジニアリング的な工夫は特にない</li>
<li>必要な情報を伝えるようには意識した（当たり前だが）</li>
</ul>
<p><img src="https://res.cloudinary.com/zenn/image/fetch/s--3angULn1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_1200/https://storage.googleapis.com/zenn-user-upload/deployed-images/dab2038716c8cf4d567f175c.jpeg%3Fsha%3D5ec7d0e52b8e53fecd1dacc9d761cd55b4498e67" alt loading="lazy" class="md-img"></p>
<h1 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h1>
<ul>
<li>ChatGPT は本当に賢い</li>
<li>今までは、新しい技術を学ぶときは、良い感じの技術記事やチュートリアルを探して試していた</li>
<li>これからはとりあえず ChatGPT に聞いてから考えるようになると思う</li>
<li>もっと色々試したい</li>
</ul>


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

zenn-content

nextjs

Discussion