JSX (JavaScript)
JSX (JavaScript XML, formally JavaScript Syntax eXtension) は、 JavaScript に XML のような文法が拡張された言語である[1] 。もともとReactで使用するためにFacebook(現Meta)によって作成されたJSXは、複数のWebフレームワークで使用されている[2] :5[3] :11 。糖衣構文(シンタックスシュガー)であるJSXは通常、元のJSXと構造的に似ているJavaScriptの関数呼び出しによって作られたコードに変換される。
マークアップ
[編集 ]JSXコードの例:
constApp=()=>{ 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のため選択される。
constApp=()=>{ consti=1; return( <div> <h1>{i===1?'true':'false'}</h1> </div> ); }
これはReactの場合以下のようにレンダリングされる:
<div> <h1>true</h1> </div>
同様に関数も使用できる:[3] :88-90
constApp=()=>{ constsections=[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 */ <divkey={"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。ほとんどの場合、このプロセスはデプロイ前のビルドで行われる。
関連項目
[編集 ]出典
[編集 ]- ^ "Draft: JSX Specification". JSX. Facebook. 2018年4月7日閲覧。
- ^ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997
- ^ a b c d Wieruch, Robin. The Road to React. Leanpub. ISBN 978-1720043997
- ^ Clark (2017年9月26日). "React v16.0§New render return types: fragments and strings". React Blog. 2024年6月9日閲覧。
- ^ "React.Component: render". React. 2024年6月9日閲覧。
- ^ Clark (2017年9月26日). "React v16.0§Support for custom DOM attributes". React Blog. 2024年6月9日閲覧。
- ^ Fischer, Ludovico (2017年09月06日) (英語). React for Real: Front-End Code, Untangled. Pragmatic Bookshelf. ISBN 9781680504484 . https://books.google.com/books?id=Tg9QDwAAQBAJ
- ^ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997