Reactの基礎：JSX編

Reactは、ユーザーインターフェース（UI）を作成するためのJavaScriptライブラリです。Reactの特徴の1つが、HTMLに似た構文でUIを記述できるJSX（JavaScript XML）です。JSXは直感的で分かりやすく、コンポーネントの作成や管理を効率的に行える便利な仕組みです。この記事では、Reactの基礎となるJSXについて、具体的な使い方や特徴を解説します。

[目次を開く]

1. JSXとは？ JSXの基本構文 2. JSXの基本ルール 1. 1つの親要素で囲む 2. JavaScriptの式を使う 3. 属性の設定 3. JSXの特徴 1. 条件付きレンダリング 2. 配列を使ったループレンダリング 3. スタイルの適用 4. JSXとHTMLの違い 5. JSXを使ったコンポーネントの例まとめ

1. JSXとは？

JSXは、HTMLに似た構文をJavaScriptの中で使えるようにしたものです。見た目はHTMLに近いですが、JSXはJavaScriptの文法に従っているため、JavaScriptの表現力を活かしながらUIを定義できる点が特徴です。

JSXの基本構文

const element = <h1>Hello, React!</h1>;

上記のコードは、HTMLのように見えますが、実際にはJavaScriptの中で使用されています。この<h1>タグは、Reactが解釈してブラウザにレンダリングされます。JSXを使うことで、UIを直感的に記述できます。

2. JSXの基本ルール

1. 1つの親要素で囲む

JSXのルールとして、複数の要素を返す際には、必ず1つの親要素で囲む必要があります。次の例では、複数の要素が<div>で包まれています。

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to React.</p>
    </div>
  );
}

ただし、余計な<div>を使いたくない場合は、Reactのフラグメントを使うこともできます。

function App() {
  return (
    <>
      <h1>Hello, World!</h1>
      <p>Welcome to React.</p>
    </>
  );
}

<>と</>で囲むことで、不要なDOM要素を生成せずに複数の要素を返せます。

2. JavaScriptの式を使う

JSX内では、JavaScriptの式を中括弧 {} を使って埋め込むことができます。例えば、変数や関数の結果をUIに反映することができます。

const name = "Alice";
const element = <h1>Hello, {name}!</h1>;

また、式だけでなく、関数を呼び出すことも可能です。

function formatName(user) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: "John", lastName: "Doe" };
const element = <h1>Hello, {formatName(user)}!</h1>;

3. 属性の設定

JSXでは、HTMLタグと同様に属性を設定することができます。ただし、ReactではHTMLの属性名とは異なるキャメルケースのプロパティ名が使用されます。たとえば、classはclassName、forはhtmlForに変わります。

const element = <div className="container">Hello, React!</div>;

また、プロパティには式を直接渡すことができます。

const isLoggedIn = true;
const element = <button disabled={!isLoggedIn}>ログイン</button>;

3. JSXの特徴

1. 条件付きレンダリング

JSXでは、条件に応じてUIを動的に変更することができます。if文や三項演算子を使って、レンダリングするコンテンツを切り替えることが可能です。

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  } else {
    return <h1>Please sign up.</h1>;
  }
}

また、よりシンプルな三項演算子を使うこともできます。

const isLoggedIn = true;
const element = <h1>{isLoggedIn ? "Welcome back!" : "Please sign up."}</h1>;

2. 配列を使ったループレンダリング

複数の要素をリストで表示する場合、JSXではJavaScriptの配列メソッドを使って要素を繰り返しレンダリングすることができます。たとえば、map()メソッドを使って、配列の要素をUIに反映させます。

const items = ["Apple", "Banana", "Orange"];

function ItemList() {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
}

この例では、items配列の各要素を<li>タグとしてレンダリングしています。各要素にはkeyという一意のキーを指定する必要があります。これにより、Reactは要素の識別や更新を効率的に行うことができます。

3. スタイルの適用

JSXでは、インラインでスタイルを適用することができますが、JavaScriptのオブジェクトとしてスタイルを指定する必要があります。スタイルのプロパティ名はキャメルケースで記述します。

const element = <div style={{ color: "blue", fontSize: "20px" }}>Hello, React!</div>;

また、外部のCSSファイルを読み込んでクラスを適用することもできます。

import './App.css';

function App() {
  return <div className="container">Hello, React!</div>;
}

4. JSXとHTMLの違い

JSXはHTMLに似ていますが、いくつかの違いがあります。以下は主な相違点です。

属性名: JSXでは、HTMLの属性名と異なる名前を使います。例えば、classはclassName、onclickはonClickになります。
閉じタグが必要: JSXでは、すべてのタグを閉じる必要があります。自己終了タグ（<img />など）も、スラッシュで閉じる必要があります。
JavaScriptの式を使用: JSX内でJavaScriptの式を使うには、中括弧 {} を使用します。

5. JSXを使ったコンポーネントの例

ここまでの知識を使って、シンプルなReactコンポーネントを作ってみましょう。以下は、名前を入力すると挨拶を表示するコンポーネントです。

import React, { useState } from "react";

function Greeting() {
  const [name, setName] = useState("");

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        placeholder="Enter your name"
      />
      <h1>Hello, {name ? name : "Guest"}!</h1>
    </div>
  );
}

export default Greeting;

useState: Reactのフックを使って、nameという状態を管理します。
onChangeイベント: テキストボックスに入力があるたびにsetName関数が呼ばれ、入力された値が状態に反映されます。

まとめ

JSXは、ReactでUIを作成するための強力で直感的な仕組みです。HTMLに似た構文でありながら、JavaScriptのパワフルな表現力を活用して、動的なUIを簡単に構築できます。今回紹介したJSXの基本ルールや、式や属性の使い方、条件付きレンダリングなどを理解することで、Reactを使った開発がさらに楽しくなるでしょう。

アルアカ - Arcadia Academia