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_responsive




-Tech
-,

執筆者:

免責事項

このブログは、記事上部に記載のある投稿日時点の一般的な情報を提供するものであり、投資等の勧誘・法的・税務上の助言を提供するものではありません。仮想通貨の投資・損益計算は複雑であり、個々の取引状況や法律の変更によって異なる可能性があります。ブログに記載された情報は参考程度のものであり、特定の状況に基づいた行動の決定には専門家の助言を求めることをお勧めします。当ブログの情報に基づいた行動に関連して生じた損失やリスクについて、筆者は責任を負いかねます。最新の法律や税務情報を確認し、必要に応じて専門家に相談することをお勧めします。


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


関連記事

Apple製のフレームワークCombineを触ってみた

1 はじめに2 Combineとは3 Publishers3.1 Future4 Subscribers4.1 sink4.2 assign5 Operators5.1 Prepend5.2 Appe ...

【Flutter】背景ぼかしなど簡単な画像操作をImageFilteredで行う

1 はじめに2 準備3 実装3.1 ぼかし(ブラー)3.2 マトリックス3.3 BackdropFilterとの違い4 さいごに5 おすすめ書籍 はじめに 背景のぼかしや、画像のローテートなど、簡単に ...

Flutterで写真撮影しよう!

1 はじめに2 準備3 実装3.1 プレビューの表示3.2 写真を撮る4 さいごに5 おすすめ書籍 はじめに 今回はFlutterでカメラを使用して、プレビューの表示と写真の撮影を行いたいと思います。 ...

react-icon

【React初心者】改めて主要なhookの使い方

1 はじめに2 useState3 useEffect3.1 useLayoutEffect4 useCallback5 useContext6 さいごに7 おすすめ書籍 はじめに 今回はReactで ...

React+axiosでhttpリクエスト

1 はじめに2 axiosとは2.1 XMLHttpRequest2.2 Promise3 準備4 実装4.1 resultsの中身4.2 エラーハンドリング4.3 カスタムヘッダーの付与5 Reac ...

フォロー

blog-page_side_responsive

2019年6月
 1
2345678
9101112131415
16171819202122
23242526272829
30  

アプリ情報

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