ReactをAIと一緒に学んでみた話｜Laravel使いが感じた戸惑いと気づき

「Reactの需要が高い」と感じてから学び始めたものの、Laravelとは全然違う構成にまず戸惑いました。そこで頼ったのがClaude。わからない部分を質問しながら学んだ経験を、Laravel使いの視点から正直に書きます。

はじめに

フリーランスエンジニアとして案件を探しているとき、ある傾向に気づきました。

Reactのスキルを求める案件が、思っていたより多い。

「Laravelだけでやっていこう」と思っていましたが、フロントエンドとしてReactが書けるかどうかで取れる案件の幅が変わることを実感しました。ただ学び始めると想像以上に「別の世界」でした。LaravelエンジニアがReactを学んでいく中で感じたこと、AIをどう使って理解を深めたかを書きます。

この記事でわかること

Reactを学び始めた理由
LaravelとReactで何が違うのか
最初に戸惑ったこと
わからないときにAIをどう使ったか
学んでみて感じたこと

Reactを学び始めた理由：案件の需要

フリーランスとして案件を探すとき、クラウドソーシングや求人サイトの募集要件を見ていると、Reactを使えるエンジニアへの需要の高さを感じました。

Laravel単体の案件はもちろんありますが、「Laravel + React」「バックエンドLaravel・フロントエンドReact」という構成の案件も多く見かけます。両方書けると、取れる案件の選択肢が広がる。

「今の自分にはまだ早いかも」という気持ちもありましたが、需要がある技術は早めに触れておいた方がいいと判断して、学習を始めました。

最初の戸惑い：Laravelとは構成が全然違う

Reactを学び始めて最初に感じたのは、「Laravelと何もかも違う」という戸惑いでした。

Laravelはバックエンドのフレームワークで、MVCという考え方が軸です。Model・Controller・Viewという役割分担があって、「どこに何を書くか」の構成がわかりやすい。

Reactはフロントエンドのライブラリで、コンポーネントという考え方が軸です。UIを部品に分けて、それを組み合わせて画面を作る。

この「部品に分ける」という考え方が、最初はなかなか腑に落ちませんでした。

function Button({ label, onClick }) {
  return <button onClick={onClick}>{label}</button>;
}

「このButtonコンポーネントが、画面のどこかで使われる」という感覚が、最初はピンと来なかったです。Laravelで言えばBladeテンプレートを細かく分割して再利用する感覚に近いですが、書き方も考え方も全然違います。

JSXで混乱した

最初に「なんだこれ」と思ったのはJSXです。

// JavaScriptの中にHTMLが書いてある？
function Welcome() {
  return (
    <div>
      <h1>こんにちは</h1>
      <p>Reactを学んでいます</p>
    </div>
  );
}

JavaScriptの中にHTMLが混ざっている。最初に見たとき「これは何？」と思いました。

Laravelだと、PHPファイルとBladeファイルは別々です。Reactでは、JavaScriptとHTMLが同じファイルに共存している（厳密にはHTMLではなくJSXですが）。この感覚の違いに慣れるまで時間がかかりました。

stateとpropsで詰まった

Reactで一番最初に詰まったのは、stateとpropsの違いです。

// propsは親から渡されるデータ
function Greeting({ name }) {
  return <h1>こんにちは、{name}さん</h1>;
}

// stateはコンポーネント内部で管理するデータ
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}回クリックされました</p>
      <button onClick={() => setCount(count + 1)}>
        クリック
      </button>
    </div>
  );
}

「propsは外から受け取るデータで、stateは内部で管理するデータ」という説明を読んでも、最初はいまいち実感が湧きませんでした。

わからないときにClaudeに質問した

詰まったとき、Claudeに「こういう理解で合っていますか？」と確認する使い方が自分には合っていました。

例えばstateとpropsで迷ったとき、こんな質問をしました。

stateとpropsの違いが理解できていない気がします。
自分の理解では「propsは親コンポーネントから渡されるもの、
stateはそのコンポーネント自身が持つ値」だと思っていますが、
合っていますか？具体例で教えてください。

返ってきた回答で、「stateはコンポーネントが自分で管理するデータで、変わったときに再レンダリングが起きる」という部分を説明してもらってから、やっとイメージがつながりました。

「テキストを読んでわからない→自分なりの理解をClaudeに確認してもらう→間違っている部分を訂正してもらう」という流れが、自分には一番理解が深まる使い方でした。

useEffectも最初は謎だった

useEffect(() => {
  // コンポーネントがマウントされたときに実行
  fetchData();

  return () => {
    // クリーンアップ処理
  };
}, [依存配列]);

useEffectは「副作用を扱うためのHook」という説明を読んでも最初は「副作用って何？」という状態でした。Claudeに依存配列の違いを具体的なコード例付きで説明してもらってから「依存配列はuseEffectを実行するタイミングを制御するものか」と理解できました。

LaravelとReactの知識のつながり

全然違うと思っていたLaravelとReactですが、学んでいくうちに通じる部分も見えてきました。

APIとしてつながる感覚

LaravelでAPIを作って、ReactがそのAPIを叩いてデータを表示する——という構成を理解してから、「LaravelとReactは別々のものではなく、バックエンドとフロントエンドとして組み合わせる」という全体像が見えました。

// ReactからLaravelのAPIを叩く例
useEffect(() => {
  fetch('/api/products')
    .then(res => res.json())
    .then(data => setProducts(data));
}, []);

Laravelで作ったAPIのエンドポイントを、Reactで受け取る。自分がLaravelで書いてきたコードが、フロントエンドから使われるイメージが湧いてから、学習のモチベーションが上がりました。

AIと一緒に学んで感じたこと

React学習でAIを使って気づいたのは、「わからないことを言語化する力」が上がったことです。

「なんかわからない」の状態でClaudeに聞いても、いまいちな答えしか返ってきません。「自分はこういう理解をしているが、この部分が合っているか確認したい」と質問すると、的確な回答が来ます。

Claudeに質問するために、自分の理解を整理する必要がある。この「整理する」プロセス自体が、理解を深める助けになっていました。

まだ道半ば

正直に言うと、Reactはまだ学習中です。基本的なコンポーネント・state・props・useEffectは使えるようになりましたが、より複雑な状態管理（ReduxやRecoilなど）はまだ十分に理解できていません。

ただ、「案件の需要があるから学ぶ」という明確な理由があるので、継続できています。LaravelとReactを組み合わせた案件に対応できるレベルを目指して、引き続き学習中です。

まとめ

LaravelエンジニアがReactを学ぶのは、「全然別のものを学ぶ」という感覚でした。コンポーネント・JSX・state・props・useEffect——ひとつひとつ戸惑いながら、Claudeに確認しながら進んできました。

AIを使った学習で良かったのは、「自分の理解が合っているかを確認できること」です。テキストを読むだけでは「わかったつもり」になりがちですが、Claudeに自分の理解を説明して確認してもらうことで、「本当にわかっているか」が明確になりました。

需要があると感じたから学び始めたReact。まだ完璧ではありませんが、一歩ずつ前に進んでいます。