ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート

  • 11
    いいね
  • 0
    コメント

はじめに

個人的に元々のキャリアがWebに近しいところからのスタートであったので、JavaScriptに関する部分もiOSやサーバーサイド同様にキャッチアップしていきたいという思いがあったことや、先日参加させて頂いたTry!Swiftの中でもReactNativeに関連するお話をお聞きする機会があったことも踏まえて、今年から取り組んでみていました。

今回は自分のこれまでReactNativeを始めるにあたって、「こんな感じで取り組んでみました。」という備忘録と調べながらのサンプル作成において活用したものや参考リンク等をざっくりとまとめてみました。

あまりコードそのものに関する解説はない記事にはなってしまうかと思いますが、取り組む上で参考にした記事のリンクや自分で作成したリポジトリ内のコードや動きに関する部分はできるだけ掲載していきますので、これからReactNativeに携わる際の少しでも参考になれば幸いに思います。

1. ReactNativeをはじめてみるための準備と基本的な部分について触れてみる

ReactNativeを始めるにあたり、なかなかドキュメントを読んだりするだけでは掴みきれないのではないかと思ったので、まずは簡単なところからで良いので「Step By Step」で少しずつ取り組んで行こうというような方針で進めていくような形にしてみました。

★1-1. 環境構築やセットアップに関する部分のこと

ReactNativeの環境構築等に関しては、下記のような手順で作成することができます。
自分の環境の場合では、元々node.jsをbrew経由でインストールしていなかったことやnode.jsのバージョンが古かったこともあり、下記のような形でインストールとプロジェクトの作成をしました。

//Node.jsのインストール(事前にHomeBrewをインストールする必要がある)
$ brew install node
$ brew install watchman

//react-native-cliの再インストール(以前に他のバージョンをしていたため下記のコマンドを実行した)
$ npm uninstall react-native-cli -g
$ npm install npm@latest -g
$ npm install react-native-cli -g

//react-nativeのインストール
$ react-native init ProjectName

導入方法やその他基本的なコンポーネント等の事項に関しては、下記のリンクにReactNativeに関する公式ドキュメントがあるので一読をして置くと良いかと思います。

★1-2. ReactNativeのはじめの一歩として作成したサンプルに関して

ドキュメントをわからない状態のままで構わないので、一通り読み進めた後には下記の動画での解説とサンプルを写経して読み進めていくような形で進めていきました。

参考にした解説動画:

上記のリンクで掲載した解説動画に関しては、React及びReactNativeの基本的な書き方の部分やFlexboxでのレイアウト作成の基本的な部分に関する解説に加えて、実際に簡単なストップウォッチのアプリを作成するチュートリアルが紹介されています。下記は動画で紹介されていたサンプルソースに関して写経をした後に、自分なりに日本語でのドキュメンテーションを行ったものになります。

作成したリポジトリ:

また、いきなり自分でサンプルを作成する形ではなく、YouTube内で紹介されているサンプルの写経をやっていき、必要と感じた部分やJavaScriptの書き方等に関する補足事項に関しては、READMEやソースコード内に参考になった記事へのリンクに関してもまとめてありますので、参考になれば幸いです。

2. ReactNativeに取り組んだ際に最初に押さえておいた部分のまとめ

ReactNativeに取り組む前にはまずは、Reactに関する基本的な理解(コンポーネントやVirtualDOM等)をしておく必要があります。
Reactに関する基本的な理解や概念の整理をする際には、後述のJavaScriptやReactに関する書籍と併せてReactに関する基本的な考え方の整理に下記の記事も参考にしました。

そして実際にReactNativeのサンプルソースの読解を進めていく際にReactの基本的な事項と併せて、さらに必要な下記の要素についてはしっかりと整理していきたい部分については下記のような形にまとめています。

★2-1. StateとPropsに関する簡単なまとめと参考資料

それぞれコンポーネントの状態管理を行う上で、まずはしっかりと押さえておかなければいけないのがPropsStateになります。ざっくりと役割を言葉でまとめると下記のようになります。

  • State(ステート): コンポーネントの内部変数のようなものでコンポーネントの状態変化を保持するために使用する。またコンポーネントの外部からはアクセスできない。
  • Props(プロパティ): コンポーネントの外部から与えられるオプションのようなもので親のコンポーネントから子のコンポーネントに渡される値。またコンポーネントはPropsの値を変更してはいけない。

