ReactのJSXの書きかた・使いかた～HTMLライクに記述しよう～

Reactの学習を進めているとJSXというものに必ず出会うと思います。「JSXとはなんだ？」「Reactを学習したんだけど、、、」と思われている方も多いのではないでしょうか？JSXはReactを習得する上で必ず通らなければならない道です。とは言っても難しいものではなくHTMLの経験がある方なら抵抗なくすんなり理解ができると思います。むしろJSXを知ると「なんだJSXって結構便利じゃん」と感じていただけると思います。

本記事ではReactを習得しようと思っている方やReactの勉強を始めたばかりの方に向けてJSXについて紹介しています。JSXの役割や基本的な書きかたについて知りたい方は是非ご一読ください。

JSXとは

JSXはJavaScriptの拡張言語です。HTMLライクな記述ができ、JavaScriptの構文を使えます。JavaScriptに中にHTMLが記述されていることに最初は違和感があると思いますが、慣れればとても便利に感じます。

もしJSXを使わない場合React.createElement()という構文を使用して記述します。例として下記にbuttonタグを生成するReactを記述しました。

React.createElement {
  'button',
  {className: 'btnPrimary'},
  'Click!'
}

React.createElementはReact要素を生成する構文です。今回の例ではbuttonタグのみですが他のタグが増えると都度上記のようにReact.createElementを記述しなければなりません。

JSXを使うとHTMLライクに書ける

JSXを使うとHTMLライクに記述ができ、しかもJavaScriptの構文が使えるようになります。先程React.createElementで記述していたbuttonタグを生成するコードを下記にJSXで記述してみました。

<button className={'btnPrimary'}>
  Click!
</button>

上記のコードを見ていただけるとかなりHTMLに近くてなじみがありますよね。React.createElementで毎回記述するよりラクに感じる方が多いのではないでしょうか？HTMLと全く同じような記述方法ができる訳ではないですが、HTMLに慣れ親しんだ方であればJSXを使用した方が理解しやすく書きやすいと思います。

JSXの基本文法

それではJSXの基本的な書きかたについて紹介します。HTMLを使ったことがある方なら抵抗なく理解できるかと思いますので、しっかり学習していきましょう！

Reactをimportする

import React from 'react';

const PrimaryButton = () => {
  return (
    <button className={'btnPrimary'}>
      Click!
    </button>
  )
}

export default PrimaryButton;

ReactでJSXを書く際は最初に必ずReactをimportしましょう！上記のコードでは最初の1文が該当するコードです。Reactをimportしないと正常に動作しないため必ず記述します。return文の中がJSXとなってます。

ファイル拡張子は基本的.jsxにします。.jsも使用できますが明示的にJSXで記述していることが分かるようにするため拡張子は.jsxにしましょう！

必ず階層構造にしよう

JSXで記述する際は必ず階層構造になるように注意してください。以下にOK例とNG例のコードを記載します。

import React from 'react';

// OK例
const Icon = () => {
  const imagePath = '/img/icon.png'
  const text = 'アイコン画像です。'
  return (
    <div>
      <img src={imagePaht} alt="アイコン" />
      <p>{text}</p>
    </div>
  )
}

// NG例
const Icon = () => {
  const imagePath = '/img/icon.png'
  const text = 'アイコン画像です。'
  return (
    <img src={imagePaht} alt="アイコン" />
    <p>{text}</p>
  )
}

export default Icon;

return文の中のJSXに注目してみましょう。OK例ではdivタグの中にimgタグとpタグが階層構造で記述されていますが、NG例ではimgタグとpタグが並列で記載されています。

JSX内では最上位のコンポーネント（タグ）は並列にできないので必ず階層構造で記述しましょう。

もし今回のようなコンポーネントでdivタグは使いたくない場合はReact.Fragmentを使えば解決できます。以下にサンプルコードを掲載します。

import React from 'react';

// divタグをReact.Fragmentに置き換えた場合
const Icon = () => {
  const imagePath = '/img/icon.png'
  const text = 'アイコン画像です。'
  return (
    <React.Fragment>
      <img src={imagePaht} alt="アイコン" />
      <p>{text}</p>
    </React.Fragment>
  )
}

// React.Fragmentをもっと簡易的に記述したい場合
const Icon = () => {
  const imagePath = '/img/icon.png'
  const text = 'アイコン画像です。'
  return (
    <>
      <img src={imagePaht} alt="アイコン" />
      <p>{text}</p>
    </>
  )
}

export default Icon;

React.FragmentはHTMLタグとしては出力されません。そのためimgタグとpタグが並列で並んだコンポーネントが出力されます。さらにReact.Fragmentは省略した形で記載でき単に<></>空の開始タグと閉じタグを記述するだけでOKです。

JSXを書くときに注意すること

キャメルケースで記述する

変数などを指定するときは単語同士を必ずハイフンつなぐのではなく大文字を使ってつなぐようにしましょう！単語同士を大文字でつなぐことをキャメルケースと呼びます。

// OK
const imagePath = '/img/icon.png'
// NG
const image-path = '/img/icon.png'

{}内で変数を扱える

JSXの根本はJavaScriptなので{}で囲むことで変数が扱えます。

const Icon = () => {
  const imagePath = '/img/icon.png'
  const text = 'アイコン画像です。'
  return (
    <div>
      // {}で囲むことで変数が使えます
      <img src={imagePaht} alt="アイコン" />
      <p>{text}</p>
    </div>
  )
}

閉じタグが必要

imgタグやbrタグといったHTMLでは閉じタグが必要ないタグいわゆる空要素にもJSXでは閉じタグが必要です。

// OK
<img src={imagePaht} alt="アイコン" />
// NG
<img src={imagePaht} alt="アイコン" >

HTMLの空要素に対しては>ではなく/>でタグを閉じるようにします。

class属性の記述に注意しよう

JSXでclass属性を指定する際にはclassNameと記述するようにしましょう！JavaScriptではclassは予約語となっているので使用できません。

return (
    <p className="caption">記述方法に注意しましょう</p>
  )

JSXを使えばHTMLライクにコンポーネントが書ける

ここまで紹介してきたようにJSXがHTMLライクに記述でき、非常に便利だと感じていただけたかと思います。Reactでコンポーネントを生成する際にスタンダードな記述方法となっているので是非マスターしましょう！