Chapter 4: Reactを始めよう

ここから React を導入します。前章まで命令的に操作していた DOM を，React の力で宣言的に記述できるように変えていきましょう。

CDN から React を読み込む

学習用のシンプルなプロジェクトでは，CDN 版のスクリプトを読み込むだけで React を利用できます。index.html を次のように更新します。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="text/javascript">
      const app = document.getElementById('app');
      const header = document.createElement('h1');
      const text = 'Develop. Preview. Ship.';
      const headerContent = document.createTextNode(text);
      header.appendChild(headerContent);
      app.appendChild(header);
    </script>
  </body>
</html>

react：React のコア機能
react-dom：React から DOM を扱うためのメソッド集

Tip

今回は理解を深めるため CDN 版をそのまま利用します。実際の開発ではビルドツール（Vite や Next.js）が同等の設定を内部で行ってくれます。

React らしい書き方へ置き換える

次は DOM 操作を手書きする代わりに，ReactDOM.createRoot() と root.render() を使ってみましょう。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script>
      const app = document.getElementById('app');
      const root = ReactDOM.createRoot(app);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

createRoot で React の「描画先」を登録し，render に表示したい UI を宣言しています。これで DOM API を細かく書かなくても <h1> を描画できるようになる……はずですが，実際にブラウザで確認するとエラーが出ます。

JSX と Babel

ブラウザのコンソールには次のようなエラーが表示されます。

Uncaught SyntaxError: expected expression, got '<'

原因は <h1>...</h1> の部分が JSX と呼ばれる構文だからです。JSX は HTML に似た記法で UI を表現できる一方，ブラウザはそのままでは解釈できません。

そこで JavaScript コンパイラである Babel を追加します。

index.html

<html>
  <body>
    <div id="app"></div>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- Babel を追加 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/jsx">
      const domNode = document.getElementById('app');
      const root = ReactDOM.createRoot(domNode);
      root.render(<h1>Develop. Preview. Ship.</h1>);
    </script>
  </body>
</html>

<script type="text/jsx"> の指定によって，Babel が内部で JSX を通常の JavaScript に変換してくれるようになります。これでエラーが解消され，React が DOM を描画できるようになりました。

React と命令的コードを比較する

スタイル	コードの特徴
命令的（前章）	DOM API を使って要素を生成し，テキストをセットし，最後に挿入
宣言的（React）	`render(<h1>...</h1>)` と書くだけで，DOM 操作は React 側に任せられる

React 化したコードは非常に短く，UI の意図が読み取りやすいことが分かります。

<script type="text/jsx">
  const domNode = document.getElementById('app');
  const root = ReactDOM.createRoot(domNode);
  root.render(<h1>Develop. Preview. Ship.</h1>);
</script>

React を扱ううえで押さえておきたい JavaScript

React は JavaScript の拡張ではなく，あくまでライブラリです。そのため，次のような言語仕様に慣れておくと学習がスムーズになります。

関数宣言とアロー関数
オブジェクトと配列（および配列メソッド）
分割代入・テンプレートリテラル
三項演算子
ES Modules（import / export）

もっと掘り下げたいときは

次のステップ

React を導入できたので，次はコンポーネントという考え方を深掘りしていきます。関数として UI を組み立て，部品を組み合わせる流れを確認しましょう。