React JSX

JSX（JavaScript XML）は XML のように見える JavaScript の構文拡張です。React では UI コンポーネントを記述するために通常の JavaScript の代わりによく使われ、HTML のような方法でコンポーネントの構造と動作を記述できます。

JSX の使用は必須ではありませんが、以下の中心的な利点があります。

• 実行効率が高い：JavaScript コードにコンパイルされた後、最適化され、実行速度が速くなります。
• 型安全性：コンパイル段階でエラーを発見できます（TypeScript と組み合わせるとさらに効果的です）。
• 記述が簡単：UI 構造が直感的で明確になり、JavaScript 式の埋め込みがより柔軟になり、テンプレートを簡単かつ迅速に記述できます。
• 本質的な特性：文字列や HTML ではなく、Babel（Vite に組み込み）によって React.createElement 呼び出しにコンパイルされます。

まず次のコードを見てみましょう。

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

この一見奇妙に見えるタグ構文は、文字列でも HTML でもありません。

これは JSX と呼ばれ、JavaScript の構文拡張です。React でユーザーインターフェースを記述するために JSX を使用することをお勧めします。

JSX は JavaScript 内部で実装されています。

要素が React アプリケーションを構成する最小単位であることはご存じのとおりですが、JSX は React 内の要素を宣言するために使用されます。

ブラウザの DOM 要素とは異なり、React 内の要素は実際には普通のオブジェクトであり、React DOM はブラウザ DOM のデータ内容が React 要素と一致することを保証できます。

React 要素をルート DOM ノードにレンダリングするには、それらをすべて ReactDOM.render() メソッドに渡してページ上にレンダリングします。

注意：

JSX は JavaScript そのものであるため、一部の識別子はclassとforXML 属性名として推奨されません。代わりに、React DOM は ... を使用します。classNameとhtmlForを対応する属性として使用します。

---

JSX 構文規則

JSX は HTML のように見えますが、厳密な規則があります。

タグを閉じる必要があります：

• HTML では省略できます<br>が、JSX では必須です<br />（自己終了タグ）。
• すべてのタグを閉じる必要があります：<div></div>。

class → className：

class は JavaScript のキーワードであるため、className を使用します。

<div className="container">内容</div>

htmlFor（ラベル内）：

<label for="id"> → <label htmlFor="id">

大文字で始まるコンポーネント：

カスタムコンポーネントは大文字で始まる必要があります（小文字は HTML タグとみなされます）。

<Card />  {/* 正确，自定义组件 */}
<card />  {/* 错误，会被当成 <card> HTML 标签 */}

コメント：

用 {/* コメント内容 */}。

jsx{/* 这是一个 JSX 注释 */}

ルート要素：

return はルートノードを 1 つだけ持つことができます。

return (
  <>  {/* 碎片 Fragment，空标签，不渲染 DOM */}
    <h1>标题</h1>
    <p>段落</p>
  </>
);

src/App.jsx を開き、return を次のように変更します：

return (
  <>
    <h1 className="title">JSX 语法规则演示</h1>
    <img src="../vite.svg.html" alt="Vite Logo" />
    <br />
    {/* 自闭合标签和注释 */}
    <p>注意 className 和闭合标签</p>
  </>
);

保存して効果を確認します。

---

式の埋め込み、条件付きレンダリング、リストレンダリング

JSX の最も強力な点は、{} を使用して JavaScript 式を埋め込めることです（式のみで、if/for のような文は使用できません）。

式の埋め込み

有効な JS 式はすべて {} の中に入れることができます。{}：

const name = 'サンプル';
const now = new Date().toLocaleString();

return (
  <div>
    <h1>你好，{name}！</h1>
    <p>当前时间：{now}</p>
    <p>计算结果：{2 + 3 * 5}</p>  {/* 17 */}
  </div>
);

条件付きレンダリング

三項演算子または ... を使用します。&&：

const isLoggedIn = true;
const count = 0;

return (
  <div>
    {isLoggedIn ? <h1>欢迎回来，{name}！</h1> : <h1>请登录</h1>}
    
    {count > 0 && <p>你有 {count} 条未读消息</p>}  {/* count 为 0 时不渲染 */}
  </div>
);

避けるべきこと：if 文を JSX 内で直接使わないでください（関数本体では使用できます）。

