プログラミングを始めたいけれど、何から手をつければいいのかわからない。AIにコードを書いてもらっても、動かし方や直し方で止まってしまうことはありませんか？
最初の一歩として取り組みやすいのは、機能を絞った小さなアプリ作りです。この記事では、クイズアプリを例に、AIの提案を確かめながら開発し、インターネット上に公開するまでの考え方を紹介します。
まずは「１問だけのクイズ」から作る
初めからログイン、成績保存、ランキングまで入れようとすると、確認することが増えます。まずは「問題を表示する」「選択肢を押す」「正誤と解説を表示する」という範囲に絞ってみましょう。
この程度のクイズなら、HTML・CSS・JavaScriptで作れます。AIにはコード作成を手伝ってもらいますが、完成したアプリ自体にAI機能を入れる必要はありません。外部APIやデータベースも使わずに始められます。
最初に決めておきたい動作
・問題文と３つの選択肢を表示する
・回答後に正解・不正解と解説を表示する
・同じ問題には２回回答できないようにする
・ページを再読み込みすると最初に戻る
１問分が動いたら、３問に増やす、最後に得点を表示する、と順番に追加します。変更を小さくすると、不具合が出たときに、どの変更が関係しているかを調べやすくなります。
AIと開発を進める３つのコツ
① 作りたい動作を具体的に伝える
「クイズアプリを作って」だけでなく、画面に何を表示し、ボタンを押したらどうなるかを伝えます。最初は１問だけにし、ファイルの保存場所や実行方法も一緒に説明してもらいましょう。
② コードの説明と実際の動きを照らし合わせる
「正解かどうかは、どこで判定している？」など、処理を絞って質問します。そのうえで問題文や選択肢を変更し、自分が予想したとおりに動くか確かめてみてください。
③ 正常な操作以外も試す
正解を選ぶだけでなく、不正解を選ぶ、回答ボタンを続けて押す、途中で再読み込みする、といった操作も試します。AIの「修正しました」という説明だけで完了とせず、自分の画面で確認することが大切です。
エラーが出たら、起きたことを整理する
動かないときは、「期待する動作」「実際の動作」「操作の順番」を分けて伝えましょう。例えば「回答後に次へを押すと２問目へ進むはずなのに、１問目のまま」と書けば、調べる対象が具体的になります。
エラーメッセージがあれば、関連するコードと一緒に提示します。ただし、APIキーや個人情報などが含まれていないか確認してください。修正後は、不具合が直ったことに加えて、それまで動いていた機能も確かめます。
原因と変更内容を短く残しておくと、次に似た問題が起きたときの手掛かりになります。エラー対応も、プログラムの仕組みを学ぶ機会として活用していきましょう。
動作を確認したら、公開まで進める
作成したアプリを公開先へ配置し、利用できる状態にすることを「デプロイ」といいます。今回のようなHTML・CSS・JavaScriptで動くアプリは、静的サイトを公開できるサービスを使う方法があります。
公開前には、個人情報や秘密の認証情報がファイルに入っていないか確認しましょう。ブラウザに配信するJavaScriptの内容は利用者から確認できるため、秘密のAPIキーを入れてはいけません。
公開後も、URLを開いて問題の表示や回答判定を確認します。パソコンで動いていても、公開先でファイルが読み込めなかったり、スマートフォンではボタンが押しにくかったりすることがあるためです。
まずは１つの機能を、自分で説明できるように
最初からすべての文法を覚える必要はありません。作ったものを動かし、「このボタンを押すと、どの処理が実行されるのか」を一つずつ確かめていきましょう。
HPの記事では、開発環境の準備、AIへの依頼文、動作確認の項目、GitHub Pagesで公開する手順をまとめています。小さなクイズアプリを題材に、作成から公開まで進めたい方は参考にしてください。