PropsとStateに関する簡単なまとめ:

prop_and_state.jpg

Stateの更新について:

how_to_use_state.jpg

また、PropsとStateの役割や概念に関する理解を深める上では下記の記事や資料を参考にしました。

特に後述するReduxを理解する際には、PropsとStateの概念や活用方法に関する知識がかなり重要になってくる部分になります。

★2-2. Flexboxでのレイアウトの作り方や書き方に関する参考資料

ReactNativeの画面のレイアウトに関しては、下記のような記載方法で各々のコンポーネントに対してスタイルを作成していく形になります。
肌感としてはCSSでのスタイルの定義とかなり似た感じで進めていくことができますが、スネークケースではなくキャメルケースで記載する点が従来のスタイルシートの記載と異なる点でしょうか。

XXX.js
import {..., StyleSheet, ...} from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

またFlexboxの概念やレイアウト作成に関するものについては最初はなかなか慣れなかったこともあり、下記の記事や資料を参考にしました。

この辺りのUIレイアウトの部分に関しては個人的にかなり関心の高い部分ではあるので今後もしっかりと追っかけて行ければと思います。

★2-3. ReactComponentのライフサイクル

こちらに関しても下記にピックアップした参考記事を元に、自分なりにノートに書いてまとめてみました。
ネイティブのiOSアプリ開発においてもライフサイクルの理解が重要になってくるように、ReactNativeのアプリ開発においても同様に重要な部分になってきます。

component_lifecycle.jpg

★2-4. Reduxのフローチャートとそれぞれの役割

Reduxはアプリ開発の中で肥大しやすくかつ複雑になりやすいstate(状態)の変化に関する管理をするためのものになります。データの流れを一方向(Actions -> Reducers -> Storeという流れ)にして、アプリ内のstate(状態)をStore内にて一括で管理することによって、現在のアプリの状態遷移をわかりやすくする役割を果たしてくれます。

今回のサンプル内ではデータの追加・変更・削除といったデータが絡んでくる処理やログイン・ログアウトの認証状態の管理に活用しています。

下記に記したノートに関しては、下記の内容を参考に「キモになりそうな部分」をイメージにして自分でメモしたものです。

この部分については他の資料も参考にした上で実際に題材となるサンプルと一緒に取り組むとより効果的に理解が深まるのではと思います。

Reduxの簡単なフロー図まとめ:

redux_flow.jpg

1. それぞれの役割の説明:

  • Action:「何をする」という情報を持ったオブジェクト
  • ActionCreateors:Actionを生成するメソッド ⇨ dispatchをしてcreator(ActionCreateors)で作成したactionを渡す
  • Reducers:actionを受けてstateを変更する ⇨ actionstateを受け取って新しいstateを返す
  • Store:ReducersとActionCreateorsのハンドリング ⇨ アプリケーションの状態の保持(getState():stateへのアクセス、dispatch(action):state更新、subscribe(listener):リスナー登録のメソッドを提供)

2. Reduxアプリケーションのデータライフサイクル:

  1. store.dispatch(action)を呼ぶ
  2. storeは受けたactionと現在保持しているstatereducerへ渡す
  3. 子のreducerの返したstateを親のreducerがまとめて1つの大きなツリー状のstateを返す
  4. reducerが作成した新しいstatestoreが保持する

また一番最初にReactNative + Reduxの組み合わせのサンプルを試したりまとめたりする前には、下記の記事も目を通しました。

Reduxに関する基本事項の整理と理解をする際には、サンプルに取り組む際にはコードの中にできるだけコメントと理解の参考にした記事のリンクなども一緒に掲載し、基本概念やフローの図解等に関してはノート等に図解として残しておくとより自分の中で整理できると同時に理解も早まる気がしたので、自分でアプリを作成する際にもできるだけ設計の足跡を残しておくようにしています。

