プログラミングの知識がなくても、ChatGPTと会話するだけでWebアプリを作れる。

それは本当でしょうか？

この回では、ブラウザで動くタスク管理アプリを、指示を重ねて育てていった過程を、実際に出した指示とつまずいた点とあわせて紹介します。

アプリ作りに興味がある方は、ぜひ読んで下さい！


一発では、思いどおりにならない

プログラミングの知識がなくても、ChatGPTと会話するだけでWebアプリを作れます。

ただ、一発で思いどおりのものはできないので、指示を重ねて育てていく進め方になります。

タスク管理アプリを例に、どんな指示を出したかを順に紹介します。


最初の指示

最初は、これだけを頼みました。


ブラウザで動く、タスク管理アプリを作ってください。

HTML・CSS・JavaScriptをまとめて1つのファイルにしてください。


使い方の説明つきで、コードが出ました。

タスクを入力して追加でき、クリックすると取り消し線で完了、削除ボタンで消せます。

ただ、入力欄が小さく、リロードすると入力したタスクが消えました。

これではタスク管理に使えません。


見た目と保存を直す（2〜5回目）

2回目の指示は、全体の幅を1,000ピクセルほどにする、入力したタスクをローカルストレージに保存する、削除ボタンは左・タスクは右に置いてその間を50ピクセル空ける、でした。

ページを再読み込みしても、タスクが残るようになります。

ただ、幅が広すぎました。

3回目で、幅を750ピクセルにし、入力欄と追加ボタンを同じ行に、ボタン幅を200ピクセル前後に、削除ボタンとタスクの間隔を30ピクセルにしました。

ところが、入力欄とボタンがくっつきすぎていて、間隔がうまく直っていません。

4回目は、細かい指定です。

入力欄と追加ボタンの間に30ピクセル、行の並び順を「チェックボックス・タスク内容・削除ボタン」の順に、要素の間隔は50ピクセル。

完了したタスクが分かるように、チェックボックスも付けました。

5回目で、タイトルと入力欄の間に当日の日付を「yyyy/mm/dd」で表示、「すべてクリア」ボタンの追加（確認メッセージつき）、チェックを入れたらタスク名と削除ボタンの不透明度を0.5にする、と頼みました。

ここまでで、かなり使えるようになりました。


CSVで書き出し・読み込み（6〜8回目）

ローカルストレージは、ブラウザの中にしか保存されません。

別のブラウザやパソコンでは見られないので、CSVで書き出す機能を頼みました。

見出しは「日付／チェックの有無／タスク内容」です。

書き出したCSVは、文字化けしました。

メモ帳で直して開くと読めたので、7回目で文字コードを「ANSI」にするよう指示しています。

あわせて、次の変更も頼みました。

  • 「日付」と「チェックの有無」の順番を逆にし、「タスク完了」に名前を変える
  • 完了は「◯」、未完了は「✕」にする
  • タスクが0件のときは「タスクがありません。」とエラーを出す
  • 書き出しと「すべてクリア」の間に「CSV読み込み」ボタンを作る

ブラウザの制約で、保存先のフォルダは指定できず、ダウンロードフォルダに保存されます。

保存先を変えたいときは、ブラウザの設定でダウンロード先を変えます。

8回目で、読み込みの機能を実装し、ボタンが1行に並んで見づらいので、1行目を「タスクを追加」と「すべてクリア」、2行目を「CSV書き出し」と「CSV読み込み」に分けました。

最後に、ボタンの位置を揃えて、完成です。


レベルアップ：修正・時間・実施日

実際に使うと、足りないところが見えてきます。

タスクの内容を修正できない、日付を指定できない、実行する時間を足したい、の3点でした。

指示は、全体の幅を伸ばす、削除ボタンの左に「修正」ボタンを作る、押すと内容を編集できるようにする、ボタンにカーソルを乗せたときに不透明度を0.7にする、でした。

幅が広すぎたので、あとから100ピクセル狭めています。

修正ボタンを押すと保存ボタンに変わり、押すまで編集画面を維持する、という仕様も入れました。


作業時間は、最初に「チェックボックスと数字（25、50、75、100）」と頼みました。

ところが、意図がうまく伝わりませんでした。

伝え方が悪かったようで、タスクの入力欄を狭くして横にラジオボタンを並べ、選んだ数字を「タスク名（◯分）」のように表示する形に直しました。

さらに、「今日の日付」と「現在時刻」を同じ高さに並べ、間隔は30ピクセル前後にし、その右に「タスク実施日」をカレンダーから選べるようにしました。

CSVの見出しも、「タスク完了／タスク実施日／タスク内容／時間」に変えています。


直らなかった修正機能

最後までうまくいかなかったのが、修正機能です。

保存ボタンを押しても何も起こらず、「保存したら修正内容を反映して、元の状態に戻す」と頼み直しても直りませんでした。

何度か試したあと、修正機能そのものを外しました。

タスクの入力は長文ではないので、書き直すほうが早いからです。


指示を出すときのコツ

- 一度に直す点は、箇条書きで具体的に。

ピクセルや順番など、数字で指定すると伝わる


- うまくいかない部分は、画面の状態を言葉で説明する


- 何度やっても直らない機能は、外す判断もある


この規模のアプリを、私が自分で作ろうとしたら、おそらく3か月はかかっていたと思います。

ChatGPTは、わずか1時間弱で完成させてくれました。