JSX (JavaScript)

JSX (JavaScript XML, formally JavaScript Syntax eXtension) は、 JavaScript に XML のような文法が拡張された言語である[1]。もともとReactで使用するためにMetaによって作成されたJSXは、複数のWebフレームワークで使用されている[2]:5[3]:11 。糖衣構文（シンタックスシュガー）であるJSXは通常、元のJSXと構造的に似ているJavaScriptの関数呼び出しによって作られたコードに変換される。

マークアップ

JSXコードの例:

const App = () => {
   return (
     <div>
       <p>Header</p>
       <p>Content</p>
       <p>Footer</p>
     </div>
   ); 
}

ネストされた要素

同じ階層に複数の要素を配置する場合、<div>のような親要素か、配列が返され親要素が作られない<Fragment>(<>と短縮できる)を使ってう必要がある[4][5][3]:68-69。

属性

JSXは、HTMLによって提供される属性と同様な属性を使用できる。また、カスタム属性を定義し、コンポーネントに渡すこともできる[6]。すべての属性は、コンポーネントにpropsとして渡される。

JavaScript式

JavaScript の 式 (ただし文ではない)は、{}の JSX 内の中括弧に入れることができる[3]:14-16。

  <h1>{10+1}</h1>

Reactの場合、以下のようにレンダリングされる:

  <h1>11</h1>

条件付き表現

If文 は JSX 内で使用不可能だが、代わりに三項演算子を使用できる。

この例 { i === 1 ? 'true' : 'false' } では 'true' という文字列がiが1のため選択される。

const App = () => {
   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}

これはReactの場合以下のようにレンダリングされる:

<div>
  <h1>true</h1>
</div>

同様に関数も使用できる:[3]:88-90

const App = () => {
   const sections = [1, 2, 3];

   return (
     <div>
       {sections.map((n,i) => (
           /* 'key' is used by React to keep track of list items and their changes */
           /* Each 'key' must be unique */
           <div key={"section-" + n}>
               Section {n} {i === 0 && <span>(first)</span>}
           </div>
       ))}
     </div>
   );
}

これはReactの場合以下のようにレンダリングされる:

<div>
  <div>Section 1<span>(first)</span></div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

JSXは、ウェブブラウザで読み込まれる前に、Babelなどのツールで変換する必要がある[7][8]:5。ほとんどの場合、このプロセスはデプロイ前のビルドで行われる。

関連項目

• ECMAScript for XML

出典

1. “Draft: JSX Specification”. JSX. Facebook. 7 April 2018閲覧。
2. Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997 
3. ^ Wieruch, Robin. The Road to React. Leanpub. ISBN 978-1720043997 
4. Clark (September 26, 2017). “React v16.0§New render return types: fragments and strings”. React Blog. 2024年6月9日閲覧。
5. “React.Component: render”. React. 2024年6月9日閲覧。
6. Clark (September 26, 2017). “React v16.0§Support for custom DOM attributes”. React Blog. 2024年6月9日閲覧。
7. Fischer, Ludovico (2017-09-06) (英語). React for Real: Front-End Code, Untangled. Pragmatic Bookshelf. ISBN 9781680504484. https://books.google.com/books?id=Tg9QDwAAQBAJ 
8. Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997 

外部リンク

• Draft: JSX Specification