はじめに

この記事は、Reactを学ぶ中で得た知識や感じたことを記録したメモをまとめたものです。エンジニア初学者として学習する中で気づいたポイントや躓いた部分を整理し、後から振り返った際に役立てるとともに、Reactを学び始めた方々にも少しでも参考になる内容になれば幸いです。

JSX構文とは

Reactでは、JSX構文というHTMLに似た構文を使用してUIを定義する。JSXを使うと、HTMLのような記述でコンポーネントの構造をわかりやすく表現することができる。
JSX（JavaScript XML）は、JavaScriptの中でHTMLのような構文を記述できる機能。以下のように、JSXを使用するとUIを直感的に記述することができる。

const element = <h1>Hello world!</h1>;

このコードは、ブラウザがそのまま理解できるHTMLではなく、JavaScriptコードに変換されてから実行される。

JSXをJavaScriptに変換する方法

JSXをそのままブラウザに読み込むことはできないため、Babelというソフトウェアを使ってJavaScriptに変換する。Babelは、JSX構文をJavaScriptのオブジェクト形式に変換する役割を果たす。

Babelを利用するには、HTMLファイルの<head>タグに以下のスクリプトを追加する。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>

このスクリプトにより、ブラウザ上でBabelを動作させることが可能になる。

JSXを使用する際の記述方法

JSXを利用するには、<script>タグのtype属性をtext/babelに設定。これにより、ブラウザはBabelを使用してJSXをJavaScriptに変換する。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSXの基本</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>

  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(<h1> Hello world! </h1>);
  </script>
</body>
</html>

仮想DOMとは

Reactは、UIの効率的な更新を実現するために仮想DOMを使用する。仮想DOMは、ブラウザの実際のDOMとは別に、軽量なコピーをメモリ上に保持する仕組み。

実際のDOMとは？

実際のDOM（ブラウザのDOM）は、HTMLドキュメントを元にブラウザが構築するツリー状のデータ構造。これを使うことで、Webページの内容を操作や更新が可能。

<h1 id="title">こんにちは</h1>

上記HTMLは以下のようなDOMツリーとしてブラウザに保存される。

- h1 (id: title)
  - テキストノード: "こんにちは"

一方、仮想DOMではこのHTMLを以下のようにJavaScriptオブジェクトで表現する。

{
  type: "h1",
  props: { id: "title" },
  children: ["こんにちは"]
}

仮想DOMの仕組み

1. 軽量なJavaScriptオブジェクト

仮想DOMは、実際のDOMではなく、JavaScriptオブジェクトとして表現される。これにより、実際のDOM操作よりも高速に動作する。

2. 変更箇所の効率的な追跡

Reactは仮想DOMの古い状態と新しい状態を比較して、変更が必要な部分だけを実際のDOMに反映する。これにより、ブラウザへの負荷を最小限に抑えながら、高速なUIの更新を実現。

3. React.createElementの役割

JSXを使って記述されたコードは、Babelを通じてReact.createElement関数が呼び出され、仮想DOMが生成される。

仮想DOMと実際のDOMの更新の流れ

Reactの仮想DOMは、次のような流れでUIを更新する。

仮想DOMを生成:
JSXで記述されたUI（例: <h1>こんにちは</h1>）は、仮想DOMのJavaScriptオブジェクト（例: { type: "h1", children: ["こんにちは"] }）として作成される。
仮想DOMを比較:
UIが変更されると、新しい仮想DOMを作り、以前の仮想DOMと比較する（これを「差分計算」という）。
差分のみを実際のDOMに反映:
差分計算で見つかった変更箇所だけを実際のDOMに反映。これにより、ブラウザの負担を最小限に抑えつつ、高速にUIを更新する。

JSXの基本的なルール

1. 1つの要素で囲む

JSXでは、複数の要素を返す場合、すべてを1つの親要素で囲む必要がある。

return (
  <div>
    <h1>タイトル</h1>
    <p>説明文です。</p>
  </div>
);

2. JavaScriptの式を埋め込む

JSX内で{}を使うと、JavaScriptの式を埋め込むことができる。

const name = '太郎';
const element = <h1>こんにちは、{name}さん！</h1>;

3. クラス名の指定

HTMLのclass属性は、JSXではclassNameとして記述する。

const element = <div className="container">内容</div>;