JSXとは？

JSX（ジェイエスエックス）は、JavaScript XMLの略で、Reactを使ってウェブアプリを作るときに使われる記述方法です。JSXを使うことで、HTMLのような構文でコンポーネントを作成できます。これにより、視覚的に分かりやすく、保守性の高いコードを書くことが可能になります。

JSXの基本構文

それでは、まずJSXの基本的な構文を見てみましょう。基本的な要素は、HTMLとまったく同じように見えます。

基本的な例

const element = <h1>こんにちは、JSX！</h1>;

この例では、elementという定数に、JSXで書かれた

要素を代入しています。

要素のネスト

JSXでは、要素をネストすることも簡単です。次の例を見てみましょう。

const element = (
  <div>
    <h1>こんにちは！</h1>
    <p>これはJSXで書かれた段落です。</p>
  </div>
);

JSXで扱えるデータ

JSXでは、JavaScriptの変数や関数を利用することができます。これによって、動的な内容を生成することが簡単にできます。

変数の埋め込み

変数を埋め込む場合は、中括弧（{}）を使います。例えば、次のように書くことができます。

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

ここでは、変数nameの内容が

要素に表示されます。

条件付きレンダリング

JSXでは、条件によって表示する内容を変えることもできます。例えば、次のようなコードになります。

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>ようこそ！</h1> : <h1>ゲストとしてログイン</h1>}
  </div>
);

JSXの注意点

JSXにはいくつか注意すべき点があります。特に、クラス名やHTML属性の書き方に違いがあります。

クラス名の指定

JSXでは、HTMLのクラス名を指定する際には、classNameを使います。次の例を参考にしてください。

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

スタイルの指定

スタイルを指定する場合は、オブジェクト形式で指定します。

const element = <div style={{ color: 'red' }}>赤い文字</div>;