【React.js入門】JSXの基礎

React.jsでは、JSXと呼ばれる記法を使い、JavaScriptとHTMLを融合させたようなコードを組み合わせてプログラムを作成していきます。

前回作成したhello-appプロジェクトを使用しますので、実際に手を動かしながら学習される方は前回の投稿「React.js 初めの一歩」を参考にプロジェクトを作成しておいてください。

JSXとは

React.jsにおけるJSXとは、コンポーネント（部品）を記述するための記法で、HTMLのタグ形式の記述をJavaScriptコードに埋め込むことが可能です。

App.jsx

function App() {
  return (
    // 👇JSX
    <p>Hello World</p>
  )
}

export default App

上記の通り、JSXの構文はHTMLと非常に似通っており、開始タグと終了タグの概念を持ち、各種属性を設定することや、入れ子（ネスト）にすることができます。

複数の要素を入れ子として関数から返すことはできますが、親要素は単一である必要があります。

コードで見た方が分かりやすいと思いますので、サンプルを提示します。

function App() {
  return (
    <header>
      <h1>大見出し！</h1>
      <div id="subTitle">サブタイトル</div>
    </header>
  )
}

合計3つの要素を返していますが、headerが2つをまとめて1つにしているのでOKです。

function App() {
  return (
    <h1>大見出し！</h1>
    <div id="subTitle">サブタイトル</div>
  )
}

2つの要素を返しており、まとめる親要素もないためNGです。

VS CodeなどのIDE（統合開発環境）を使ってコーディングしていると、以下のような赤波下線が表示されるはずです。

「意味もなく階層が深くなる」などの理由で、親要素を指定したくない場合は、空の親要素を使用できます。

function App() {
  return (
    <>
      <p>こんにちは。</p>
      <p>よろしくね。</p>
    </>
  )
}

JSX要素への属性の追加は、HTMLとほぼ同じです。

App.jsxを以下のように編集し、ブラウザで確認してみてください。

function App() {
  return (
    <>
      <input type="text" name="name" />
      <button type="button">送信！</button>
    </>
  )
}

export default App

ただし、HTMLとは異なる属性もあります。代表的なのが「class」です。
JSXで「class」を指定したい場合は、「className」属性を使用します。

その理由は「class」が JavaScript で予約語であり、JSX は JavaScript の拡張機能だからです。

function App() {
  return (
    <header>
      <h1>大見出し！</h1>
      <div className="subTitle">サブタイトル</div>
    </header>
  )
}

export default App

波カッコを使用することで、JSX要素の中に変数や式を埋め込むことができます。

function App() {
  // 👇変数を宣言し、初期化している
  let target = "ルーク"

  return (
    <p>{target}！ フォースを使うのだ！</p>
  )
}

export default App

今回は、React.jsを使用してウェブアプリを開発していく際に必須とも言える「JSX」について、基礎的な内容を説明しました。

JSXはコンポーネント（部品）の作成に使用されますが、部品にはパラメータを渡せるほうが汎用的ですよね。

ということで、次回はReactコンポーネントにパラメータを渡す方法について投稿する予定です。

それでは、最後までお読みいただき、ありがとうございます。

本記事についての質問、誤りの指摘、ご意見ご感想などありましたら、ぜひコメント頂ければ幸いです。