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超入門

blog-page_footer_336




blog-page_footer_336




-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 サンプ ...

【Unity】AnimationControllerの基本的な使い方

1 はじめに2 事前準備2.1 キャラクター2.2 アニメーション3 Sceneに追加と設定4 AnimationController5 使い方5.1 State5.2 Transition5.3 P ...

【Unity】URP対応のAssetのPrefabがピンク色になる件

1 はじめに2 レンダリングパイプラインとは2.1 ビルトインレンダリングパイプライン2.2 ユニバーサルレンダリングパイプライン3 URPの設定手順3.1 URPのインストール3.2 URPのアセッ ...

ReactNativeデータ永続化

1 はじめに2 データ永続化の方法3 AsyncStorage4 react-native-async-storage4.1 インストール4.2 実装5 Realm5.1 インストール5.2 redu ...

Go言語

[Go初心者]テストについて学習

1 はじめに2 テスト2.1 エラーの値を比較する2.2 エラーの型を比較する3 httptest3.1 httptestの使い方4 さいごに5 おすすめ書籍 はじめに 今回はGo言語のテストについて ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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