JSX (JavaScript)とは? わかりやすく解説

Weblio 辞書 > 辞書・百科事典 > 百科事典 > JSX (JavaScript)の意味・解説 

JSX (JavaScript)

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2024/06/10 13:37 UTC 版)

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。ほとんどの場合、このプロセスはデプロイ前のビルドで行われる。

関連項目

出典

  1. ^ Draft: JSX Specification”. JSX. Facebook. 2018年4月7日閲覧。
  2. ^ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997 
  3. ^ a b c d Wieruch, Robin. The Road to React. Leanpub. ISBN 978-1720043997 
  4. ^ Clark (2017年9月26日). “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 (2017年9月26日). “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 

外部リンク




英和和英テキスト翻訳>> Weblio翻訳
英語⇒日本語日本語⇒英語
  
  •  JSX (JavaScript)のページへのリンク

辞書ショートカット

すべての辞書の索引

「JSX (JavaScript)」の関連用語

JSX (JavaScript)のお隣キーワード
検索ランキング

   

英語⇒日本語
日本語⇒英語
   



JSX (JavaScript)のページの著作権
Weblio 辞書 情報提供元は 参加元一覧 にて確認できます。

   
ウィキペディアウィキペディア
All text is available under the terms of the GNU Free Documentation License.
この記事は、ウィキペディアのJSX (JavaScript) (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。

©2025 GRAS Group, Inc.RSS