初めてのReact Native(開発環境篇)

初期スキルセット

一応職業SEを15年ほどやっている身ではありますがキャリア的にWebには殆ど縁がなく

Web関連

ホームページ作成、Perlでcgi,ASP.NET,楽々フレームワーク、など。
つまりは最早レガシーといわれる部類に入る技術のみで、Bootstrapすらも触ったことないレベル。

スマホアプリ開発関連

Visual Studio2017でIonicを使って簡単なおもちゃ作ったのと、Android Studioで言語としてkotlinを選んで入門書のコードを打ち込んだりはしてました。
スマホアプリ開発におけるベースの知識は理解出来てないまでも触れていた程度です。

React Nativeでの開発の、その前に

スマホアプリ開発は数多あるフレームワークから選択するところから始まります。選択する際にクロスプラットフォームということはは大前提でした。そうすると Xamarin 若しくは JavaScript系 となります。ここでXamarinを選択すると日頃慣れ親しんだ環境の延長に成ってしまいそうと思い却下。昔からWeb関連余りやってこなかったし、それに何故か、またはそれ故かJavaScriptにかなり苦手意識があり。でも折角の機会だし敢えて苦手なJavaScriptの方へ行こうかと思いました。JavaScript界隈が今ホットだからというのも大いに選択の理由としてはありました。
JavaScript系列となると今はReact Native(以下 RN と表記),Angular,Vue.jpの三巨頭から選ぶことになります。この中で何故RNにしたかというと、その動機は実はあまりはっきり覚えていないのですが、ネイティブなものを作ることが出来る、というところだったかなぁと思います。Angularは前に少しだけIonicという形で触れているので、違うものをという考えがあったのかなぁと、自分のことながら推測したりも。
つまりこれといった大した決め手はありませんでした。あと個人的にExpoは何となく使いたくなかったので使ってません。でもFacebookが推しているようで、後々使わざるを得なくなるかもですね。

オススメ
これから色々な技術について記載していきます。ネットにはあらゆる記事があってとても参考になりますがまとまった形の情報というものは意外と無いものです。
そこでお勧めなのがKindle Unlimitedです。紙媒体の成書として成り立つプロのテクニカルライターの本からブログ記事をまとめたような一冊数百円のものまで。Kindle Unlimitedの本の良いところは細かい所は置いといて知りたいことをさくっと知ることができる本が多いのが僕的に大いに助かりました。ブログ以上 成書未満とでも言えそうな。月1000円などすぐに元とれると思います。用が済んだら解約すればいいですし。

当方の開発マシンは

Think paddad X230
CPU i5
Mem 16G
SSD 480G
OS:Fedora 29 Workstation

これに外部モニタ、USBキーボードというスタイルで開発してました。

React Native 開発環境構築

使ったものは

・Android Studio まずこれが無くては始まらない。
・npm
・react-native-cli (どうも今の流れはexpo-cliの様ですが)

です。
因みにエディタはatomです。まるで機能使いこなしていませんが。

開発環境の関連でポイントとなることを列記します。

・JAVA_HOMEを忘れずに設定しましょう
Android Studioで開発する場合はAndroid Studioが気を利かせてくれますが、RNの場合はそうはいかないので。

・Emulatorの起動
デバッグの時、まずエミュレーターを立ち上げてから、デバッグのコマンドであるreact-native run-androidを叩きます。
まず最初にAndroid Studioで使いたいエミュレーターを作成します。その後に作成したエミュレーターを直接起動します。エミュレーターの起動はAndroid Studioからでも出来るようですが毎回立ち上げるのも面倒なのでエミュレーターを直接起動します。毎回長いコマンド叩くのも面倒ですので起動用シェルを用意しておくと便利です。
エミュレーターはSDK配下、つまりANDROID_HOME配下にあります。

ANDROID_HOME=/home/XXXXXX/Android/Sdk

という感じで設定します。またエミュレーター起動用のシェルは

# !/bin/bash
$ANDROID_HOME/tools/emulator @Nexus_5X_API_27

という感じになります。ご覧の通り @マークの 後ろに起動したいエミュレーターを指定します。

・Node.js
まずはNode.jsをインストールします。バージョン管理するnodebrewなりndenvなどを利用してもいいかもれません。Node.jsを入れると以下のnpmを使えるようになります。

・npm
ググったものをそのまま打ち込んでも問題ないと思いますが、npm install XXX -g,npm install XXX --save 等のオプションの意味を理解しておくと何かと安心できます。。あとnpm updateとかnpm outdatedなどよく使うコマンドも一覧にしてくれている記事があるので一回目を通しておくことをお勧めします。

・gradle
react-native init XXX でプロジェクトを作成した後にまず最初にやることはgradleのアップデートです。gradleのバージョンが古いとOpen Jdk 1x以降(かと思われます)の位置を認識してくれません。基本新しいに越したこと無さそうです。

gradleのアップデートの仕方は
(プロジェクト名)/android/gradle/wrapper/gradle-wrapper.properties
の5行目
distributionUrl=https://services.gradle.org/distributions/gradle-5.2-all.zip
のZIPファイル名を本家サイトで確認したアップデートしたいバージョン(基本最新でしょう)に書き換える。

次に
(プロジェクト名)/android/build.gradle
の末尾にある

task wrapper(type: Wrapper) {
    gradleVersion = '4.4'
    distributionUrl = distributionUrl.replace("bin", "all")
}

という感じに記載されているtask wrapperなるものの4行を削除します。

最後にプロジェクトのディレクトリで

./android/gradlew build

を実行します。

・webpack,Babel
縁の下の力持ちのツールについてざっくり調べておきましょう。筆者もざっくりの認識しか持っておらず、BabelはRNに限って言うとJSXなる独自言語を一般的な言語翻訳してくれるのだろう、webpackは複数のJSを一つにまとめてくれるのだろう、ぐらいの認識です。外れてはないかもだけれどざっくり過ぎてわかっているとは到底いえません。でも裏で何が動いているかぐらいは把握して置いた方が安心感が持てます。
webpackについては前述のKindle Unlimitedに詳しい書籍があります。斜め読みぐらいはしました。(こういう小さいツールについての書籍は紙媒体では出版しにくいでしょうが電子書籍だから出来るのでしょう)

以上で開発環境構築篇を閉じます。