ChatGPTに色々聞いて作ってみよう！！

こんにちは。Qiita記事4回目を書いています、IT初心者のkaneです。
これまで色々な初めてを経験し、プログラミングができない超初心者でも様々なプロトタイプが作成できるんだということがわかりました。

今回は、ChatGPTに色々聞いてみながら何かを作ってみようと思います。
これまで噂には聞いたことはあったのですが、使ってみたことはなかったので使ってみようと思います。

使用ツール

ChatGPT　https://chat.openai.com/
codepen　https://codepen.io

タスク管理を容易にできるツールを作成！

今回は、チームメンバーだけでなく仕事をする人であれば欠かすことのできない「タスク管理」を円滑にできるWebアプリを作成したいと思います。
これを作成したいと思った背景と実現したいことを下記に記載します。

現在はチームミーティング時に、各々エクセルで日別に管理表を作成し、Teamsで画面共有して、メンバー間で情報交換をしています。これを一つのフォーマットに統一しt、見やすさや管理のしやすさにつながるのではないかと考えたことが背景にあります。
ペーパーレスの観点からTeamsで画面共有をするようになったので、Excelである必要もないため、必要な情報だけササっと入力したらある程度体裁を整えてくれるようにしてほしい
但し、まれに紙で印刷することもあるので、Web画面上で作成したものをExcelにエクスポートできる機能が欲しい

上記をChatGPTを頼りに実装していきます！
私にはHTMLやJavaScriptの知識は皆無なので、自力でやろうとするとできてもWeb上でテキストボックス追加して、何か入力できるようにしてくらいの程度かと・・・

ChatGPTを使って、実装開始

今回実装したこと

CodePenで以下の動画で映し出しているところまでは実装できました。

PC画面上での動作

-作成した画面の全体像

実装できたこと

タスクを入力するテキストボックス、カレンダーボックス、時計ボックスの配置
入力したタスク情報を日別に一覧表示
登録したタスクの削除機能
登録したタスクの横にチェックボックスを配置し、進捗管理

できなかったこと

Excelへのエクスポート。ChatGPTにも無理だよと言われました・・・
Excelが無理であれば、せめてCSVで出力できればと思いましたが、ボタン押下しても何も動作しない。。ただの何もしないボタンになってしまいました。

ChatGPTに聞いてみた

ChatGPTへ依頼！そもそもどうやって依頼？？
今回、ソースを書くにあたって文法とかそういったものが全くわからないので、ChatGPTに何もかも頼りきりでした。
ChatGPTを活用するにあたってなるべく詳細にやりたいことを端折らずに書くことが大事であると、終盤になってやっと気づきました。

注意
詳細まで「仕様」を整理してからプロンプト（指示文書）を書いてあげましょう！
でないと、私のように何回もプロンプト書いて、戻ってきてを繰り返す無限ループに陥ります。

超抽象的なプロンプトからスタート
うまくいかないことや私の伝え方が下手すぎるのもあり、冒頭のシンプルなツールを作るのに結構なやり取りを繰り広げました。
ちなみに一番最初に書いたプロンプトは、これだけ。

それでも最低限の機能を有した業務タスクアプリを作ってくれました。
この時点のツールを残しておけば良かったのですが、保存しておらず。。。

実際のChatGPTとのやり取りはこちらです。
結構な量のやり取りなので、相当スクロールしないといけないのですが、根気強く会話しました。
なかなか時間短縮になった実感はあまりないのですが、自力で一からやっていたら、ただタスクを列挙するだけのWebアプリで挫折していたと思いますが、全くソースコードを書けない私でもここまで実装はできました。

使ってみての感想

実際に使ってみて、率直な感想で言うと、
「今のままでは実用性はまだないかな」と言うのが感想です。
やはり、Excelに落とせるようにしたいと言うのが前提で、それが実現できていないためです。
また、「保存」機能もないと使うのは厳しいなと言う感じがしました。
CodePen以外を使っての実現も検討が必要かと考えました。
近いうちにリベンジしたいと思います。

振り返り

ChatGPTを使って短時間で画期的なツールを作るつもりでしたが、冒頭のものを作るのでも結構時間を使ってしまいました。
但し、抽象的な指示でもある程度のものを作ってくれることはわかったので、事前に設計書のようなものを作れば、より高度のものが作れるということがわかりました。
今回は、行き当たりばったりで作成したので、かかった時間の割に精度の高いものが作れなかったので、事前に仕様をまとめるところから始めてみようと思います！