JSXはReactでよく使用するJavaScript構文です。
慣れると便利な反面、最初はJavaScript内にHTMLが入っていて違和感を感じる方も多いのではないでしょうか？

そこで、本記事ではReactで使用するJSXについて解説します。
ぜひ参考にしてみてください！

JSXとは？

ReactNative入門 基礎知識と始め方を徹底解説

JSXとは、「JavaScript XML」の略であり、HTMLと似たような記述をすることができる「Javascriptの拡張構文」です。
JSXを使うと、div,p,ul,liなどのHTMLタグを使用することが可能です。
簡単な言葉で説明すると「ReactでHTMLを書くための構文」となります。

JSXの具体的な例として以下のコードとなります。

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Javascriptの拡張構文なので、上記のコードは下記のコードにコンパイルされます。

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

引用元：React公式サイト

JSXの記法

VSCodeでReactの開発環境を整える！手順とおすすめ拡張機能を紹介

では、実際にJSXの記法について解説します。

JSX に式を埋め込む

Javascriptの式を中括弧｛｝に囲むことによって JSX 内で使用できます。
以下の例では、name,age という変数を宣言して、名前と年齢を展開しています。

const name = '田中太郎';
const age = '30';
const element = <h1>私の名前は{name}です。年齢は{age}歳です。</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

表示結果は以下となります。

私の名前は田中太郎です。年齢は30歳です。

関数を使う場合は下記の記述をします。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

引用元：React公式サイト

閉じタグに注意

br, imgなどの中身が空なタグには、「/>」で閉じる必要があります。

<div>
　始めまして
　<br />
　田中です。
　<img src="sample.jpg" />
</div>

コメントアウトの使い方

HTMLのコメントアウト形式は利用できません。
コメントアウト記述を中括弧｛｝で囲むことによって JSX 内で使用できます。

<div>
　{/* コメントアウト */}
</div>

フラグメント

初心者が最初に躓くポイントにフラグメントがあります。
フラグメントとは、親要素を1つしか持つことができないことです。
以下の例を見ていきましょう。

下記は親要素が2つあるためエラーが発生します。

const error-test = (
        <div> test1 </div>
        <div> test2 </div>
);

下記のように全体を更に親要素で囲むことによってエラーは解消されます。

const success-test = (
　<div>
        <div> test1 </div>
        <div> test2 </div>
　</div>
);

ただ上記の方法では無駄なDOMが生成されてしまいます。
そのため、 <React.Fragment>を使います。

const success-test = (
　 <React.Fragment>
        <div> test1 </div>
        <div> test2 </div>
　 </React.Fragment>
);

<React.Fragment>を毎回記述するのは少々冗長なため、以下のように「<>」と省略する方法が一般的です。

const success-test = (
　 <>
        <div> test1 </div>
        <div> test2 </div>
　 </>
);

JSXの使い方

実際にJSXを使うための方法を解説します。
今回は「npm」を使った方法にて解説します。
※npmとは

precompile

npm i -g react-tools にてreact-toolsをインストールすることでjsxコマンドを使用することが可能です。

node-jsx

node-jsxを使うことで変換することも可能です。
requireしてinstallするだけで利用可能です。

require('node-jsx').install({harmony: true});

JSXを使う意味

JSXを使うことでHTMLに近い記述にてコードを書き進めることが可能なので、HTML構文を知っていれば、JSXでも記述が可能です。
下記からわかるように、JSXで記述した方が、非エンジニアやReactを学んでいない方にも分かりやすく、導入のハードルを下げることが可能です。

▼JSだけで記述した場合
React.DOM.div(null, 'test’')

▼JSXで記述した場合
<div>test</div>の方が...

まとめ

Reactを使うとなると、現状ではJSXを使うケースが一般的です。
JSXでは、JSだけ記述するより、コードの量が減らすことができ、HTML構造になっているため、コード全体の構造把握が容易なこともメリットといえます。