JSX でマークアップを記述する

JSX: JavaScript にマークアップを入れ込む

これまでウェブは HTML、CSS そして JavaScript を使って作られてきました。長年にわたり、ウェブ開発者はコンテンツは HTML で書き、デザインは CSS で書き、ロジックは JavaScript で書き、そして大抵の場合はそれらを別ファイルにしていました。コンテンツは HTML 内にマークアップされ、そのページのロジックは別ファイルの JavaScript に存在していました：

しかしウェブがよりインタラクティブなものになるにつれ、ロジックがコンテンツの中身をも決めるようになっていきました。JavaScript が HTML の領分も担当するようになったのです！ これが、React ではロジックとマークアップを同じ場所、すなわちコンポーネントに書く理由です。

ボタンのレンダリングロジックとマークアップを同じ場所に書くことで、それらが毎回の編集時に同期されることが保証されます。逆に、ボタンのマークアップとサイドバーのマークアップといった互いに関係のない詳細は、互いに分離されるようになるため、それぞれをより安全に独立して更新できるようになります。

個々の React のコンポーネントは JavaScript の関数であり、React がブラウザに表示するためのマークアップを含めることができます。そのマークアップを表現するのに、React コンポーネントは JSX と呼ばれる拡張構文を使用します。JSX は HTML ととてもよく似ていますが、より構文が厳密であり、動的な情報を表示することができます。理解するには、HTML マークアップを JSX マークアップへと変換してみるのが最もよいでしょう。

HTML を JSX に変換する

このような（まったく正しい）HTML があるとしましょう：

これをコンポーネントの中に入れたいとします：

そのままコピー・ペーストした場合、うまく動きません：

これは、JSX の方が厳密であり、HTML よりも若干ルールが多いからです。上記のエラーメッセージを読めばマークアップの修正方法は分かるようになっていますが、今は以下のガイドに従えば大丈夫です。

JSX のルール

1. 単一のルート要素を返す

コンポーネントから複数の要素を返すには、それを単一の親タグで囲みます。

例えば <div> を使うことができます：

マークアップに余分な <div> を加えたくない場合は、<> と </> を代わりに使うことができます：

この中身のないタグは と呼ばれるものです。フラグメントを使えば、ブラウザの HTML ツリーに痕跡を残さずに複数の要素をまとめることができます。

2. すべてのタグを閉じる

JSX ではすべてのタグを明示的に閉じる必要があります。<img> のような自動で閉じるタグは <img /> のようになりますし、<li>oranges のような囲みタグは <li>oranges</lit> と書かなければなりません。

ヘディ・ラマーの画像とリスト項目は、閉じタグを書いた状態では以下のようになります：

3. （ほぼ）すべてキャメルケースで！

JSX は JavaScript に変換され、中に書かれた属性は JavaScript オブジェクトのキーになります。コンポーネント内では、これらの属性を変数に読み出したくなることがよくあります。しかし JavaScript の変数名には一定の制約があります。例えば、名前にハイフンを含めたり class のような予約語を使ったりすることはできません。

このため、React では多くの HTML および SVG の属性はキャメルケースで書かれます。例えば stroke-width の代わりに strokeWidth を使います。class は予約語なので、React では className を使います（が由来となっています）。

全リストはにあります。何かを間違ったとしても心配は要りません。にメッセージと修正の提案が表示されるようになっています。

ヒント：JSX コンバータを使う

既存のマークアップの属性をすべて書きかえていくのは時に面倒です！ 既存の HTML や SVG を JSX に変換する場合はを使うことをお勧めします。コンバータは実用上非常に役に立ちますが、自分でも楽に JSX が書けるよう、何が起こっているのかを理解しておくことも大切です。

最終結果は以下のようなものになります：