リストレンダリング（key の重要性）

map() を使用して配列をレンダリングする場合、各要素に key 属性（一意の識別子。React が DOM を効率的に更新するのに役立ちます）を付ける必要があります。

const items = [
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橙子' },
];

return (
  <ul>
    {items.map(item => (
      <li key={item.id}>  {/* key 必须唯一且稳定！ */}
        {item.name}
      </li>
    ))}
  </ul>
);

key の重要性：

• key がない場合：React が警告し、レンダリングエラーを引き起こす可能性があります（特にリストが動的に変化する場合）。
• 悪い習慣：index を key として使うこと（key={index}）。リストの順序が変わると、不要な再レンダリングや状態の喪失を引き起こす可能性があります。
• ベストプラクティス：データ内の一意の ID（データベースの id など）を使用します。

スタイル処理

React には複数のスタイル方法がありますが、まず最も基本的な 2 つを学びましょう。

インラインスタイル

style 属性を使用し、値はオブジェクト（キャメルケース）です：

return (
  <div
    style={{
      backgroundColor: '#F0F0F0',
      padding: '20px',
      borderRadius: '8px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif',
    }}
  >
    <h2 style={{ color: 'blue', marginBottom: '10px' }}>
      内联样式示例
    </h2>
  </div>
);

• 利点：動的なスタイルが簡単（変数を使用可能）。
• 欠点：複雑なスタイルの保守が不便。

CSS Modules（推奨、スコープの分離）

Vite はデフォルトで CSS Modules をサポートし、グローバルな汚染を防ぎます。

src/App.css（既存）または新しいファイル src/styles/Card.module.css を作成します：

/* Card.module.css */
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  margin: 20px;
}

.title {
  color: #333;
  margin: 0 0 10px 0;
}

.content {
  color: #666;
}

コンポーネントにインポートして使用します（スコープ付きクラス名が自動生成されます）：

import styles from './styles/Card.module.css';

return (
  <div className={styles.card}>
    <h3 className={styles.title}>标题</h3>
    <p className={styles.content}>内容</p>
  </div>
);

• 利点：クラス名が自動的にハッシュ化され（例：.card__abc123）、衝突しません。

完全な実践：前述の Card コンポーネントを CSS Modules に変更します。

src/components/Card.module.css を作成します：

.container {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  background: white;
}

.image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.title {
  margin: 0 0 10px 0;
  padding: 20px 20px 0;
  color: #333;
}

.content {
  padding: 0 20px 20px;
  color: #666;
}

Card.jsx を修正します：

import styles from './Card.module.css';

const Card = ({ title, content, imageUrl }) => {
  return (
    <div className={styles.container}>
      {imageUrl && <img src={imageUrl} alt={title} className={styles.image} />}
      <h3 className={styles.title}>{title}</h3>
      <p className={styles.content}>{content}</p>
    </div>
  );
};

export default Card;

---

JSX を使用する

JSX は HTML に似ています。例を見てみましょう：

上記のコードでは複数の HTML タグをネストできますが、div 要素でラップする必要があります。例の中の p 要素にはカスタム属性が追加されています。data-myattributeカスタム属性を追加するにはdata-プレフィックスを使用する必要があります。

独立したファイル

React JSX コードは独立したファイルに置くことができます。例えば、helloworld_react.jsファイルを作成し、コードは次のとおりです：

次に、その JS ファイルを HTML ファイルに読み込みます：

---

JavaScript 式

JSX 内で JavaScript 式を使用できます。式は中括弧 {} の中に書きます。{}の中に書きます。例は次のとおりです：

JSX 内では ... を使用できません。if else文は使用できませんが、... は使用できます。conditional（三項演算子）式で置き換えることができます。次の例では、変数がiに等しい1ブラウザは ... を出力します。true、i の値を変更すると、... を出力します。false.

---

スタイル

React ではインラインスタイルの使用を推奨しています。... を使用できます。camelCase構文でインラインスタイルを設定します。React は指定した要素の数値の後に自動的に ... を追加します。px。次の例では、h1要素にmyStyleインラインスタイルを追加します：

---

コメント

コメントは中括弧の中に書く必要があります。例は次のとおりです：

---

配列

JSX ではテンプレート内に配列を挿入でき、配列のすべての要素が自動的に展開されます：

その他の拡張