Expoの導入について

Expoの導入について

はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【Expoの導入について】です。

さっそくチャレンジについて書いていきます。

チャレンジする背景

Expoの導入時に知っておきたいことを忘備録として残しておく

チャレンジ内容

Projectが作れる
iOSとAndroidの実機にインストールされている Expo Go 上でProjectが動く
SimulatorとEmulatorの Expo Go 上でProjectが動く

Expoとは

ReactNative上で JS(TS) のみで iOS/Android/WEB アプリを作ることができる開発/ビルド環境です

JS(TS)縛りを受け入れることで、アプリをQRコード経由で簡単に公開したり、共有したりできる。

準備

nodeを準備しておく

個人はv16系がおすすめ
古いnodeのバージョンを使うとstroybookやjestで色々問題があったため

下記のパッケージをインストールする

npm install -g expo-cli
npm install -g eas-cli

プロジェクトを作成

作成コマンド

expo init プロジェクト名

選択肢

特に何もなければプレーンなTSを選択するのがおすすめ
blank (TypeScript) same as blank but with TypeScript configuration

開発サーバを起動

下記コマンドで開発サーバを起動する

expo start

補足

こちらと同じ内容で expo start で怒られたので対策として下記を実施

brew update
brew install watchman

watchman のインストール中にxcode-selectをインストールしろと怒られたので追加

xcode-select --install

動作確認

前提

Expoには実機で簡単に確認する仕組みがあります
Expo Goを使うと簡単に各OSごとに動作確認ができます

iOS

実機

Expo Goが必要のためiOSの端末にインストールしてExpoのQRコードを読み込ませてください

Simulator

環境の作り方

こちらの公式ドキュメントを参考にしてください

起動するコマンド

expo start --ios

Android

実機

Expo Goが必要のためAndroidの端末にインストールしてExpoのQRコードをExpo Goで読み込ませてください

Emulator

環境の作り方

こちらの公式ドキュメントを参考にしてください

起動するコマンド

expo start --android

まとめ

1コマンドで簡単にProjectが作成可能する
Projectの設定は作成時のCLIで選択する
SimulatorとEmulatorは公式のドキュメントで設定する
実機で検証する場合は Expo Go をAndroidとiOSにインストールする

さいごに

上から順番に読み進めると作ったProjectがExpoGoを介して実機で動きます

併せてSimulatorとEmulatorで動く環境が出来上がっているはずです！

yutanakano

WEBエンジニア

大阪生まれのゆとり世代です

趣味はバイクでツーリングに行くこと

愛車は Ninja ZX-25R SE KRT EDITION

Expoでプロダクトを作っています