プロフィール
TypeScript PR

ExpoとReact Nativeでのアプリ開発: インストールから起動まで【MacかGitHub Codespaces使用】

  /
記事内に商品プロモーションを含む場合があります
Contents
  1. Expoのインストール
  2. まとめ

Expoのインストール

Expoとは？

Expoは、React Nativeでのアプリケーション開発を
容易にするフレームワークおよびプラットフォームです。
React Nativeが提供するネイティブアプリケーション開発の自由度とパワーを、
より簡単に、より迅速に利用できるように設計されています。

Expoの主な役割と機能：

  1. 開発環境の簡素化:
    Expoを使用すると、
    iOSやAndroidのネイティブコードを直接触ることなく、
    JavaScriptだけでアプリを開発できます。
    これにより、開発のハードルが下がり、
    特に初心者がアプリ開発を始めやすくなります。
  2. ネイティブAPIへの簡単なアクセス:
    Expoは多くの一般的なネイティブ機能へのアクセスを提供します。
    カメラ、位置情報、加速度計などのネイティブAPIに、
    簡単にアクセスできるラッパーを用意しています。
  3. 迅速なテストとプレビュー:
    Expoクライアントアプリ（iOSとAndroid用）を使用すると、
    実機で直接コードの変更をプレビューできます。
    QRコードをスキャンするだけで、開発中のアプリをテストできます。
  4. オーバー・ザ・エア（OTA）アップデート:
    アプリのJavaScriptコードをアプリストアのレビュープロセスなしで更新できます。
    これにより、バグ修正や機能追加を素早くユーザーに届けることができます。
  5. ビルドプロセスの簡略化:
    Expoはexpo buildコマンドを使って、
    クラウド上でiOSとAndroidのアプリビルドを行うサービスを提供しています。
    これにより、開発者は各種ネイティブ開発ツールをローカルにセットアップする手間を省けます。
  6. パブリッシュと配布の容易化:
    Expoは、Expoサーバーを通じてアプリを配布するメカニズムを提供します。
    また、アプリストアに配布するためのパッケージングも簡単に行えます。
  7. コミュニティとエコシステム:
    Expoは活発なコミュニティを持ち、
    多数のライブラリやツールが提供されています。
    これにより、開発者は追加の機能やコンポーネントを簡単に利用できます。

ただし、Expoはその抽象化のレベルが高いため、
カスタムネイティブコードが必要な高度な機能や最適化を必要とする場合には、限界があります。

インストール

環境はいつも通りGitHub Codespacesでいきます。
基本的に公式サイトを参考に進めます。
NodeとGitは既にインストールされているので、
Watchmanなるものを入れます(初めて聞きました)。Pre-Build版を使用
※Building from sourceはCodespacesのメモリ増やしても
　かなりインストールに時間がかかったので諦めました。。
※WatchmanはFacebookによって開発された、
　ファイルシステムの変更を監視するためのツールらしいです。

wget https://github.com/facebook/watchman/releases/download/v2023.12.25.00/watchman-v2023.12.25.00-linux.zip
unzip watchman-v2023.12.25.00-linux.zip
cd watchman-v2023.12.25.00-linux
sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
sudo cp bin/* /usr/local/bin
sudo cp lib/* /usr/local/lib
sudo chmod 755 /usr/local/bin/watchman
sudo chmod 2777 /usr/local/var/run/watchman

Watchmanのバージョン表示！

watchman -v

あとは、npxでリモートコマンドでExpo使えるみたいです。
※npmでやりたい方は、そちらでも可能

サンプルアプリを作成して

npx create-expo-app my-app && cd my-app

Expoのサーバを起動すると
※ローカルではないので–tunnel使います

npx expo start --tunnel

以下のようQRコードが出るので、読み取ります。
Expo GoというAppが必要なようなので、
App Store/Play Storeからインストールします。

iOSはExpo Goではなくカメラアプリで、
AndroidはExpo GoでQRコードを読み込むと

expo-go-qr-url

こんな感じで実機で表示できます！
ソースコードを変更するとHot Reloadされて
すぐ画面に反映されます！素晴らしい！

expo-go-ios

初期から「！」を追加したくらいですが
Sampleコードです↓

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.tsx to start working on your app!!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

参考：Watchmanインストール（Building from source）

1. Watchmanをダウンロード＋事前準備

git clone https://github.com/facebook/watchman.git
cd watchman/
sudo apt update
sudo apt install -y autoconf automake build-essential python-dev

2. Cargo Install ここを見てやります。

curl https://sh.rustup.rs -sSf | sh
source "$HOME/.cargo/env"
cargo version

3. Watchmanインストール
※なんかすごく時間かかります・・・
　途中Codespacesがおそらくメモリ不足に・・・
　性能を上げてみるも時間かかるので止めました

sudo ./install-system-packages.sh
./autogen.sh

参考：Macのローカルにインストールする場合

この記事を参考にNodeを入れる。Homebrewを使います。
※Gitは入ってるはず・・・
Watchmanをインストール

brew update
brew install watchman

あとは同じなので割愛します。
Expoを実行できるか確認するくらいです。

npx expo --help

yarnを使いたい場合は以下でインストールします。

sudo npm install -g yarn

nodeのパッケージをインストールしてExpo起動！
※XCodeも入れておくといいかも

yarn install
npx expo start

まとめ

本記事では、
React NativeのフレームワークであるExpoのインストールと
基本的な使い方について説明しました！

Expoは、iOSやAndroidのネイティブコードに直接触れることなく、
JavaScriptだけでアプリを開発することを可能にするため、
特に初心者にとってアプリ開発を始めやすくします。
また、迅速なテストとプレビュー機能、
オーバー・ザ・エアアップデート、ビルドプロセスの簡略化など、
開発者にとって便利な多くの機能を提供します。

さらに本記事では、GitHub上に準備された開発環境である
GitHub Codespacesを利用してWatchmanのインストール方法、
Expoプロジェクトの作成、サーバーの起動、
そして実機でのアプリ表示に至るまでの手順を詳しく解説しています。

皆様が
Expoを使ったReact Native開発に取り掛かるときの
参考になれば幸いです！

RELATED POST