先生と生徒の会話形式で理解しよう

生徒

「先生、ReactとJavaScriptってどういう関係なんですか？別々のものなんですか？」

先生

「ReactはJavaScriptで作られたライブラリなので、実はとても深い関係があります。Reactだけを学んでも、JavaScriptが分からないと使いこなせないんですよ。」

生徒

「なるほど。でもなぜ一緒に学ぶ必要があるんでしょう？」

先生

「それを今から丁寧に解説していきましょう！」

1. ReactはJavaScriptで作られている

ReactはFacebook（現Meta）が開発したJavaScriptライブラリです。ライブラリとは、便利な道具がまとめられた「ツールセット」のようなものです。つまりReactはJavaScriptで動いており、JavaScriptを知らずにReactを学ぶのは「文字を読めないのに小説を読もうとする」ようなものなのです。

例えばReactで画面に文字を表示したり、ボタンをクリックしたときに動作を変えたりするのは、裏側ですべてJavaScriptが働いています。Reactはあくまで「効率よく開発できる仕組み」であり、基盤には必ずJavaScriptがあるのです。

2. JavaScriptが分からないとReactは理解できない

JavaScriptはWebサイトを動かすためのプログラミング言語です。ボタンを押すと画面が変わる、入力した内容をチェックする、アニメーションを表示する、などの仕組みを作れます。ReactはそのJavaScriptの上に成り立っています。

例えばReactで状態を管理するuseStateという仕組みを使うときも、変数や関数の考え方が必要です。これらはすべてJavaScriptの基礎知識がなければ理解できません。逆にJavaScriptを理解していれば、Reactのコードを見ても「これは変数だ」「これは関数だ」とすぐに分かるようになります。


import React, { useState } from "react";

function App() {
  const [message, setMessage] = useState("こんにちは！");

  return (
    <div>
      <h1>{message}</h1>
      <button onClick={() => setMessage("ボタンがクリックされました！")}>
        クリックしてみよう
      </button>
    </div>
  );
}

export default App;

（画面に「こんにちは！」と表示され、ボタンを押すと「ボタンがクリックされました！」に変わります）

3. ReactとJavaScriptの役割分担をイメージしよう

分かりやすい例えをすると、JavaScriptは「料理を作るための基礎的な料理スキル」で、Reactは「効率よく料理を作るための便利な調理器具」です。料理の基礎を知らない人が最新の調理器具を持っても使いこなせませんよね。同じように、JavaScriptを理解してこそ、Reactの便利さを活かせるのです。

Reactのコンポーネントやフック（useStateやuseEffectなど）は、すべてJavaScriptの文法や仕組みに基づいています。だから「ReactとJavaScriptはセットで学ぶべき」と言われるのです。