やったこと

0.76のリアーキテクチャで話題のReactNativeを、Expo / Bun / VS Codeの最速ビルド構成で作ってみた！🚀

前提

以下の環境があること

MacOS
VS Code
Homebrew

手順

1. Xcodeのインストール

今回はiPhoneのエミュレーター上で開発したアプリの動作を確認したいので、Xcodeをインストールしてください。

インストールが完了したら、iOSのコンポーネントもインストールしておきましょう！

（すでにXcodeをインストール済みの方はこちらの記事の方法でiOSが追加されているかを確認・必要に応じてアップデートしてください）

合計10GB以上あるので、ダウンロードを進めながら、次以降の作業を進めましょう！

2. Watchmanのインストール

Facebookが開発したファイル監視ツールWatchman。

React NativeやExpoでの開発時にファイルの変更を素早く検出し、適切な処理（ホットリロードやバンドルの再生成）を行うために使われるものなので、必須！

brew install watchman

3. Bunのインストール（任意）

ご存知、爆速パッケージ管理・ランタイムのBunにReactNative/Expoも対応しているので、今回はBunを使ったプロジェクトを作成します。（npm/pnpm/yarnが良い人はスキップ）

以降のコマンドはbun ~~で記述するので、適宜 npm/pnpm/yarn ~~に読み替えてください。

$ brew install oven-sh/bun/bun

4. プロジェクトの作成

いよいよReactNative/Expoアプリを作成していく

$ bun create expo {プロジェクト名}

✅ Your project is ready!となったら、以下を実行して…

# プロジェクトファイルに移動
$ cd {プロジェクト名}
# CLIからiOSエミュレータを起動するために必要な設定（パスワード聞かれる）
$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
# iOSでアプリを実行
$ bun run ios

🎉 おめでとうございます！🎊

今回の学び

Expoを利用した、ReactNativeのデファクトスタンダードを試してみました！

ビルドツールをbunにしたからなのか、Watchmanが優秀だからなのか、ホットリロードも爆速で、めちゃめちゃ開発体験が良かったです！

CreateExpoStackやdatabase.buildなど、使ってみたい技術がまだたくさんあるので、ワクワクが止まらない！🎶

studio CLOTOについて

私たち studio CLOTO は、【21世紀を「学び」で創る】ためにGROWTHEUMなどのサービス開発を進める駆け出しスタートアップです！

WebXR・ReactNativeなどの開発情報を今後も公開していく予定なので、ぜひフォローしてください！