単語帳アプリ（Webアプリ）をChatGPTを使って作ってみた記録。
概要
生成AIに手伝ってもらって、単語帳アプリを作った。
Webアプリなので、Webブラウザ上で動作。（iPhone Safari, Mac版Chromeで検証。）
製作所要時間2時間（立案・テスト・サンプルデータ100語のテキスト入力）。
こちらから、実行可能。
目的・機能
初期の目的は、ムスメさんの夏休みの課題の手伝い。
夏休みの課題で、英単語を覚えるようにとプリントを渡されていて、スマフォ でも手軽にできないとやらないなと。
ChatGPTとともに進め、機能付与されて現時点の機能は次のように。
- 問題数は、可変。
- 出題範囲変更可能。
- 英語については発音の読み上げ機能あり。
- 出題は、英語から日本語、日本語から英語ともに可能。
- 日本語と対となる英語とで、各単語はナンバリング。
- 単語はCSVファイルで管理。（100単語）
使い方
- ここをタッチ。別タブで表示する。 ＊プリセットで 100単語の単語ファイルを読み込みます。
- 自作の単語ファイル（CSVファイル）がある場合のみ、ファイルを選択ボタンを押下してファイル選択。
- 開始番号と終了番号（単語にナンバリングした番号）、そのうち何問出題したいかを出題数に入力。
- 出題順に、出題順が順番通りか、ランダムかを選択。
- 日本語→英語 か、英語→日本語か 出題形式を選択。
- 出題開始ボタンを押して開始。
動作結果
英単語スペル練習
＊2025/8/4時点。
経緯
目的は、ムスメさんに英語の単語の暗記が夏休みの宿題に出ていたため。
夏休み期間中に100単語覚えなきゃいけない様子。
親としては、夏休み明けに小テストがあったら、こりゃ不安だなと。
じゃあ、四六時中触ってるスマフォで少しでも触れる機会を増やさせなければと。
日曜大工状態で、ChatGPTに相談してみた。
朝の2時間を使って、本人たちが起きてくる前に作ってみた次第。
ChatGPTとの経緯・やりとり
下記は、ChatGPTに相談した内容。（言い換えれば、こちらからChatGPTへの命令を全て出力。）
当初、辞書部分は、SpreadSheetをリンク先にしようかとしていたもので、一部、余計な記録が含まれているけど。
なんやかんやChatGPTのAsk Anything欄に書いた内容が下記の内容。
- 英単語練習アプリを作りたい。スペリングの練習。
- google spread sheetで英語と日本語は準備した。入力したスペルが正しいかがチェックできるのが良い。簡単なサンプルコードを作って。
- Googleスプレッドシートから直接単語を読み込みたい場合は？
- 単語リストは、リンク先から参照しないで、直接HTML内に書きたい。
- 機能の追加として、”分からない”ボタンを追加して。その場合、わからない単語の正しい綴りを表示して。
- 結果表示（正解数や間違った単語の復習）を加えて。
- 結果表示の件は、忘れてください。
- 単語の発音を聞けるボタンを別に加えたい。
- 不具合があったので、次のコードをもとにして。そこに、発音を聞くボタンをつけたものを提案して。
- いいね！ これに結果表示（正解数や間違った単語の復習）を加えたものを教えて
- 単語の出題順を順不同にできる？
- 「順番どおり」か「ランダム」を選べるようにしたい
- 出題数を制限したい（例：5問だけ）
- 出題数を100問に変更しても大丈夫ってことだね
- CSVからのインポート機能って？
- CSV読み込み機能付き版をください。問題に番号をつけたほうが良いかな？
- CSVの単語に番号を付与しようと思う。そして、1〜50までの問題で出題、51〜100までの問題で出題するようにできるとうれしい。
- 現在のソースだと、ボタンを押してcsvを指定しているよね。ボタンを押して選べる機能を残しつつ、プリセットでcsvファイルを指定しておくにはどう書き加えれば良い？
- 完全なHTMLコードをお願い。
- 指定範囲に単語がありません。
- ファイルが貼れないよー。
- いま、日本語からの出題だけだよね。英語から日本語も追加したい。
- 発音は、どちらのモードでも英語の発音して欲しい。
- HTML全文を見せて
- 間違えた時には、ブブーといった間違えた音を鳴らせるようにできる？
- Web Audio APIの方法でお願い。正解の場合には正解っぽい音、間違えた時には間違えっぽい音と鳴らすようにして欲しい。全文表記して。
- 正解が、ピン だけなので、ポーンの部分まで欲しいな。
- iPhoneのSafari（縦表示）で表示した時に、セレクトのボタンとか、入力欄とか、文字が小さいんだよね。どうにかなる？
- 今教えてれくれた、~を差し替えれ見れば良いってことかな？
- ありがとう。次のお願い。あなたが私に送ったメッセージ（ユーザーからChatGPTへの依頼文）」だけを抽出したい。
