react native expoをゼロから実機で確認するまでの手順 #reactnative

２年前に詰将棋アプリをUnityで作っていた。
そろそろ新しいアプリを作ろうと思って調べてみたところExpoが良さそうだったので使えるようになるまでの設定。

Expoを選んだ理由

詰将棋のアプリなのでネイティブでしか触れないような機能は使わない。
自分がiPhone持ちでswiftで書こうと思ったが、最近リアルで将棋指すことがあってandroidユーザもそこそこいたのでクロスプラットフォームでやりたくなった。

環境

macOS mojave(10.14.5)
Homebrew 2.1.6

実機はiphone7です。

nodejsをインストール

# nodebrewを入れる
brew install nodebrew
# 安定版をインストール
nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v12.5.0/node-v12.5.0-darwin-x64.tar.gz
Warning: Failed to create the file 
Warning: /Users/kzfm/.nodebrew/src/v12.5.0/node-v12.5.0-darwin-x64.tar.gz: No 
Warning: such file or directory

curl: (23) Failed writing body (0 != 1058)

エラーになってしまう...
ここを参考に権限付きのディレクトリを作る


mkdir -p ~/.nodebrew/src
nodebrew install-binary stable
Fetching: https://nodejs.org/dist/v12.6.0/node-v12.6.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

インストールできた。


nodebrew use v12.6.0
use v12.6.0

パスを通す

echo "export PATH=\$HOME/.nodebrew/current/bin:\$PATH" >> ~/.bashrc
# 再起動
source 
# コマンドが通るか確認
node -v
v12.6.0
# 同じようにnpm (node package managerも入っている）も確認
npm -v
6.9.0

TypeScriptのインストール

npm install -g typescript
tsc -v
Version 3.5.2

Expoのインストール

# npm install は npm iでも同じらしい
npm i -g expo

実機側にアプリ（Expo Client)を入れてアカウントを作っておく。

# sampleディレクトリにプロジェクトを作成
expo init sample
# CLI入れるか聞かれるのでYを選択
This command requires Expo CLI.
Do you want to install it globally [Y/n]? y

Choose a template: (Use arrow keys)
  ----- Managed workflow -----
❯ blank               minimal dependencies to run and an empty root component 
  blank (TypeScript)  same as blank but with TypeScript configuration 
  tabs                several example screens and tabs using react-navigation 
  ----- Bare workflow -----
  bare-minimum        minimal setup for using unimodules 

{
   "expo": {
     "name": "sample",
     "slug": "sample"
   }
 }

型チェックを入れる

npm i -D @types/react @types/react-native

ここはよく分かっていないので tsconfig.json の設定と一緒に記事にしていきたい。

アプリを起動

cd sample
npm start

でQRコードが出てきてiphone側で読み込んでアプリを起動すると画面が表示される。

まとめ

ざっとインストールして実機確認までできた。
Unityと違ってコンパイルの時間も少ないし、すぐに実機で確認できるのはすごい。
コードを変更するとすぐに反映する。

次回は react の仕組みや基本を学んで記事にしていきたい。