Zenn
Closed7

Expo で React Native 開発環境の構築

React Native
TypeScript
Expo
志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

前提環境

  • Mac
    • 13.4
    • チップ: Apple M2 Pro
  • Node.js: v18.15.0 →途中で→ v16.20.0
  • expo-cli: 6.3.8
{
  "name": "my-first-react-native-app",
  "version": "1.0.0",
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web"
  },
  "dependencies": {
    "expo": "~48.0.18",
    "expo-status-bar": "~1.4.4",
    "react": "18.2.0",
    "react-native": "0.71.8"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@types/react": "~18.0.14",
    "typescript": "^4.9.4"
  },
  "private": true
}
志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

React Native とは

React Nativeは、Facebookが開発したオープンソースのフレームワークで、JavaScriptとReactを用いてモバイルアプリケーションを作成するためのものです。

React Nativeの主な特徴は以下のとおりです：

  • クロスプラットフォーム：React Nativeを使用すると、1つのコードベースでiOSとAndroidの両方に対応したアプリケーションを開発することができます。
  • ネイティブコンポーネント：React Nativeは、ネイティブコンポーネントを使用してUIをレンダリングするため、フルネイティブアプリケーションと同様のパフォーマンスと外観を提供します。
  • JavaScriptとReact：React NativeはJavaScriptとReactを使用して開発します。
  • ホットリローディング：React Nativeはホットリロードをサポートしているため、ソースコードの変更を即時にプレビューすることができます。これにより、開発者は変更をすぐに確認し、迅速に反復することができます。
  • Facebookが2015年にリリースし、現在でも継続的にメンテナンスしています。

参考

https://reactnative.dev/

JavaScript実行環境はブラウザに準拠

React NativeはJavaScriptを解釈するためのライブラリとしてJavaScriptCoreを使用しています。これは、JavaScriptの実行エンジンで、WebKit（Safariのエンジン）の一部です。

iOS SDKでは、JavaScriptCoreが標準ライブラリとして提供され、事実上、Safariと同等の文法を解釈できます。一方、Androidでは、JavaScriptCoreがC++ライブラリとしてポーティングされて使用されています。ただし、これはサードパーティーのライブラリであるため、更新が遅れる可能性があります。

最新のブラウザ向け開発言語仕様であるECMAScript20xxへの対応については、BabelというJavaScriptのコンパイラがビルドツールに組み込まれて対応しています。BabelがソースコードをJavaScriptCoreが読み込める言語仕様までダウングレードするため、開発者は新しいバージョンのJavaScriptを自由に記述できます。

組み込み関数については、基本的にはMDNのJavaScriptリファレンスで紹介されているような関数が実装されています。しかし、ブラウザと同様にReact Nativeでも未実装のものがあります。そのため、必要に応じて、ポリフィル（代替実装）のライブラリを用意する必要があります。

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

Expoを使った開発環境を構築する

Expoのコマンドラインツールをインストール

npm i -g expo-cli

Expoで開発を行うためのさまざまなコマンドを提供してくれる

output
npm WARN deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 1178 packages in 1m

106 packages are looking for funding
  run `npm fund` for details

https://app.warp.dev/block/7WZ40wYSa6SEqT9JXrx8J8

Expoコマンドでプロジェクトをセットアップ

expo init my-first-react-native-app
  • Expoを使って新たにReact Nativeのプロジェクトを作成するためのものです
  • my-first-react-native-app これが新たに作成するプロジェクトの名前です

blank (TypeScript)を選択

blankとtabsの違いは初めにいくつか画面が作られているかどうかです

output
WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.

Migrate to using:
› npx create-expo-app --template

✔ Choose a template: › blank (TypeScript)  same as blank but with TypeScript configuration
✔ Downloaded template.
🧶 Using Yarn to install packages. Pass --npm to use npm instead.
✔ Installed JavaScript dependencies.

✅ Your project is ready!

To run your project, navigate to the directory and run one of the following yarn commands.

