React公式ドキュメントを読む4 JSX構文とは？

前回からの続きですが、このページだけ読んでも分かる内容になっています。

Reactでは、JSX構文が使える

Reactでは、JSX構文が使えます。以下の「 React のいちばん短い例 」もJSXで書かれています。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Reactで使えるJSX構文とは、具体的にどのようなものでしょうか。

JSXとは

JSXは、JavaScriptの構文を拡張したものです。 Facebookが開発したプログラム言語であり、同じくFacebookが開発したPHPの拡張構文であるXHPに似ています。

JSXでは、JavaScriptの式やHTMLソースを、JSXのコード内にルールに従って記述できます。記述ルールさえ覚えてしまえば、直感的に読み書きしやすい言語仕様となっています。

ReactではJSXを使うことが推奨されている

ReactではJSXを使うことが推奨されています。JavaScriptコードでReactのUIを扱うよりも、JSXコードで扱う方がどんなReact要素が生成されるのかを把握しやすくなるでしょう。また、JSXで記述すると、Reactがより詳しいエラーや警告を表示してくれるようになります。

ReactではJSXが推奨されていますが、JSXなしでReactを使用することもできます。JSXを使用しないなら、Babelなどの変換ツールがなくても動作させられます。JSXなしでReactを使用する方法については、React公式サイトの以下のページで紹介されています。

https://reactjs.org/docs/react-without-jsx.html

JSX構文の使用例

JSX構文の使用例を見ていきましょう。

JSXで変数宣言する

const element = <h1>Hello, world!</h1>;

上記の使用例では、JSX構文で変数宣言しています。ここでは、element という名前の変数に <h1>Hello, world!</h1> という値を代入しています。JavaScriptと同じく、先頭にconstをつけると後から値を再代入して変更できない定数となります。

JSXコード内にJavaScriptの式を記述する

<h1>{7+3}</h1>

上記の使用例では、JSXコード内にJavaScriptの式を記述しています。 JSXコード内では、中括弧{ }で囲むことで JavaScriptの式を記述できます。<h1>10</h1>として描画されます。

変数に代入されている値を使用する

const name = 'Taro Yamada';
const element = <h1>Hello, {name}</h1>;

上記の使用例では、変数nameに代入されている値を、 中括弧で囲んだ{name}の部分で使用しています。<h1>Hello, Taro Yamada</h1>として描画されます。

id=’root’で指定された要素に描画するように指定

const name = 'Taro Yamada';
const element = <h1>Hello, {name}</h1>;

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

上記の使用例では、変数elementに代入された内容を、id=’root’で指定された要素に描画するように指定しています。ブラウザ上では、h1要素による大見出しとして「Hello, Taro Yamada 」と描画されます。

JavaScript関数の結果をJSXコード内で使用する

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

const user = {
  firstName: 'Taro',
  lastName: 'Yamada'
};

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

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

上記の使用例では、formatName(user) というJavaScript関数の戻り値を
要素内に埋め込んでいます。ブラウザ上では、h1要素による大見出しとして「Hello, Taro Yamada!」と描画されます。

この使用例でも、前の{7+3}や{name}の例と同様に、中括弧{ }で囲んだ部分で、formatName(user) というJavaScript関数の戻り値が使用されている点に注目してください。

この使用例では、 const element = (<h1>～</h1>); という具合に、変数elementに代入する値全体が 括弧( ) で囲まれています。この 括弧( ) は必須ではなく、例えば、このページの上のほうで紹介した他の使用例では 括弧( ) が省略されていたりします。

ただし、React公式サイトでは、コードを複数行に分割する場合は 括弧( ) で囲むことを推奨しています。その理由は、JavaScriptの自動セミコロン挿入への対策です。JavaScriptの自動セミコロン挿入については、以下のリンク先などが参考になるかもしれません。

https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi

このリンク先の内容をきちんと理解できなくても、 Reactでコードを複数行に分割する場合には、全体を 括弧( ) で囲むと覚えておくとよいでしょう。

前回のサンプルコードが理解できる

ここまでの内容が分かれば、前回のサンプルコードが理解できるのではないでしょうか。 前回のサンプルコードとは、React公式サイトで「 React のいちばん短い例 」 として紹介されている以下のコードです。

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    ReactDOM.render(
      <h1>Hello, world!</h1>,
      document.getElementById('root')
    );
  </script>
</body>
</html>

上記のサンプルをHTMLファイルにしたものが以下です。以下のリンクをクリックすると、画面に「Hello, world!」と描画されます。

https://programming-world.net/sample/react_hello_world2-2.html
注：IE11では動きません。Edgeでは動きます。IE対策は別記事で。

ReactDOM.render( ～ ); の部分はJSX構文で記述されています。そのため、クライアント側にBabelを読み込んで、 JavaScriptの後方互換バージョンに変換してもらうことで動作しています。

JSX構文の記述ルールについて、知っておきたいことがもう少しだけありますので、次回へと続きます。

前の記事

React公式ドキュメントを読む3 JSXコードを変換するBa…

次の記事

React公式ドキュメントを読む5 JSX構文について補足