RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > React > 【React初学者向け】JSXまとめ

【React初学者向け】JSXまとめ

React

はじめに

こんにちは。フロントエンドチーム新卒2年目のhy094です。

Reactでよく使用するJSX。
使ってみると便利なのですが、最初は「JavaScript内にHTML？」と混乱の原因になっていると思います。
また、その構文から違和感や気持ち悪さを感じる方もいると聞きます。
そこで、今回はReactで使用するJSXについてまとめます。
少しでも混乱や違和感の解消ができたら幸いです。

目次

JSXとは？

一言で表すと「JavaScript内でHTMLっぽい表現をするJavascriptの拡張構文」です。
具体的には以下のような形です。

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

※React公式サイトより引用


JavaScriptの変数宣言にHTMLタグが代入されているように見え、違和感を感じる方もいるかもしれません。
上記の通り拡張構文ですので上の式は以下の式にコンパイルされます。

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

※React公式サイトより引用


ここまで見て「もしやJSXなくてもReact書けるのでは・・・？」と思った方、正解です。書けます。
ただ、React.createElementで毎回書くのは非常に手間でコードも煩雑になるため、JSXを利用することを個人的にはお勧めします。
それでもJSXは使いたくない・・という方は公式サイト - JSX なしで React を使うを参照してください。

JSXの記法

ここからは、JSXの記法についてまとめます。

JavaScript式を埋め込む

JSX内に{}で囲むことでJavaScriptの式を埋め込むことができます。

const fruit = 'りんご';
const price = 100;
const quantity = 5;
const element = <h1>{fruit}を{quantity}個買うと{price * quantity}円です</h1>;

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


もちろん関数も利用可能です。

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公式サイトより引用

コメントアウト

JSX内ではHTML形式でのコメントは利用できません。
代わりに、JavaScriptの式を埋め込んだものと同じ{}内にJavaScriptのコメントアウトを記述します。

const user = 'admin';

const element = (
<div>
  {/* コメント */}
  
  {/* 
  　複数行コメントA
  　複数行コメントB
  */}
  
  {//コメント
    user
  }
</div> );


最後の例は改行しないと}もコメントアウトされてしまい、エラーとなるので改行はお忘れなく。

タグが空の場合

タグが空の場合は/>で閉じます。
例えば、HTMLで改行タグは<br> ですが、JSXでは<br />にしないとNGです。

<div>
  こんにちは
  <br />
  <img src="example.gif" />
</div>


フラグメント

JSXは親要素を1つしか持つことができません。
例えば、以下のようなものはエラーとなります。

const error = (
        <div> hoge </div>
        <div> fuga </div>);


簡単な解決方法として、全体をさらに親要素で囲ってしまうというものがあります。

const success = (
                <div>
                    <div> hoge </div>
                    <div> fuga </div>
                </div>);


ただ、この方法だと不要なdivがDOMに追加されてしまいます。
この問題は、フラグメント(React.Fragment)を利用することで解決できます。

const fragment = (
                <React.Fragment>
                    <div> hoge </div>
                    <div> fuga </div>
                </React.Fragment>);


React.Fragmentだと少し長いので、短縮記法も用意されています。
<>,</>です。

const shrotFragment = (
                <>
                    <div> hoge </div>
                    <div> fuga </div>
                </>);


一見空タグにしか見えませんが、React.Fragmentと同等のフラグメントとして認識されます。
Reactで頻出する記法ですので、覚えておいて損はないと思います。

HTMLとの属性の差異

JSXはあくまでもJavaScriptなので、
HTMLの属性はキャメルケースで書きますし、JavaScriptの予約語(classなど)は属性として使えません。

以下は一例です。

<>
    {/* class属性 -> className */}
    <div className="hoge">
  
        {/* for属性 -> htmlFor */}
        <label htmlFor="fuga">Hello</label>
  
        {/* tabindex属性 -> tabIndex */}
        <div tabIndex="0">World</div>
  
    </div>
</>


おわりに

今回はJSXについてまとめました。
JSXはReact.createElementを見やすく書く記法です。
また、React.createElementにコンパイルされるのでimport React from "react";が必要になるわけです。

JSXはReactの土台なので、初学者の内に抑えておくと後がスムーズになると思います。
参考文献のほか、紹介しているサイトは少なくないのでぜひ他にも調べてみてください。
それでは、ご覧いただきありがとうございました！

参考文献

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.