非エンジニアの私ですが、AIと対話しながらノリとバイブスでコードを書く「Vibe Coding（バイブコーディング）」を楽しんでいます。
でも最近、どうしても無視できないことがあります。AIが必ず「React（リアクト）」を推してくるんです。
- 「タスク管理アプリ作りたい」→ AI「Reactで作りましょう」
- 「ポートフォリオサイト作って」→ またReact
- 「簡単なゲーム作って」→ やっぱりReact
正直、最初は「なんか難しそうだし、プロの話でしょ？」と思って無視していました。
でも、あまりにもAIが推してくるので仕方なく調べてみたら、「あ、これ概念だけでも知っておくと、AIへの指示が10倍上手くなるやつだ」と気づいたんです。
この記事では、私と同じVibe Coderに向けて、「Reactって何？」「なぜ知っておくとバイブコーディングが捗るのか？」をまとめます。
1. React（リアクト）とは？
一言で言うと、Meta社（旧Facebook）が作った「Webサイトをスマホアプリのようにサクサク動かすための技術」です。
「紙芝居」ではなく「レゴブロック」
従来のWebサイト作りが、ページごとに一枚の絵を描く「紙芝居」だとしたら、Reactは「レゴブロック」です。
- ヘッダーというブロック
- ボタンというブロック
- 商品カードというブロック
これらをあらかじめ作っておき、ガチャンと組み合わせてページを作ります。
また、普通のサイトはリンクを押すと画面全体が読み込まれますが、Reactは「変わったブロックだけを差し替える」動きをします。だから、InstagramやNetflixのように、画面が白くならずに「ヌルサク」動くのです。
2. なぜAIはそんなに「React」を使いたがるのか？
私たちが頼んでいないのに、なぜAIはReactを使おうとするのでしょうか？ 理由はシンプルに2つです。
① AIにとっての「教科書」が一番多いから
Reactは世界で一番人気のある技術です。つまり、ネット上に正解データや教科書が山のようにあります。
AIはそれらを大量に学習しているので、Reactのコードを書かせると、他の技術よりもミスが少なく、圧倒的に優秀なコードを書けるのです。
② 「動き」のある複雑なアプリに強いから
「いいねボタンを押したら数字が増える」
「カートに商品を追加したら合計金額が変わる」
「チャットがリアルタイムで届く」
こういう動きを普通のやり方で作るとコードがぐちゃぐちゃになりがちですが、Reactならブロック単位で整理して書けます。バイブコーディングで「ちょっと凝ったもの」を作ろうとすると、自然とReactが必要になってきます。
AIにとっても、「Reactで書いたほうがバグを出しにくい」という事情があるのです。
3. 知っておくと「指示出し」が劇的に変わる3つの概念
「自分でコードを書くわけじゃないし……」と思うかもしれませんが、Reactの仕組みを少し知るだけで、AIへの指示（プロンプト）の解像度が爆上がりします。
明日から使える「3つの魔法の概念」を紹介します。
① コンポーネント ＝ 「部品ごとに指示できる」
Reactはサイトを「コンポーネント（部品）」の集まりとして扱います。これを知っていると、修正指示が具体的になります。
- 今までの指示：「画面の右上のあたりを青くして」→ AI「どこ？全体？」と迷う
- React的な指示：「ヘッダーコンポーネントの背景色を青にして。他の部分には影響させないで」→ AI「了解。ヘッダーの部品だけ直します」
「コンポーネント」という言葉を使うだけで、修正による「全体のデザイン崩れ」が激減します。
② State（ステート） ＝ 「変化するデータの名前」
「いいね数」「カートの中身」「ログイン状態」など、変化するデータをReactでは「State（ステート）」と呼びます。
- 今までの指示：「なんかボタン押しても数字が変わらないんだけど？」→ AIは何が原因か総当たりで探す
- React的な指示：「ボタンを押した時に、カウントのState（ステート）が更新されていないみたい。useStateの処理を確認して」→ AI「一発で理解しました。データの更新処理を直します」
State や useState という単語は、AIにとっての「特効薬」です。動かない時のツッコミが鋭くなります。
③ 再利用 ＝ 「一度作ったものは使い回せる」
レゴブロックは何度でも使えますよね。Reactも同じです。
- React的な指示：「さっき作った『商品カードコンポーネント』を、トップページでも再利用して」
こう伝えるだけで、AIは無駄なコードを書かず、同じデザイン・同じ動きのカードを量産してくれます。
4. 実際のバイブコーディングでの違い
「TODOアプリにチェックボックスを追加したい」という場面で比較してみましょう。
- ❌ Reactを知らない指示「タスクの左側にチェックボックスつけて。押したら色が変わるようにして」（AIは「HTMLを書き換える？JavaScriptで制御する？」と迷い、コードが複雑になる）
- ⭕️ React的な指示「TodoItemコンポーネントにチェックボックスを追加して。完了状態をStateで管理して、完了ならスタイルを変更して」（AIは一発で意図を理解し、完璧なコードを返す）
この差が、開発スピードの差になります。
5. 結論：私たちはReactを書けなくていい
調べてみてわかったのは、「非エンジニアがReactをイチから勉強して書けるようになる必要はない」ということです。書くのはあくまでAIの仕事。
ただ、「監督（私たち）」が「役者（React）」の特徴を知っていれば、もっと良い映画が撮れるのと同じこと。
- コンポーネント（部品）
- State（変化するデータ）
- 再利用（使い回し）
この3つを覚えるだけで、バイブコーディングが「なんとなく動いた」から「狙い通りに作れた」に変わります。
次にAIが「Reactで作りますか？」と聞いてきたら
食わず嫌いせずに、こう答えてみてください。
「OK、Reactで行こう。コンポーネント構成を先に提案して」
きっと、今までとは違うレベルのアウトプットが返ってくるはずです。
そして、動かないときは「このコンポーネントのStateがおかしい」、デザインを変えたいときは「このコンポーネントだけ修正して」と、具体的に指示してみてください。
AIとの会話が、まるでエンジニアと仕事をしているかのようにスムーズになりますよ。AIという優秀なエンジニアと、Reactという共通言語で、最高のバイブコーディングを楽しんでいきましょう！
参考までに。それでは！
コメント