React Native導入する人がHello worldまで早く辿りついて欲しい（私のようにならず、、、

新卒2年目アマチュアjavaScriptエンジニアのSickSheepです。
なんとなーく開発しながらnoteを書いており、なんとなーく新しいこと(ざっくり)にチャレンジしています。

前回はTypeScripに挑戦したアマチュアjavaScriptエンジニアがTypeScriptにビクビク触る(Hello worldまで)を書きました。

今回はReact Nativeを導入して散々躓いたので醜態を晒すことでうしろの道を綺麗にしていきます。

install ～ start

以下開発環境です。

$ node -v
v8.12.0

$ npm -v
6.4.1 

使用すたパッケージはcreate-react-native-appです。

関係するパッケージが一括インストールできます。
ios, androidともに前提設定なしで開発できるexpo, もちろんreact-nativeなどが入っています。

$ npm install -g create-react-native-app
$ create-react-native-app [プロジェクト名]
$ cd [プロジェクト名]
$ npm run start

上から2つ目のcreateコマンド入力後にプロジェクト名を再確認されますので、よしなに入力してください。
npm run startが起動したら、QRコードが表示されます！

以上のコマンドでプロジェクト作成から起動まで終了です。

Hello worldを確認する

起動コマンドを入力するとスマホからHello worldを確認することができます。ここで必要なのがアプリを見るためのアプリです。
expoのHPからスマホアプリをダウンロードします。
iosなら

‎Expo Client

androidなら

Expo - Apps on Google Play

ダウンロード後QRコードを読み込むと、アプリが起動し、表示するための準備が開始されjavaScriptコードが生成されます。結構時間が掛かり、アプリ側でもロードが表示されます。PCではブラウザが勝手に立ち上がり、コンソールを表示してくれます。
もちろんios, androidどちらも見ることができます。

以上でHello worldまで終了です。

以下は愚痴の躓いたポイントです。

React Nativeだから、react-nativeをinstallしてinitしよ ←Xcode, android studio入れてね

react-nativeをinstallしてみると、package.jsonにはios、android用の実行コマンドが記載してあります！なんて便利なんでしょう！

  "scripts": {
   "android": "react-native run-android",
   "ios": "react-native run-ios",

はい、どちらもinitした後すぐrunでは使えません。
iosではXcode、androidにはandroid studioをインストールしなければいけないのです。こんなの常識？いえ全く知りませんでした。

$ npm run ios

上記コマンドは1個前のセクションのreact-nativeスクリプトを起動したときなのですが、Xcode入れてなかったので起動できませんでしたね。
ちなみにexpoにも同じコマンドがありますがこちらも動かず。当たり前か。

$ npm run android

上記コマンドもandroid studioがなければ起動しません。

なのでexpoの下記コマンドで開発を行えばスムーズなんですね。理解です。

$ npm run start

よっしゃcreateだ！え？エラー？←git bash使えない

なぜかわかりませんが、下記コマンドでのプロジェクト作成はgit bashではできないようです。

$ create-react-native-app [プロジェクト名]

stack overflowに質問投げられてたので解決したのですが、いつもgit bashにお世話になってる私にとってはstack overflowの質問に大感謝です。質問がなければ解決まで時間がかかったでしょう。
代わりにvsCodeのターミナルで実行して作成できました。

iosのexpoアプリからQRコード読み込むとこなくね？ ← ブラウザに入力してください

androidのアプリには一番左側のタブに初期インストール直後でもQRコード読み込むところがあるのですが、iosにはなく、、、

結局私は既存のQRコード読み込むアプリから読み込み、ブラウザにURL入力してアプリが自動起動してくれてHello worldを見ることが出来ました。

後書き

アプリ開発が何にも分からない&やったことない私にとって、ブラウザ以外からios, android両機ともに検証できたことは感動でした。
結構躓いて時間かかりましたが、以上のnoteの内容が誰かのお役に立てれば幸いです。

以上です。お読み頂きありがとうございました。