はじめの制作コース
AIと検索アプリを作ろう。
検索の仕様を決め、AIに作ってもらい、Reactの実装を読み解く実習です。JavaScriptの関数・配列の基礎を使います。
ステップ 1 / 4
AIに依頼する
まず、作りたい検索を決める
手元の短い一覧を探すなら、入力のたびに絞る方式が便利です。複数の条件をまとめて指定したいなら、ボタンで確定する方式が候補になります。どちらも正しい仕様です。下の見本で操作を比べてください。
「入門」と入力して試してください。方式を切り替えると入力はリセットされます。
3件の本
- React入門
- TypeScript入門
- 画面設計の基本
この方式では、入力中の値から結果を計算します。検索確定用の値は不要です。
この実習ではボタンで確定する方式を作ります。目的は、当たり前に見える動作を「入力」「確定」「リセット」の仕様に分け、AIへの依頼とReactのコードを結びつけることです。
普段使っているAIチャットやコーディング支援ツールへ、下の依頼文を貼り付けます。このサイトにAIチャットは内蔵していません。利用するサービスのアカウントや料金は、そのサービスの条件に従います。
JavaScriptの関数・配列が分かる方を想定しています。Reactの実行環境がまだなくても、次のステップにある生成例をサイト内で操作できます。
りこのヒント：なぜ「検索ボタンを押すまで」と指定する？
入力のたびに検索するアプリも正しい設計です。ボタンを置くだけで検索のタイミングが決まるわけではありません。入力イベントで絞るか、フォーム送信で確定するかをコードにする必要があります。今回は確定する方式を依頼します。
AIの回答は毎回同じとは限りません。次のステップで、得られたコードをこの依頼の条件と照合します。
回答は画面内だけで保持し、再読み込みすると消えます。AIへの送信や自動採点は行いません。