ReactでJSXを用いた変数埋め込み

ReactでHTMLにJavaScript変数を埋め込む (JSX)

JSXは、JavaScriptの拡張構文で、HTMLのような構文を使用してReactコンポーネントを記述することができます。この構文により、JavaScriptの変数を直接HTMLテンプレートに埋め込むことが可能になります。

基本的な使い方

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

• {props.name}の部分がJavaScriptの変数です。これは、Reactコンポーネントに渡されたpropsオブジェクトのnameプロパティの値をHTMLテンプレートに埋め込みます。

複数の変数や式

複数の変数や式を埋め込むこともできます。

import React from 'react';

function Calculator(props) {
  const result = props.num1 + props.num2;
  return (
    <div>
      <p>{props.num1} + {props.num2} = {result}</p>
    </div>
  );
}

• {result}は計算結果を埋め込んでいます。
• {props.num1}と{props.num2}は変数です。

条件分岐とループ

条件分岐やループも使用できます。

import React from 'react';

function UserList(props) {
  return (
    <ul>
      {props.users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

• {props.users.map(user => ...)}は、props.users配列の各要素に対してループを行い、それぞれの要素のnameプロパティをリストアイテムに埋め込んでいます。

ReactでのJSXを用いた変数埋め込みのコード解説

import React from 'react';

function Greeting(props) {
  return (
    <div>
      <h1>Hello, {props.name}!</h1>
    </div>
  );
}

• {props.name} の部分：
  • props は、コンポーネントに渡されるデータの集まりです。
  • name は、そのデータの中の特定の値（名前）を表します。
  • {} で囲むことで、JavaScriptの式として扱われ、name の値がその部分に埋め込まれます。

例
もし、props.name の値が "Taro" だとすると、表示される結果は "Hello, Taro!" となります。

import React from 'react';

function Calculator(props) {
  const result = props.num1 + props.num2;
  return (
    <div>
      <p>{props.num1} + {props.num2} = {result}</p>
    </div>
  );
}

• {props.num1}, {props.num2}, {result} の部分：
  • それぞれ、num1, num2, result の値が埋め込まれます。
  • result は、props.num1 と props.num2 を足し合わせた計算結果です。

例
props.num1 が 3、props.num2 が 5 の場合、表示される結果は "3 + 5 = 8" となります。

import React from 'react';

function UserList(props) {
  return (
    <ul>
      {props.users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

• {props.users.map(user => ...)} の部分：
  • props.users が配列の場合、その配列の各要素に対して処理を行います。
  • map メソッドを使って、各要素の name をリストの項目として表示します。
  • key 属性は、Reactがリストの要素を一意に識別するために必要です。

例
props.users が [{id: 1, name: "Taro"}, {id: 2, name: "Hanako"}] ような配列の場合、 "<ul><li>Taro</li><li>Hanako</li></ul>" というリストが表示されます。

JSXは、JavaScriptの式をHTMLのような構文の中に直接埋め込むことができる強力な機能です。これにより、Reactコンポーネントをより動的で柔軟にすることができます。

• JSXは、Reactの重要な概念の一つであり、習得することでより高度なReactアプリケーションを開発できるようになります。
• {} を使うことで、JavaScriptの変数や式を埋め込めます。

ポイント

• JSXはコンパイル時に通常のJavaScriptに変換されます。
• JSXはJavaScriptの構文の拡張なので、JavaScriptの文法に従う必要があります。

• JSXのメリット
  
  • HTMLに似た直感的な構文でUIを記述できる。
  • JavaScriptの式を埋め込めるため、動的なUIを簡単に作成できる。
• state
  コンポーネント内部の状態を管理するための変数です。

テンプレートリテラル (Template Literals)

• Reactでの利用
  
  • JSXの代わりに、dangerouslySetInnerHTML を使用して、レンダリングする必要があります。
  • セキュリティ上のリスクがあるため、信頼できない入力に対しては使用を避けるべきです。
• 例
  

  const name = 'Taro';
  const greeting = `Hello, ${name}!`;
  

• 特徴
  
  • template literal は、バッククォート（``）で囲まれた文字列です。
  • ${} の中にJavaScriptの式を埋め込むことができます。
  • JSXよりもシンプルで、プレーンなJavaScriptの構文です。

import React from 'react';

function Greeting(props) {
  const greeting = `<h1>Hello, ${props.name}!</h1>`;
  return <div dangerouslySetInnerHTML={{ __html: greeting }} />;
}

コンポーネントの分割

• 例
  

  import React from 'react';
  
  function GreetingName(props) {
    return <h1>Hello, {props.name}!</h1>;
  }
  
  function Greeting(props) {
    return <div><GreetingName name={props.name} /></div>;
  }
  

• 特徴
  
  • 大きなコンポーネントを小さなコンポーネントに分割することで、コードの可読性を高め、再利用性を向上させることができます。
  • JSXの表現力を活かしつつ、コードをよりモジュール化できます。

ライブラリ/フレームワークの利用

• 例
  
  • styled-components
    CSS-in-JSのライブラリで、JavaScriptでスタイルを定義できます。
  • Emotion
    styled-componentsと同様のCSS-in-JSのライブラリです。
• 特徴
  
  • React以外のライブラリやフレームワークを使用することで、より高度な機能や表現力を得ることができます。
  • ただし、学習コストや依存関係が増える可能性があります。

各方法の比較