【実践技術書】React Native 入門

実践技術書

おすすめ読書

JavaScript

React

プログラミング

React Native

React Nativeの入門書を試しました。 WEB上のIDEを利用して実際に動くアプリの作成を行うことができます。ローカルに環境を用意することなく一通り学ぶことができます。

React Nativeを用いることで、AndroidとiOS両方で動作するアプリを構築できます。たくさんのコンポーネントを利用することもでき簡単に実装できます。

ただし、この本ではストアでのアプリ公開の手順などは書かれていません。その部分は他で学ぶ必要があります。

なぜこの本を読んだか

アプリ制作の手法を学ぼうと思いました。ゆくゆくは作成したアプリをストアで公開したいです。

ReactNativeを使うことでAndroidとiOS両方で動作するアプリが作れますので、お手軽そうと感じています。実際、UIなどの部分で様々なコンポーネントが用意されているので、その点でも効率よく開発ができると感じました。

本の概要

本に出てくるソースコードはサンプルコードとして出版社のHPからダウンロードが可能です。

インストールとセットアップ

Android StudioやXcode、npmやReactNativeのインストール方法が紹介されています。いろいろな項目が合ってわかりにくいですが、必要なものを選択してセットアップしましょう。

おすすめはExpoSnackを利用してWEB上で開発する方法です。ローカルに何もインストールしなくていいので、簡単に初められます。
基本をマスター

基本の作り方とコンポーネントの基本についてです。Reactに関する知識の説明は少しありますが、詳細に知りたい場合は公式サイトか別の書籍を参考にしたほうがいいです。
UI関連のコンポーネント

スライダーやスイッチなどUI表現のコンポーネントを実装してみます。リストやフォームなどもここで出てきます。
レイアウト関連の実装方法

ヘッダーやflexboxなどの表現方法の紹介です。
OS固有の機能

AndroidとiOSそれぞれで利用できるコンポーネントや機能の紹介です。ここに関してそれほどこった作りを目指していないのであれば飛ばしても問題ないと思います。
グラフィック描写

Canvasなどをつかって図形の描写を行います。四角や丸の図形を描いて、グラデーションしたり回転縮小したりします。ここも、あまり使う機会がなければ飛ばしていいと思います。
タイマー・アニメーション・データアクセス

ちょっとむずかしくなってきますが、複雑な処理を行います。データアクセスではネットワークにアクセスしたり、ファイルの読み書き、ストレージへのアクセスなどを行います。アプリつくる上でデータ保存とかは重要なのでしっかり身につけておきたいです。
サンプルアプリ開発

3つのアプリを試しに作ります。WEBViewやストレージへのアクセスなど、これまでの知識をフル活用するので、良いまとめになります。位置情報取得や権限取得など、ここで初めて出てくる知識もあるのでぜひ体験しておいてほしいです。コードの量はそれほど多くないので、簡単に実装できます。

本の特徴

Expoを利用することで、簡単に React Nativeを利用できます。ストアを通さず独自のシステムでアプリを公開・配信したりできます。実用には耐えないと思いますが、練習やデバッグであれば十分そうです。

しかもExpoにはSnackというWEB上で利用できる開発環境が用意されています。ローカルにパッケージのインストールなどを行うことなく、WEB上で構築、実行ができます。これらの使い方が書かれているので、一度試してみることをおすすめします。

上記以外のAndorid StudioやXcodeのインストール手順や構築方法、デバッグ方法も簡単にですが紹介されていました。

ソースコードはどれも短いのでわかりやすいと思います。複雑な設計や構造ではないので理解が早いです。解説も丁寧に書かれており処理の概要が分かりやすかったです。

注意点

Expoの開発・バージョンアップが盛んです。そのままでは動作しなくなっている関数などがあるので、注意が必要です。
- Headerのiconの表示がエラーになることがありました。 Expoで利用するiconのモジュールをインストールすれば解決できそうでしたが、よくわからなかったので、その部分は取り除いて進めました。
- React Navigationの利用方法が変更されている
  
  「createStackNavigator」という関数をReactNavigationからロードして利用しますが、v3へのアップデートによる変更の影響でそのままでは動作しないときがありました。バージョンを「2.11.2」にするか、ソースコードを変更するかしましょう。エラーの内容で検索するとstackoverflowなどで解決方法を見つけられます
```
// 動かなかったソース
import { createStackNavigator } from 'react-navigation';
~~ 省略 ~~
export default createStacknavigator(
  {
    Home: { screen: FirstScreen },
    Next: { screen: SecondScreen },
    Last: { screen: Thirdcreen },
  },
  {
    initialRouteName: 'Home',
  }
);
```
```
// 動いたソース
import { createStackNavigator,createAppContainer } from 'react-navigation';
~~ 省略 ~~
const RootStack = createStackNavigator(
  {
    Home: { screen: FirstScreen },
    Next: { screen: SecondScreen },
    Last: { screen: Thirdcreen },
  },
  {
    initialRouteName: 'Home',
  }
);

// このコンテナ作成処理を自分で行う必要がある
const App = createAppContainer(RootStack);
export default App;
```
実行環境は自分のスマホにEXPOアプリをインストールして、連携して実行するのがおすすめです。

ExpoSnackではWEB上で実行できる「Appetize.io」を利用することができますが、おすすめできません。IDEの右側にスマホが表示されて、そこでアプリを動かすことができ一見便利そうです。しかし、無料のアカウントではリソースを他ユーザーと共有するようで、他ユーザーの使用状況によって待たされることが多かったです。午前中であれば、ほとんど待ち時間無しでスムーズに実行できました。

各OSのストアからExpoアプリをインストールすれば、WEB上のIDEと連携して、手元の端末で実行できます。こちらは待ち時間が全く無いのでおすすめです。端末のIDであったりQRコード読み込みで連携が開始できます。