(後述のUdemyのオンラインコースを利用して作成したeduxを使ったサンプルでもReduxのそれぞれの処理に関するポイントをコメント内に残しています)

この記事ではReactNativeに触れる際に最低限理解するのに参考になった基本的な事項に関してざっくりとまとめた形なので、

3. Udemyのオンラインコースを利用してReduxやデータを伴う挙動に関して触れてみる

簡単な基本事項の整理が終わったあとは、ReactNativeを活用してもう一歩踏み込んだサンプルを作成するプラクティスをこなしてみようと感じたので、Udemyで下記の講座を受講してみました。

このコースではReactNativeでの基本的なコンポーネントの作成方法から、非同期処理のサンプルをはじめ、実際にfirebaseを活用した認証画面を作成するサンプルやReduxを活用したサンプル等が取り揃えられており、ドキュメントを見るだけではイマイチ掴みにくかったReduxの概念とコードとの関係性が理解できるようになったのは、個人的には良い収穫であったなと感じました。

1. コンポーネントの活用とAPIからのデータ取得と表示のサンプル:

このサンプルに関してポイントとなる部分は、コンポーネントを使い回す方法や通信処理を利用する際の実装部分がポイントになるかと思います。このサンプルではAxiosというライブラリを使って非同期通信部分のロジックを作成していますが、fetchメソッドを使用しての処理で記載してもここは良いかもしれません。

XXX.js
//APIよりデータを取得する(axiosを利用) → レスポンスをステートに格納する
axios.get('https://immense-journey-38002.herokuapp.com/articles.json')
.then(response => this.setState({ albums: response.data.article.contents }));

非同期処理のハンドリング部分に関しては、実際にアプリを作成する機会では活用する部分になってくるので、ライブラリの有無に関わらず処理の書き方をやPromiseに関する知識に関しては下記の記事が参考になりました。

2. Firebaseの認証機能を利用したサンプル:

このサンプルに関してポイントとなる部分は、Firebaseの認証機能を利用してログイン・ログアウトの状態をステートで保持して管理する部分がポイントになるかと思います。

XXX.js
//コンポーネントの内容がMountされる前に行う処理
componentWillMount() {

  //firebaseのセッティング情報を記載する
  //※ API情報に関してFirebaseコンソールを取得 → Authentication → 「ログイン方法」でメール/パスワードを有効にする
  firebase.initializeApp({
    apiKey: "XXX",
    authDomain: "XXX",
    databaseURL: "XXX",
    storageBucket: "XXX",
    messagingSenderId: "XXX"
  });

  //認証状態が変更された際の処理
  //※取得できたuserオブジェクトを取得してログイン状態のステートを更新する
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.setState({ loggedIn: true });
    } else {
      this.setState({ loggedIn: false });
    }
  });
}

このサンプルにおいてはFirebaseのログイン・ログアウトの状態をcomponentWillMount()のタイミングで取得し、その状態をによって画面表示を分ける形になっています。

3. Reduxを活用したサンプル:

上記2つのサンプルの様にシンプルな形のものであれば、それぞれのコンポーネントで定義したステートの状態だけで管理しても特に不都合はありませんが、データのCRUDを伴ったりする場合等をはじめ、複雑な状態管理を管理しやすくするめにReduxを用いてステートの流れを1つの場所に管理して、必要な部分だけ値を更新したりしようとするために使うものです。

特にこのサンプルの中に掲載されている従業員の管理アプリサンプルの部分の実装に関しては、必要なライブラリを含めてReduxを用いての状態管理をする処理のメリットを掴むのに非常に役に立った様に思います。

この部分は「従業員の管理アプリサンプル」のリンクに掲載しているソースにコメントを残したのでご参考になれば幸いに思います。また他のサンプル実装コードに関しても、全てを掲載するとかなり長くなりそうな感じだったので、今回は自分が作成したサンプルのリンクを掲載する形にしています。

4. 自分なりに気をつけたことやまとめ方のポイントまとめ

