ちょっとした社内アプリを生成AIで作成する方法【頭がいい人のChatGPT＆Copilotの使い方】（2/3 ページ）

[橋本大也，ITmedia]

月別に誰が誕生日かを確認できる

　Webページを記述するHTMLと動作を記述するJavaScriptは1つのファイルにまとめることができます。そのほうが、取り扱いが便利なので「1つに統合して」という指示を追加しています。これでコードが書かれて、プログラムができました。

　このHTMLファイルと先ほどのCSVのダミーデータを同じフォルダにおいて、Web ブラウザで表示すると次の図のようになりました。

『頭がいい人のChatGPT＆Copilotの使い方』P.186より

　メニューを選択すると、今度は次の図のようになります。

『頭がいい人のChatGPT＆Copilotの使い方』P.187より

　月別に誰が誕生日かをシンプルに確認ができます。

対話をしながらコードを修正していく

　さらに作り込んでみます。

プロンプト

「もうすぐ誕生日の社員」というコーナーを作って、誕生日が近い5人の社員の情報を「あと〇日」という表示をするようにする

『頭がいい人のChatGPT＆Copilotの使い方』P.187より

　もうすぐ誕生日の社員は表示されましたが、最初に作った月別の確認メニューが消えてしまいました。ちなみに、「もうすぐ」とリクエストしたのに「すぐ」と表示されています。

　2つを同時に表示させたいですよね。生成AI支援のプログラム開発では、1回のプロンプトで思い通りのコードができることは稀（まれ）です。

　対話しながらコードを修正していきます。

プロンプト

プルダウンメニューの確認機能と両方を表示して

──このように入力しました。

　すると、「プルダウンメニューで各月の誕生日の社員のリストを表示する機能と『すぐ誕生日の社員』の両方を含むアプリケーションをHTMLとJavaScript で作成しました。以下のリンクからダウンロードできます」という回答がありました。　

　これでできたアプリケーションの表示が以下の画像です。2つの機能が同時に表示できました。

『頭がいい人のChatGPT＆Copilotの使い方』P.188より

　これでひとまず基本機能は完成です。ここからは外観をブラッシュアップしていきましょう。生成AIは、改善案を相談しながら開発を進めていくことができます。