Reactで開発する時に必須となるJSX

Tweet

Pocket

Reactを使ってフロントエンド開発をするときに勉強しておく必要があるテーマがいくつかありますが、その１つがJSXです。

JSXとは

JSXというのは、JavaScriptの中でHTMLのような記述が出来る拡張言語です。Reactの公式ドキュメントでもJSXによる記述でサンプルコードが書かれているため、Reactを使うならJSXでReactの要素を書くものだと思って良いと思います。

Reactのコンポーネントを作成する時にJSXを使わない場合は、『React.createElement』を使って以下のように書きます。

const test = () => {
  return (
    React.createElement(
      'h1',
      {className: 'title'},
      'Hello, World!'
    );
  );
}

これと同じものをJSXを使って書くとこうなります。

const test = () => {
  return (
    <h1 className="title">Hello, World!</h1>
  );
}

ほぼHTMLをそのまま書くような形になるので、視覚的にもJSXを使った方が分かりやすいですよね。JSXで記述した場合もコンパイル（トランスパイル？）するときにReact.createElementを使う形に変換されるので、JSXを使わずにReact.createElementを使って記述することもできますが、基本的にはJSXを使う形で良いでしょう。

JSXを使うときの基本事項

それでは実際にJSXを使うときに知っておく必要がある内容についてです。

ファイルの拡張子を .jsx にする

入力項目等の画面コンポーネントを定義するファイルに関しては拡張子を『.jsx』にしておきましょう。

.jsxファイルの先頭でReactのパッケージをインストールする

JSXを使う場合だけではないのですが、.jsxファイルでReact要素を定義するときに以下の通りパッケージのインストールが必要となります。

import React from "react";

return文の中でJSXを記述する

上記の例でも書いた通り、関数の返り値としてReact要素を返す形になるため、return文の中でJSXを記述することになります。

基本はHTMLそのままだが一部異なる

JSXはJavaScriptの拡張言語でベースはJavaScriptになるため、一部、通常のHTMLそのまま記述できないものがあります。

例えば、classというのはHTMLではclass属性を指定するものですが、JavaScriptではクラスオブジェクトを作成する時に使う構文です。ですので、classはそのまま使わずclassNameで記述します。そうすると、実際のHTMLに変換される時にclass属性に置き換えてもらえます。

{ }で囲んで変数・関数を埋め込める

JSXの記述の中で変数や関数を使いたい場合、{ }で囲むことでそれが可能になります。{ }の中はJavaScriptの世界になると理解しておいてもらったらOKです。

変数名等はキャメルケースで記述する

JSXのルールとして変数等の命名はキャメルケースで行うというものがあります。キャメルケースというのは、さっき話に出てきた className のように単語が２語以上続く場合に、単語の１文字目だけ大文字にするという書き方です。（ラクダのコブみたいな見た目になることからキャメルケースと呼ぶそうです。）

空要素は閉じタグが必須となる

例えば、imgタグなどの場合、通常のHTMLだと閉じタグを書かなくても問題なく表示されますが、JSXで書く場合は閉じタグを付けないとエラーになります。

<img src="..." />

最後の『/>』を書く必要があるので、忘れずに書くようにしましょう。

JSXは１つの階層構造になっている必要がある

通常のHTMLの場合は、複数の階層を作るようなイメージでマークアップすることが出来るのですが、JSXでは１つの階層構造になっている必要があります。

つまり、このような書き方はできないということです。

return (
  <div>aaaa</div>
  <div>bbbb</div>
)

この場合は、この２つをまとめるタグを１つ書く必要があります。

return (
  <div>
    <div>aaaa</div>
    <div>bbbb</div>
  </div>
)

ただ、不要なdivタグ等は作りたくない場合もあると思います。そのような場合は、以下のような『React.Fragment』を使った書き方をすれば、実際のHTMLでは React.Fragment の部分を無視して生成してくれるので、覚えておきましょう。

return (
  <React.Fragment>
    <div>aaaa</div>
    <div>bbbb</div>
  </React.Fragment>
)

また、省略形としてこのような記述も可能です。

return (
  <>
    <div>aaaa</div>
    <div>bbbb</div>
  </>
)

以上、JSXを使うときに知っておき必要があることでした。

Tweet

Pocket