- cd my-first-react-native-app
- yarn start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- yarn android
- yarn ios
- yarn web

警告: レガシーなexpo-cliはNode +17をサポートしていません。新しいローカルのExpo CLIに移行してください: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.

以下の使用に移行してください:
› npx create-expo-app --template

✔ テンプレートを選択: › blank (TypeScript) same as blank but with TypeScript configuration
✔ テンプレートをダウンロードしました。
🧶 パッケージのインストールにはYarnを使用します。代わりにnpmを使用するには --npm を渡してください。
✔ JavaScriptの依存関係をインストールしました。

✅ プロジェクトの準備ができました！

プロジェクトを実行するには、ディレクトリに移動して以下のyarnコマンドのいずれかを実行してください。

cd my-first-react-native-app
yarn start # ここからiOS、Android、またはwebを開くことができます。または、以下のコマンドで直接実行できます。
yarn android
yarn ios
yarn web
志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

セットアップ時の警告の対応

WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.

Migrate to using:
› npx create-expo-app --template

https://blog.expo.dev/the-new-expo-cli-f4250d8e3421

https://blog.expo.dev/the-new-expo-cli-f4250d8e3421

この記事の主要なポイントの要約

  • Expoは新しいローカル開発ツール、つまり新しいExpo CLIをリリースしました
    • これは以前のグローバルCLIとは異なります
  • 新しいExpo CLIは、プロジェクト固有の依存関係と設定を持つことができます。
    • これにより、プロジェクトごとに異なるExpo CLIのバージョンを使用することが可能になりました。
  • この新しいCLIはcreate-expo-appという名前の新しいパッケージとして提供されています。
  • 新しいCLIを使うには、npx create-expo-appというコマンドを使用します。
    • これにより最新バージョンのCLIが実行されます。

これらの変更により、開発者はプロジェクトごとに異なるExpo CLIのバージョンを使用することが可能になり、より柔軟な開発が可能となりました。

どう対応するか

npx create-expo-app my-new-project --template

この新しいCLIはプロジェクト固有の依存関係と設定を管理するため、プロジェクトごとに異なるバージョンのExpo CLIを使用することが可能になります。これにより、各プロジェクトで最適な開発環境を構築することが可能となります。

今回は

  • 現時点で node はv18.15.0
  • expo を消して
    • npm uninstall -g expo-cli
  • node を v16.20.0にして
  • npm i -g expo-cli

すれば警告は出なくなります。

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

公式Expoアプリでデバッグする

まだ、Android SDK も iOS SDK もインストールしてません。

スマホを検証機にして、アプリ「Expo Go」で検証する方法を試す。

https://expo.dev/client

Expo アプリがブラウザのような役割を果たしている。PC上のビルドサーバーからアプリケーションのコードをダウンロードして画面を構築している。

ビルドサーバーを起動

yarn start
  • QRコードが出力される
  • 手元のiPhoneのカメラでQR読み取る
  • アプリ「Expo Go」で立ち上げる

動いた。

志水 亮介 (Ryosuke Shimizu)志水 亮介 (Ryosuke Shimizu)

React Native の特徴

  • React Nativeはブラウザ向けとモバイルアプリ向けの開発手法の長所を融合しているが難点もある
  • 難点：それぞれのOSのビルドツールの学習コストがかかる
    • Android SDKやiOS SDKの機能を使うためには
      • Gradle、Xcode、CocoaPodsといったモバイルアプリのビルドツールについて理解が必要
  • React Nativeのコマンドラインツールは一部の作業を自動化する
    • しかし、例えばAndroidバージョンやライブラリ間で互換性の問題が生じると
      • トラブルシューティングが必要になる
        • そうなると、ビルドツールに関する知識が必要になる。iOSも同様

その煩わしさを解決するのが Expo

Expoによるモバイルアプリ開発は、Android SDK も iOS SDK もインストール不要でいいですね。

このスクラップは2023/06/22にクローズされました