生成AIを使ってコードを書くヒント

生成AIの協力を得ながら、これまで小学生向けの学習ゲーム教材などを短期間で20ほど作ってきました。
（作成したゲーム等のリストはこちらから）
生成AIの助けを得たら、だれでも簡単にゲームなどのコード（htmlなど）を書くことができます。
そのヒントをここでまとめておきます。

①コードは＜index.html＞　＜style.css＞　＜script.js＞で構成する
　コードを書くときは一般的には、＜index.html＞　＜style.css＞　＜script.js＞の３つが1つのフォルダに入っているということが原則です。簡単なプログラムなどはindex.htmlだけでも書けないことはないですが、あとの修正を考えた場合、そのようにしておくことが重要です。
　これらの役割は、index.htmlがプログラムの本体の起動を定め、その構造を定めています。家でいうなら窓の位置や部屋の配置などの基本的な設計図のようなものです。style.cssは、その表現方法を規定し、家で言うなら家の形や色あいなどを規定しています。script.jsは、インタラクティブな動作にかかわっています。JAVAスクリプトで記述され、家で言うなら、電気をつけたり、インターフォンで安全確認したりドアを開け閉めできるような機能性にかかわっています。
　上記の３つのほか、例えば図が付属しているコードでは必ず同じフォルダ内に図を入れておかないといけません。図が多い場合は＜images＞という子フォルダを作ってその中に入れたほうがわかりやすいです。

②コードの作成・修正はメモ帳でできる
　コードはテキストの羅列なので、メモ帳で簡単に作成し編集できます。AIが作ってくれたコードをメモ帳にコピペして、名前を付けて保存します。そのさい拡張子は.txtではなく、拡張子も含め名前全体を所定のもの（すなわちindex.html　style.css script.js）にして保存してください。先ほども述べたように、そのファイルを同じフォルダ内に格納します。なお、作成したものを編集用のために開く場合は、「右クリック」→「プログラムから開く」でメモ帳を選択してください。

③大量のデータのhtml言語はエクセルを使って編集
　例えば英単語などは、非常に多くのデータ数があります。それをscript.jsに書き加える必要があります。その場合、エクセルを使ってやると簡単にデータの拡張ができます。例えば英単語を元にしたゲームの場合、次のようなデータをたくさん入れていく必要があります。
{“english”: “ June “, “reading”: “ ジューン “, “meaning”: “ 6月 “},
　用意した単語帳には、英語・発音・意味が書かれていますが、コードには英語や日本語の前後や間に{“english”: ” や　 “,“reading”: “　　などが入っています。これも全部の単語に同じようにつけることが必要になります。そこで、エクセルで作った単語表の前後に列を増やして挿入するコードをコピーしてやり、全体をコピーしたら簡単に膨大なコードを作成できますのでそれをメモ帳で開いたscriptにコピペします。
　なお、データが膨大な場合は、最初からAIに頼まず、少数のサンプルで頼んで作るのをお願いしたほうがいいです。特にChatGPTは作業量が多いと限界がすぐきますし、他のAIも作業時間が長くかかって効率が悪いです。

④サーバーを持っていなくてもコードを動かせる
　サーバーを持っている場合は、その中にフォルダを作ってコードを作動させられるのですが、持っていない場合も、フォルダ内のindex.htmlをダブルクリックすれば作動します。この場合、オフラインで作動します。
　なお、GitHUBというサイトを利用することで、無料でコードを公開できます。

⑤コードは生成AIに聞いたら作ってくれる
　もし、ゲームなどのアイデアが浮かんだら、それを生成AIに相談したら作成してくれます。その際、目的を説明したあと。「・・・これらを行なえる　index.html　style.css　script.jsを教えてほしい」、とお願いを明確にしておくことが重要です。また、いろいろ解説してくれますが、結構専門的な説明なので、わからない場合は、完成形のコードがほしい旨を伝えたら完成形をもらえます。
　参考として「自作ビンゴゲームのレポート」の中で紹介したプロンプトを見てもらうと、頼み方が具体的にわかると思います。この例にあるように、AIが理解できるような具体的なプロンプトがスムーズに作り上げるために重要です。

⑥コードができたらテストをして必要なら改善を頼む
　できたコードのテストはindex.htmlをダブルクリックしたらできます。それでやってみて不都合な点や改善したいことがあれば頼むと、改良してくれます。AIと相談しながら、完成させてください。

＜補足：コードの作成例＞
具体的にコードを作ってもらって動作させる方法について、簡単な事例で示します。
①プロンプト
Geminiに次のプロンプトでお願いしました。
「次のindex.html style.css script.js　を作ってください。
画面中央にランダムに九九が一つ「〇×〇＝〇」と表示されます。その下に「次」ボタンがあり、それを押すと、元の九九は消え、新しい九九が表示されます。同じ九九は2度でないようにし、すべての九九が表示されたら終了です。」
こうGeminiにお願いしたら、下記のindex.html style.css script.js　を提示してくれました。
②作成されたコード
index.html
⇒ここから　index.txtをダウンロードして、メモ帳で開いて、拡張子をhtmlに変更して保存してください。
　なお、文字化けしている場合も、右クリックで保存してメモ帳で開きなおしたら解消する場合があります。　メモ帳で開いてから、保存の際に拡張子を変更してください。なお、このメモ帳の文字コードはUTF-8で作成しています。（以下、同様）
style.css
⇒ここから style.txtをダウンロードして、メモ帳で開いて、拡張子をcssに変更して保存してください。

script.js
⇒ここから script.txtをダウンロードして、メモ帳で開いて、拡張子をjsに変更して保存してください。

③以上を一つのフォルダに保存
以上のコードをそれぞれの名前、すなわち　index.html style.css script.js と名前を付けて、任意の一つのフォルダの中にに保存します。
3つのファイルを一つのフォルダに格納したら、「index.html」をダブルクリックしたら下記が始まります。
試しに以上のコードを自分のPCに保存して、作動させてみてください。