Tech

ReactNative入門

投稿日:2019年6月20日 更新日:

はじめに

こんにちはnukkyです。
今回は改めてReact Nativeの入門として必要そうなことをおさらいがてらまとめました。

そもそもReact Nativeとは

React Native は、Facebook社が開発・公開しているネイティブアプリのクロスプラットフォーム開発フレームワークです。言語としてJavaScriptを使用し、Reactを触ったことがある人であれば気軽にモバイルアプリ開発を始められます。
React Nativeは、プログラミング言語として主にJavaScriptでコーディングをしていきます。そのため、JavaScriptの知識が必要です。

JSXとは

JSXはJavaScriptにXMLライクのシンタックスを追加する言語拡張です。JSXを使うと、JavaScriptコード中にHTMLタグを埋め込んでいるかのように記述できます。

ReactおよびReact Nativeでは機能をコンポーネント単位で管理しますが、コンポーネントを使う場合はJSXを使って書きます。

下記コードでは View というコンポーネントの中にTextというコンポーネントを置いています。Viewは要素を描画するためのコンポーネントで、HTMLで言うところのdivやspanにあたります。

JSXに値を埋め込む

JSXはタグをそのまま表示するだけではなく、JSXの中にJavaScriptの値を埋め込むことも出来ます。以下のような形で記述します。

このように{}の中に変数などを記述することで、その変数の値をJSXの中に埋め込むことができるようになります。実際の記述は以下のようになります。

ここで一つ注意して欲しいのが上記JSXをdivタグで囲っていることです。理由としては、renderメソッドは1つのエレメントのみという制約があります。divタグを外してしまうとエレメントが2つになってしまいエラーになってしまいます。

属性の値を設定する

{}による埋め込みは、テキストコンテンツのみだけではなく他の箇所にも使用することができます。例えば、タグの属性の値にも使用することができます。

このようにaタグのhref属性に{}で変数を設定することができます。

関数でJSXを作る

JSXの値は、変数などに代入して使用するだけではなく、普通の値として様々なところに利用することができます。計算の式や関数、オブジェクトのメソッドなどの中にもJSXは利用できます。
例えば関数の戻り値でJSXをreturnすれば、様々なタグを生成する関数を用意することができます。上記のサンプルコードを以下のようにすることもできます。

 

コンポーネントとは

コンポーネントとは、画面に表示される部品のようなものです。表示の内容やデータ、処理などを一つのオブジェクトにまとめたものです。React Nativeでは、このように自分で作ったコンポーネントや、もともとあるTextなどのコンポーネントを組み合わせて、画面のUIを組み立てていきます。

再利用性

React Nativeのコンポーネントの大きな特徴として、再利用可能であることが挙げられます。
たとえば、アプリにはどの画面にも共通のパーツがあると思いますが、そのパーツをコンポーネントとして一箇所で実装し、他のところから参照することで、同じコードを繰り返して書かずに済みます。

新規コンポーネントの作成

プロジェクトのsrc/components/sample.jsを作成し以下のコードを記述します。

これでコンポーネントができました。export defaultで宣言したことにより他のモジュールからimportできるようになります。

export default class

そのclassがimportされるときにdefaultで呼ばれるクラスになります。

defaultをつけない場合クラスを指定してimportします。

コンポーネントの呼び出し

Hello WorldにSampleクラスをimportして呼び出したいと思います。

Sampleをimportしたので<Sample />これだけでコンポーネントの呼び出しが可能になります。

PropsとState

Props

React Nativeではアプリをコンポーネント単位で管理しますが、Propsとはコンポーネントと外部とのインターフェースであり、コンポーネントに必要な値を受け取ることができます。
状態によって値が変わるようなものはStateに任せるため、Propsはimmutableで変更してはいけません。
React Nativeの標準として提供されるコンポーネントにもPropsは定義されているので、コンポーネントの使用時にカスタマイズできます。また自分でコンポーネントを作る際にも、Propsを定義することでカスタマイズ可能な状態にすることができます。

State

Propsはimmutableでコンポーネントの属性を保管しておくものでしたが、それに対してStateはコンポーネントの状態を表す値を保管するものになります。
これは、コンポーネントの現在の状態を扱うためのものです、つまりStateの値を操作することでコンポーネントの状態を操作します。
コンポーネントの表示の変更など必須とも言える機能になります。

Stateを用意する

Stateはコンポーネントに「state」というプロパティとして用意されます。この中にStateの値がまとめて保管されます。まずはconstructorで値を初期化します。

Stateの値を表示する

初期化したStateは「this.state.〜」で扱うことができます。

Stateの値を更新する

ここからがStateのキモの部分である状態の変更・更新になります。Stateの更新は「this.setState」で行います。Stateの状態を変える時には必ずsetStateメソッドを使って変える必要があります、setStateメソッドを呼ぶとrenderメソッドが必ず呼ばれるので画面の表示の更新もそのまま行ってくれます。

イベントハンドリング

上記のようなコードの場合onClickからメソッドを呼び出したいと思います。その場合は明示的にクラスメソッドをバインドする必要があります。上記のコードを元にconstructorでdoActionメソッドをバインドしonClickで呼び出したいと思います。

 

さいごに

自分も基礎的な部分の理解がおろそかだったので入門として復習がてら記事にさせてもらいました。今後もReact Nativeの勉強を続けていき記事にするのでよろしくお願いします。

おすすめ書籍

React入門 React・Reduxの導入からサーバサイドレンダリングによるUXの向上まで (NEXT ONE)  React.js&Next.js超入門

page_footer_300rect




page_footer_300rect




-Tech
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

ReactNative環境構築[Android/iOS]

1 はじめに2 準備2.1 HomeBrewをインストール2.2 node.jsのインストール2.3 Watchmanのインストール2.4 React Native CLIのインストール2.5 サンプ ...

ReactNativeでアニメーションの実装

1 はじめに2 準備3 実装3.1 イベントを通しての実行3.2 アニメーションについて4 lottie-react-native4.1 Lottieとは5 準備6 実装7 さいごに8 おすすめ書籍 ...

ReactNative開発のスタート、シミュレータでのデバッグ

1 はじめに2 改めてシミュレータの起動3 表示内容を変更してみる3.1 App.js3.2 表示テキストの変更3.3 シミュレータの更新「command + R」4 デバッグメニュー4.1 Real ...

iOS13ダークモード対応

1 はじめに2 一時しのぎ3 実装3.1 UI Element Colors3.2 Color Set3.3 コードで描きたい3.4 カスタムのカラーを定義する3.5 画像をモードで動的に変更したい4 ...

MLKitで使えるTensorflow Liteについて調べてみた

1 はじめに2 そもそもTensorflowとは3 そしてTensorflow Liteとは4 Tensorflowの環境構築4.1 pyenv, pyenv-virtualenvをインストール4.2 ...

フォロー

follow us in feedly

page_side_300rect

2019年6月
« 5月 7月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。