初めに
個人サイトをReactに移行し、だんだんと慣れてきた。
そこで、React Nativeを試してみたいと思った。
今回はExpoを用いた環境構築ついてまとめる。
概要
React Nativeとは
リポジトリ
wikipedia 記事
Meta の開発したモバイルアプリケーションフレームワーク。
Reactのコンポーネントベースのアーキテクチャをモバイルアプリ開発に取り入れたもの。
これを用いることでAndroid、iOS、Web、MacOSなどのクロスプラットフォームでアプリケーションを作成することができる。
React Nativeのメリット
クロスプラットフォーム
1つのコードでiOSとAndroidの両方のアプリを開発できる。
開発効率が高い
ホットロードによりコードの変更をすぐに確認できる。
学習効率が高い
JavaScriptをもとにしており、Web開発の経験がある場合に、Swiftなどを学習するよりも効率が良い。
Expo とは
React Native 開発を効率化させるオープンソースプラットフォーム。
Expoを使用することで必要な依存関係、設定が自動的に処理されるため、手動での設定が最小限になる。
使ってみる
インストール
node.jsがインストールされている状態で
npx create-expo-app@latest
その後、アプリ名を聞かれるので入力。
あとは自動的に必要なパッケージがインストールされる。
ディレクトリ構成
作成直後のプロジェクトは次のような構造になる。
my-expo-app/
├── App.js
├── app.json
├── package.json
├── node_modules/
└── assets/
├── adaptive-icon.png
├── favicon.png
└── icon.png
- App.js：アプリのエントリポイント
- assets/：画像やフォントなどの静的ファイル
= app.json：Expo 設定ファイル（アプリ名やアイコンなどを管理）
実行
npm run start
ターミナル上にQRコードが表示される、が一回無視してlocalhostにアクセス。
このような画面が表示されればインストール完了。
お使いのスマートフォンにExpo Go のアプリをインストールし、QRコードを読み取ることで、ビルドせずに実機で動作を確認できる。
Expo Go とは
Expo を使って開発したアプリをスマートフォンでビルドせずにリアルタイムで動作確認ができるアプリ。
これにより、一層クロスプラットフォームでの開発が行いやすくなる。
コマンド
| コマンド | 説明 |
|---|---|
npm run start |
開発サーバー起動 |
npm run android |
Androidエミュレーターで起動 |
npm run ios |
iOSシミュレーターで起動（Mac限定） |
npm run web |
Web上で実行 |
トラブルシューティング
| 問題 | 対処法 |
|---|---|
| QRコードで接続できない | スマホとPCが同じWi-Fiに接続されているか確認 |
| ポート競合 |
CTRL+Cでサーバを停止し、再起動 |
| Expo Goで画面が更新されない | キャッシュ削除：npm start -- --reset-cache
|
備考
TypeScriptを使用したい場合
npx expo prebuild --clean
npm install --save-dev typescript @types/react @types/react-native
npx tsc --init
その後、App.jsをApp.tsxにリネームするだけ。
終わりに
Linuxユーザーに優しい:D
~Thank you for reading~