JSX

ウィキペディア

JSX

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2025/06/29 13:11 UTC 版)

JSX

• JSX (JavaScript) - Metaが開発しているJavaScriptの拡張構文。
• JSX (プログラミング言語) - DeNAが開発したプログラミング言語。
• JSX (航空会社) - アメリカの航空会社。
• ジャカルタ証券取引所 (en:Jakarta Stock Exchange) - インドネシア証券取引所の前身の一つ。

ウィキペディア小見出し辞書

JSX

出典: フリー百科事典『ウィキペディア（Wikipedia）』 (2021/11/17 15:55 UTC 版)

「React」の記事における「JSX」の解説

JSXは、JavaScriptの構文に対する拡張である。HTMLと外観が似ているが、JSXは多くの開発者がよく知っている構文を使用して、構造化されたコンポーネントを描画する方法を提供する。Reactコンポーネントは、必須ではないが、通常はJSXを使用して書かれている。JSXはFacebookがPHP向けに作成した拡張構文であるXHPに似ている。 JSXのコードの例: class App extends React.Component { render() { return (

Header

Content

Footer

); }} 入れ子の要素 同じレベルの複数の要素は、上記の

のように単一のコンテナ要素にラップするか、配列として返す必要がある。 属性 JSXはHTMLによって提供されるものを反映するように設計された要素属性の範囲を提供する。カスタム属性もコンポーネントに渡すことができる。全ての属性はコンポーネントによってpropsとして受け取られる。 JavaScriptの式 JavaScriptの式 (文ではない) は、{}を使うことによってJSXのコード内に記述することができる。

{10+1}

上記のコードは下記のように描画される。

11

条件文 if文はJSX内で使用することはできないが、条件式は使用することができる。以下の例の{ i === 1 ? 'true' : 'false' }では、iと1が等しいので、文字列'true'が描画される。 class App extends React.Component { render() { const i = 1; return (

{ i === 1 ? 'true' : 'false' }

); }} 関数とJSXは条件式内で使用することができる。 class App extends React.Component { render() { const sections = [1, 2, 3]; return (

{ sections.length > 0 ? sections.map(n =>

Section {n}

) : null }

); }} 上記は下記のように描画される。

Section 1

Section 2

Section 3

JSXで書かれたコードはウェブブラウザで実行可能にするために、Babelなどのツールを利用して事前に変換する必要がある。この処理は通常はアプリケーションが配置されるよりも前の、ソフトウェアを構築している段階で実行される。