投稿

【デプロイ】ChatGPTでTODOリスト(WEBアプリ)のソースコードを生成する【4/4】

ブラウザで動くTODOリスト制作 with ChatGTP、全工程終了です。 --- <全体の流れ> 全体の流れと仕様を決める ChatGPTへの指示内容を作成する 生成されたソースをレビューする 完成したソースを使ってTODOリストを作成、デプロイする ←今ココ --- <成果物> URL(GitHub Pages で公開しました) https://yokotamanoko.github.io/chatgpt-webapp-todolist/ ChatGPT用プロンプト(指示書) https://github.com/yokotamanoko/chatgpt-webapp-todolist/blob/main/prompt.txt 最終版ソース https://github.com/yokotamanoko/chatgpt-webapp-todolist/tree/main/docs ChatGPTが最初に出力したソースとレビュー内容 https://github.com/yokotamanoko/chatgpt-webapp-todolist/pull/1/files --- エンジニア視点でChatGPTとの付き合い方を知ることを目的にはじめた本件、現時点での感想は「プロジェクトのひな型と、部品作りを担当してもらうなら便利」かな。 とは言え、プロンプトを「こんなんでええんかいな」と思いながら作るぐらいには素人なので、慣れてくればもっとシュババッとスゲーもん作れちゃうかもしれません。 やりながら困ったなと感じたのは画面設計およびデザインです。ChatGPTとは画像のやりとりが出来ないので(最新の有料版は出来るようです。すごすぎじゃん?)文字で会話しないといけない。が、その時点でま〜めんどくさい気持ちが勝ってしまい、今回はそこに時間かけるつもりもないしそれっぽく見えればOK!としました。 その他、どこまでChatGPTに依頼するかのイメージは予め持っておいたほうがいいなと思いました。今回、出てきたソースを修正するとしてどこまでChatGPTにやってもらうか?の判断で悩む瞬間がありました。役割分担の感覚を掴むことも今回の目的に含まれていましたが、ちょっとここはまだ、プロンプトの書き方と合わせて練習が必要そうです。 ばーっと思ったことを並べましたが、今後はデータベース

【コードレビュー】ChatGPTでTODOリスト(WEBアプリ)のソースコードを生成する【3/4】

作成した指示書をChatGPTへ投げました。その返答をレビューします。 --- <全体の流れ> 全体の流れと仕様を決める ChatGPTへの指示内容を作成する 生成されたソースをレビューする ←今ココ 完成したソースを使ってTODOリストを作成、デプロイする --- <返答内容とレビュー結果> ChatGPTが作成したコードはこちらです。 ふむ・・・ざっと見た感じは悪くなく、むしろ数秒で出てきたのでスゴイなというのが最初の印象です。でもよくよく見てみると仕様を見落とすなど致命的なバグがあったので、下記のようにまずは大きな部分のレビューをしてみました。 https://github.com/yokotamanoko/chatgpt-webapp-todolist/pull/1/files これらの指摘についてはChatGPTに修正してもらうとして、細かい挙動や画面のデザインについてはどこまでChatGPTに指示すべきか、私はどう振る舞うのが合理的か、ちょっと考えあぐねています。ここまで出来てるなら、あとは自分でやったほうが早いかな〜。 そういうわけで次回は最終回、ソースを完成させて実際に触ってもらえるようにしたいと思います。 youkou

【指示書作成】ChatGPTでTODOリスト(WEBアプリ)のソースコードを生成する【2/4】

ここでは本取り組みのメインとなる、ChatGPTへの指示内容を作成します。 --- <全体の流れ> 全体の流れと仕様を決める ChatGPTへの指示内容を作成する ←今ココ 生成されたソースをレビューする 完成したソースを使ってTODOリストを作成、デプロイする --- <ChatGPT指示書> 前回作成した仕様ほぼそのままですね。 指示を投げる時はできるだけ詳しく書いたほうがいいらしい、というのは念頭に置いていましたが、これ以上はいまいちどう書いたらいいのか、実際にやってみないと分からないなと感じたので、この状態でChatGPTに投げてみることにしました。 --- 作業開始前に1点、ChatGPT上でのやりとりの著作権について気になったので利用規約を確認しました。 Terms of use https://openai.com/policies/terms-of-use 該当箇所についてめちゃくちゃざっくりまとめると・・・コンテンツの所有権は利用者に譲渡されるが、同時に利用者はコンテンツについて法律や規約違反をしていないか確認する責任を追うとのこと。 コンテンツには他者の著作物を含む場合があり、一方で架空の話が出力されることもあるので、基本的には「要確認」という姿勢でいくのが良さそうだなと理解しました。このあとソースコードをレビューする流れにしておいて良かったです。 というわけで、次回は指示書をChatGPTに投げて、返答内容をレビューしまっせ〜。 youkou

【全体の流れと仕様決定】ChatGPTでTODOリスト(WEBアプリ)のソースコードを生成する【1/4】

ChatGPTを使って、TODOリスト(WEBアプリ)のソースコードを生成してみます。 今回は全体の流れと仕様を整理します。 --- <全体の流れ> 全体の流れと仕様を決める ←今ココ ChatGPTへの指示内容を作成する 生成されたソースをレビューする 完成したソースを使ってTODOリストを作成、デプロイする --- <仕様> 本番環境 :GitHub Pages 言語   :HTML、CSS、JavaScript ライブラリ:jQuery、jQuery UI、Bootstrap TODOリスト 画面仕様 画面上部にフォーム配置 テキストボックス、送信ボタン 画面下部に送信されたテキスト表示 レスポンシブ 機能 テキストの入力、削除、並び替え 送信されたテキストの先頭にチェックボックス配置 オン:取り消し線表示、オフ:取り消し線非表示 送信されたテキストの後尾に削除リンク配置 クリックで該当テキスト削除 ドラッグで並び替え その他 送信されたテキストは画面表示している間のみ保持する(タブやブラウザを閉じるとすべて削除する) --- ChatGPTが登場してからだいぶ日が経ちましたが、私はちょうど子育てが重なりテンヤワンヤしていたため最近までほぼノータッチでした。メディアで報道される様子を眺めたり、家族が活用しているのを横から眺めたりしていた程度です(めっちゃ眺めるやん)。 そういうわけで、エンジニア視点でChatGPTとの付き合い方を知ることを目的に、色々と作ってみようと思います。 今回はブラウザで動く簡単なTODOリストの開発を手伝ってもらうことにしました。TODOリストはプログラミング初心者向けのチュートリアルでよくあるお題で、内容がシンプルかつソースレビューもしやすいので、今回のような場面にも合いそうだなあと思い採用しました。 次回はChatGPTへの指示内容を作成します。 youkou