【React Native】JSXとは？

はじめに

---

React Nativeのコードを初めて見たら分かりにくいことが多いと思います。例えば、下記のコードを見てみましょう。

<Text>Hello, world!</Text>

このReact Nativeのコードはなんでしょうか？HTMLとXMLに似ていますが、これがJSXと言います。

今回はこのJSXについて説明していきます。

JSXとは？

---

JSXはJavaScript の構文の拡張です。React JSとReact NativeのJavaScriptコードの中にJSX構文が書けます。コンポーネントを作るコードは一般的にJSXで書かれています。

JSXの構文

---

まずはJSX構文の形を見ましょう。HTMLを知っている方はこのような構文に慣れていると思いますが、HTMLを知らなくてもすぐに慣れると思います！

コンポーネントを使う場合、importするか定義することが必要です。下記のコードはViewとTextというReact Nativeの元々あるコンポーネントをimportします。

import { View, Text } from 'react-native';

JSXの書き方を見ましょう。

<コンポーネント名　Props>
	子要素
</コンポーネント名>

1. コンポーネント名：Importしたコンポーネントでも同ファイルで作ったコンポーネントでも使えます。
2. Props: Propsの数は0、１、複数でも使えます。
3. 子要素: 普通のテキストでも他のコンポーネントでも入ります。

■例1：テキストを表示する

<Text style={blueStyle}>
	Hello World
</Text>

• TextはReact Nativeからimportしたコンポーネントです。
• ここでのPropsは一つで、prop名はstyleで値はblueStyleです。
• 子要素はHello Worldです。

子要素のところでコンポーネントも入ります。

■例2：子要素にコンポーネントを入れる

<View>
	<Text style={blueStyle}>
		Hello World
	</Text>
</View>

ここでのViewのコンポーネントの子要素は例1のコンポーネントです。こういう風に子要素はコンポーネントでも大丈夫なので、子要素で何層も階層が作れます。

■例3：親要素と子要素を理解する

<A>
	<B>
		<C>
		</C>
		<D>
		</D>
	</B>
</A>

例３では下記が正解です。

• Aの子要素はBです。
• Bの子要素はCとDです。

■例4：閉じタグがない書き方

子要素がなかったらJSXをこのようにも書けます。

<コンポーネント名  Props/>

<Button color="#ff5c5c" title="button" />

■例5：式を埋め込む

JSXの中にJavaScriptの式が書けます。JavaScriptを書く場合は{ }の中に記述します。例えば、例１でstyleの値はJavaScriptのオブジェクトなので、{ }の中に記述しました。

<Button color="#ff5c5c" title={2+2} />

例5で{ }の中はJavaScriptが実行されるので、ボタンのtitleは4になります。{ }がなかったらエラーになります。

{ }の中で式しか書けないので、ifやforなどを使いたい場合はJSXの中で書けません。

JSXはJavaScriptにコンパイルされる

---

JSXを書いたらJavaScriptのコードにコンパイルされるので、JSXを書かなくてもReactJSとReact Nativeが書けます。

例えば、下記のJSXは下記の通常JavaScriptにコンパイルされるので、下記のJSXと通常JavaScriptは等価です。

JSXで書く方が一般的で、見やすいのでお勧めです。

JSXはReact JSとReact Nativeしか使えない？

---

React JSとReact Native以外でJSXが使えるかどうか調べました。使えるけど、そんなケースは便利かどうかまだ分かりません。理解できたことはJSXはReact JSと関係なく実装できるということです。

結論

---

JSXはReact JSとReact Nativeで使えるJavaScript構文の拡張です。構文はHTMLと似ていますが、本当はJavaScriptのコードにコンパイルされます。JavaScriptとJSXを混ぜることは最初に汚いと思うかもしれませんが、JSXなしのコードを見たらJSXを使った方が割と綺麗なコードだと思います。

参考

---

• JSXについて
• JSXの導入
• JSX を深く理解する
• JSXはReact JS以外でも使える

---

これからエンジニア転職を考えている方へ

---

ロックシステムではエンジニアスクール「ロックシステムアカデミー」を運営しています。
プログラミングの基礎知識から本格的な開発ノウハウまでしっかり教えます！

教室は生のIT企業！
◆　実際の開発プロジェクトを通して経験できる！
◆　現役エンジニアが直接指導！
◆　20代の転職成功率100％！

是非公式ホームページもご覧ください