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

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

①コードは＜index.html＞　＜style.css＞　＜script.js＞で構成する
　コードを書くときは一般的には、＜index.html＞　＜style.css＞　＜script.js＞の３つが1つのフォルダに入っているということが原則です。簡単なプログラムなどはindex.htmlだけでも書けないことはないですが、あとの修正を考えた場合、そのようにしておくことが重要です。また、図が付属しているコードでは必ず同じフォルダ内に図が入っていないといけません。図が多い場合は＜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を使ってhtmlを書くヒントを整理しました。皆さんも、一度作ってみることにチャレンジしましょう。やれば、たぶんすぐにわかると思います。わからなかったらAIに聞けば教えてくれますよ。