2019年度下期 React Nativeでアプリ作る①

### ■ はじめに
ずっと手付かずだったアプリ作り。
年末年始の休みを利用して何か動くものを作ってみる。

以下のサイトを参考に進める。
https://dev.classmethod.jp/client-side/javascript/yuru-fuwa-react-native/

それに付随して、以下、ReactNative,Expoの公式ドキュメントを参照。
https://facebook.github.io/react-native/docs/getting-started
https://expo.io/

### ■ Node.js他もろもろの導入
最新化もしたかったので、下記サイトから最新安定板のNode.jsをダウンロード&インストール
https://nodejs.org/ja/
12.14.0 LTSを導入。
※後日追記:12.14.0だと、本記事後半のエラーにぶち当たるので12.4.0を推奨。
　下記URLからダウンロード可能。
https://nodejs.org/download/release/v12.4.0/

下図のようなインストーラになっているので、適宜チェックや必要事項を読んでインストールする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/a59c394d-2b24-e37c-05ac-a8250f1274ea.png)

インストール完了後、npmコマンドが使えるようになっているので確認。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/6857b7a6-a20f-bbb2-d0f0-62e148fff891.png)
インストールしたnode.jsは12.14.0なのに違うバージョンが表示されていると混乱しがちだが、node.jsとnpmはまた別ものなので問題なし。（Node.jsと一緒にインストールされるパッケージ管理ツールがnpm。詳細は割愛。）

次に下記サイトからPythonをダウンロード&インストールをする。
https://www.python.org/downloads/
なんとなく安定してそうな3.7.6を選択。
インストール過程は割愛。インストール時に「Pathに追加」にチェックを入れると、インストール完了後、コマンドプロンプトから呼び出せるようになる。はず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/48eb83dd-1015-f72f-6c2b-fd93e7142682.png)
とはいえ、今回Pythonは上記画像のような形では使用しないので、コマンドプロンプトから使用確認できなくても問題なし。
ReactNativeの開発ツールに必要っぽい？

次にnpmコマンドを使用し、実際のReactNative関連のツールを導入する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/fb964068-9caa-7db9-0df7-64a789c8211d.png)
いろいろ勝手にやってくれる。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/782acc7a-9ba0-e020-ac46-0594495d1be1.png)
なんか警告いっぱい出てるけど無視。
もうひとつWebViewも導入しておく。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/779be61c-d732-65b7-57e4-af8ff72dc844.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/d3a5d3da-9e72-793d-91c3-07ed29615a6b.png)
すぐ終わった。

ツールの導入は以上。

### ■ Hello,World!する
とりあえずHello,World!がしたいので、プロジェクト作成する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/d7dff991-e36e-326b-0a24-589aaa67a53f.png)
なんかいろいろ聞かれるけどblankを選択。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/9a7761ed-177f-950b-bee4-0d9d79b14c37.png)
なんか名前を決めるらしい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/74eb348f-f811-6d49-b6b3-141097fc2e41.png)
とりあえずStosiAppで。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/6921ee41-27a5-9141-4de0-678d325fa9e7.png)
いろいろ始まる。Git入ってないよって言われたが、時すでに遅し。
今回は使わない。今後の影響については不明。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/ebb05448-4a8f-c76c-3758-b1434d73bf80.png)
プロジェクト準備OK！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/4ee4147d-6194-5787-6835-589d7092dfda.png)
cd SatosiAppしてnpm startする。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/08eb90cd-b101-0d40-6691-bc985095c766.png)
### ■ エラーった
なーにがいけないんでしょうねー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/2b0e314f-eb14-8d2f-edae-e7967158af6f.png)
本当であれば、ブラウザからいろいろ便利な奴が使えるらしいのだが。。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/c548d5ac-f946-13c8-f69f-31e245e4012c.png)
ログ見てみた。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/f1676529-f0b5-9a71-9048-471510bd2253.png)

よくわからない。
cmdさかのぼってみたけど何かがダメなことしかわからない。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/526880/17017458-b8f4-42b3-7118-2680042bfb0c.png)
現在時刻は2020年1月1日 深夜2:30 頭も回らないので、今回はここまで。

### ■ まとめ
今回やったこと
・ツールの導入
・テストアプリの作成（未遂）

次回やること
・エラーの解消
・テストアプリの作成

以上

次回：https://qiita.com/satosingo5/items/eae80242c4e79e8388d0