はじめに

ゆとり世代の中野です。

今回チャレンジした内容は【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でプロダクトを作っています