今回取り組んだサンプルが全て英語であったことや、始めた時点では「何となく知っている」ような不慣れな状態であったので、下記の3つのことを意識しながら取り組んでみました。

  • 1. ただ書かれた通りに実装するのではなく必要な部分はノート等にまとめておく
  • 2. わからない部分に出会った場合にはコメントと参考リンクを残す
  • 3. コメントはなるべく自分の言葉にする

この取り組み方だと時間も結構かかる上に割と冗長な感じのスタイルにはなりますが、こうすることで次に時間が経過した際や自分でアプリを作成した際に復習がしやすくするためのある程度目星をつける意味でも有益かなと思います(あくまでもここは私個人の取り組み方なので恐縮ではありますが...)。

5. この記事をまとめる&コードを写経するプラクティスを進めるにあたり取り組んでいる書籍

サンプルを作成するプラクティスを通じていく中で「自分のJavaScriptの書き方がES6にキャッチアップしていないかも...><」と強く感じた部分もあったり、Reactの基本的な部分やReactNativeのソースコードを触る上では書籍も併せて進めていました。
まだまだ私自身もReactNativeに関しては多くの事ができるわけでは決してありませんが、現在自分が個人的に読み進めている書籍に関しても下記にご紹介しておきます。

★5-1. JavaScript及びReact.jsに関する基本事項の整理のために活用

JavaScriptの基本部分に関する理解:

React.jsの概念に関する理解:

こちらはReactNativeと直接的な関連性はないかもしれませんが、元々WebでReactを触っていた経緯があったのでReactに関する基本的な概念の復習や整理をするためにこの書籍も併せて読みました。

★5-2. ReactNativeに関する基本事項の整理のために活用

こちらで紹介する書籍は全て洋書にはなってしまいますが、Githubでソースコードも一緒にあるので英語に抵抗があったとしてもソースコードと併せて動きを見たり読み進めていく事で理解がより深まるのではないかと感じました。特にReduxに関する理解やReduxを絡めたアプリ開発の手順や理屈に関しては、掴むのになかなか苦戦した部分でもあったので、実際にコードを書いて「ああ、こんな感じでデータのやり取りをしていくのか」という肌感を掴んだり、UIを実装する上での参考にはとても役に立つ感じがしました。

Mastering React Native:

React Native Cookbook:

特に上記の2つの洋書に関しては、きっちりと理解して実際のアプリ開発やサンプル作成の課程の中でガンガン活用していこうと感じています。またReduxを利用したstateのやりとりに関しては、下記のリポジトリのように自分で写経と併せてActionとReducerに関するテストもささやかではありますが(このテストが果たして必要なのかはわかりませんが...)書いたりもして色々試したりしている感じです。

※ 上記のソースは「Mastering React Native」での掲載サンプルに自分なりのドキュメンテーションを加えたものになります。

あとがき

ネイティブのiOS開発とは勝手が違う部分(特にレイアウトを構築する部分)に関しては若干最初はちょっと戸惑いそうにはなる部分はあれども、iOSとAndroidで同じコードを使用できる点や、見た目部分をコンポーネントでそれぞれ管理することもできるので、なかなか興味深い点が多いなという印象を受けました(レイアウトの組み方についてはAndroidに近い印象)。

ただ、Reduxの理解に関する部分やデータの連携に関する部分については、実際にアプリ開発のプロセスの中で理解をしないとなかなかピンと来ない部分もありました。
このような場合については、Firebase等を活用したデータのCRUD処理を伴うようなアプリの中でReduxを導入してみて、サンプル試してみる形で進めていくと、うまく概念を理解することができたように思います。

また個人的にReactNativeのUI実装に関するライブラリを調べる機会があったので、下記のUI系のライブラリに関しても色々と調査をしていました。

色々と調べてみるとネイティブアプリでの実装する際のデザイン的な参考にできそうだなと感じる点もあったので、まずは実際にReactNativeでアプリを作成する課程の中で色々と試してみていきたいと思いました。ネイティブアプリやサーバーサイドに加えて、ReactNativeについてもしっかりとモノにしていきたいと感じた次第です。(次こそはTipsしっかり掲載できるようにしなければ...)

また、まだまだ始めたばかりなのでサンプルソースの誤りやご指摘事項等がありましたらよろしくお願い致しますm(_ _)m