マリーとジョーのIT研究ブログ （ ロックシステム）

株式会社ロックシステムの技術研究チームのマリーとジョーです。IT研究ブログを色々更新していきます！

【React Native】JSXとは？

React Native JSX
f:id:rocksystem6611:20191205105916p:plain

この記事の内容

  1. はじめに
  2. JSXとは？
  3. JSXの構文
  4. JSXはJavaScriptにコンパイルされる
  5. JSXはReact JSとReact Nativeしか使えない？
  6. 結論
  7. 参考

はじめに

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を使った方が割と綺麗なコードだと思います。

参考