Reactを一緒に学ぶ2人
「できた！」の先を、
りことたけると。
AIに頼んだら、アプリが動いた。でも、少し変えたいときに何を頼めばいいんだろう？
そんなところから始まるReactの学習に、2人が付き合います。
仕組みを一緒に確かめる
りこ
小さな違いが、気になる。
「今、変わったのはどの値だろう？」
動いた画面を一緒に眺めながら、仕組みをひとつずつ整理する役。説明が長くなると、まずボタンを押して確かめたくなります。
たけるが先を急ぐときは「その前にひとつだけ」と問いかけます。答えを先に全部話すより、見る場所を示すのがりこのやり方です。
まず作ってみる
たける
思いついたら、作ってみたい。
「これもAIに頼んだら、作れるかな？」
作りたい機能から学び始める役。まずAIに頼み、動くとうれしくなって次の機能を足したくなります。でも、説明できないところでは立ち止まります。
「たぶんこうなる」を口にして試すのが得意。予想が外れたら、りこと一緒に理由を探します。分からないことも、会話の出発点です。
2人と考える
2人と、ひとつ確かめてみよう。
本を探す小さな一覧です。検索の方式を切り替えて、どちらの操作が用途に合うか考えてみてください。
本の一覧に検索をつけたい。AIに「検索をつけて」って頼めばいい？
入力するたびに絞る？ それとも条件を決めてからボタンを押す？ まず、使う人にしてほしい操作を決めよう。
「入門」と入力して試してください。方式を切り替えると入力はリセットされます。
3件の本
- React入門
- TypeScript入門
- 画面設計の基本
この方式では、入力中の値から結果を計算します。検索確定用の値は不要です。
2人の仕様の決め方を読む
この3冊から選ぶなら、入力するだけで絞れる方が手軽だね。ボタンはなくてよさそう。
じゃあ「入力のたびに本のタイトルで絞る。空欄は全件表示」と伝えよう。価格や在庫など条件をまとめて指定する画面なら、確定ボタンを使う案も考えられるね。
同じ「検索」でも必要な操作は変わります。AIへの依頼を具体的にし、その仕様とReactのコードを結びつけるのが、このサイトの実習です。
自分のAIで作る
今度は、自分のAIと作ってみよう。
この検索アプリを作る依頼文から、クリアボタンの追加まで。最初の制作コースで、2人の問いを手がかりに進められます。
AIと検索アプリを作る →stateを学んだあとは、React実験室でカートの更新を比べる →
りことたけるは教材に登場する架空のキャラクターです。記事の制作・訂正については運営・制作方針をご覧ください。