TOP

BLOG

技術研究ブログ

【React Native】JSXとは?

【React Native】JSXとは?

2019-12-23

はじめに


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、1、複数でも使えます。
  3. 子要素: 普通のテキストでも他のコンポーネントでも入ります。

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

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

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


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

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

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


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

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

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


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

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

<コンポーネント名  Props/>
<Button color="#ff5c5c" title="button" />

■例5:式を埋め込む

JSXの中にJavaScriptの式が書けます。JavaScriptを書く場合は{ }の中に記述します。例えば、例1で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を使った方が割と綺麗なコードだと思います。


参考



株式会社ロックシステム
「ブラック企業をやっつけろ!!」を企業理念にエンジニアが働きやすい環境をつきつめる大阪のシステム開発会社。2014年会社設立以来、残業時間ほぼゼロを達成し、高い従業員還元率でエンジニアファーストな会社としてIT業界に蔓延るブラックなイメージをホワイトに変えられる起爆剤となるべく日々活動中!絶賛エンジニア募集中。

他の記事へ