【ReactNative】環境構築

はじめに

iOSアプリの個人開発を主にSwiftで行ってきた私は、クロスプラットフォーム開発の経験がありませんでした。しかし、今後業務で利用することになったため、公式チュートリアルに従い、React Nativeを使用して環境構築を行い、簡単なカウンターアプリの開発を試みることにしました。まずは、環境構築について記載します。

ReactNative　とは

まず最初にReactNativeとはなにかについて引用を交えて説明する。

React Nativeの特徴

React Nativeは、ネイティブ開発の良い部分とReact（ユーザーインターフェイスを構築するためのJavaScriptライブラリ）の良い部分を組み合わせたツールです。React Nativeを使用すると、既存のAndroidおよびiOSプロジェクトに部分的に導入することも、ゼロから全く新しいアプリを作成することもできます。

JavaScriptによるネイティブ開発

JavaScriptで記述され、ネイティブコードでレンダリングされる点にあります。これにより、アプリは他のアプリと同じネイティブプラットフォームAPIを使用します。さらに、異なるプラットフォームに特有のコンポーネントバージョンを作成することにより、単一のコードベースから複数のプラットフォームにわたってコードを共有することが可能です。これにより、複数のプラットフォームを維持し、共通の技術であるReactを共有することができます。

ネイティブ開発のアクセス可能性

React Nativeは、ネイティブなアプリを作成することを可能にし、ユーザー体験を損なうことはありません。View、Text、Imageなどのプラットフォームに依存しない核となるネイティブコンポーネントを提供し、これらは直接プラットフォームのネイティブUIビルディングブロックにマッピングされます。

シームレスなクロスプラットフォーム

Reactコンポーネントは既存のネイティブコードをラップし、Reactの宣言的UIパラダイムとJavaScriptを介してネイティブAPIと対話します。これにより、ネイティブアプリ開発が新しい開発チームに開かれ、既存のネイティブチームもはるかに迅速に作業できるようになります。

高速リフレッシュ機能

React Nativeのもう一つの特徴は「高速リフレッシュ」です。変更を保存するとすぐに結果を確認できます。JavaScriptの力を活用して、ネイティブビルドの完了を待つ必要はもうありません。保存して、確認して、繰り返し行うことができるのです。

上記のような特徴の記載がありました。私はFlutterの経験はありませんが、クロスプラットフォームツールであり、いくつかの共通点がありそうだと感じました。

チュートリアル開始

環境構築方法には、２つのアプローチ方法がある。

• Expo Go
• React Native CLI

初心者向けアプローチ: Expo Go

Expo Goは、React Nativeを使ったモバイルアプリ開発の簡単な方法です。Node.jsの最新バージョンとスマートフォンまたはエミュレーターがあれば利用可能です。ExpoのSnackを使用すると、ウェブブラウザ上でReact Nativeを試すことができます。初心者にとって、Expo Goは数分でReact Nativeアプリを作成でき、素早くプロトタイプを作成できます。

経験者向けアプローチ: React Native CLI

React Native CLIは、モバイル開発に慣れた開発者向けのツールです。開始するには、XcodeまたはAndroid Studioが必要です。これらがすでにインストールされている場合、プロジェクトのセットアップに数分で立ち上げられます。これらのツールが未インストールの場合、インストールと設定に約1時間かかることがあります。

今回は初学者向けのExpo Goで作成を試してみる。

Expo Goでの環境構築

プロジェクトファイルの生成

コマンドを実行すると、

npx create-expo-app AwesomeProject

以下の出力が得られる。

added 1247 packages, and audited 1248 packages in 1m

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

5 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

✅ Your project is ready!

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

- cd AwesomeProject
- npm run android
- npm run ios
- npm run web

上記のディレクトリーが作成され、以下のファイル構成で生成されている。

ローカルで開発環境の立ち上げ

プロジェクトフォルダに入り、

cd AwesomeProject

開発環境の立ち上げ

npx expo start

以下の出力が得られる。

Starting project at /Users/ryomuranaka/ReactNativeProject/AwesomeProject
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █▄▀▀▄▄ ██▄█ ▄▄▄▄▄ █
█ █   █ ███▄█   ▀▀█ █   █ █
█ █▄▄▄█ ██▄▀▄▀ ████ █▄▄▄█ █
█▄▄▄▄▄▄▄█ █ ▀▄▀ █▄█▄▄▄▄▄▄▄█
█  ▀▄▄█▄█▀ ▄▄▀▀█ ▀█▄█▀█▀▀▄█
█▄▀ █▄▀▄  ▀  ▀█▄▄ ▀███▄▀▀ █
█  ▄  ▀▄▀▀ █▄▄▀▄ █ ▄▀▀█▀ ██
█ ▄█▀█ ▄▄█   ▄▄▀ ▄▀ ██▄▀  █
█▄█▄▄██▄█ █▄▀▀  █ ▄▄▄  ▄▀▄█
█ ▄▄▄▄▄ ██▀█▄▀  █ █▄█ ██▀▄█
█ █   █ █   █▄██▄ ▄  ▄ █  █
█ █▄▄▄█ █▀▀▄█▄█  ▄█▀▀▄█   █
█▄▄▄▄▄▄▄█▄█▄█▄▄▄▄▄▄█▄▄███▄█

› Metro waiting on exp://192.168.11.5:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

全てのコマンドを知りたいので、「？」を入力すると、

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› shift+a │ select a device or emulator
› Press i │ open iOS simulator
› shift+i │ select a simulator
› Press w │ open web

› Press r │ reload app
› Press j │ open debugger
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor
› Press c │ show project QR

• a でAndroidで起動させ、shift+a　でAndroidで起動させる際にデバイスを設定することが可能である。
• i でiOSで起動させ、shift+i　でiOSで起動させる際にデバイスを設定することが可能である。
• w　でWebで起動することが可能である。

私はxcode Androidstudioをすでにインストールしており、シミュレーター・エミュレータを立ち上げることが可能だったので、コマンドを実行していく。インストールされていない方は、下記URLからインストールして、シミュレーター、エミュレータの環境を整えてください。

iOSのシミュレーター起動

iと入力した際の出力結果

› Opening on iOS...
Error: xcrun exited with non-zero code: 60
An error was encountered processing the command (domain=NSPOSIXErrorDomain, code=60):
Unable to boot the Simulator.launchd failed to respond.
Underlying error (domain=com.apple.SimLaunchHostService.RequestError, code=4):
	Failed to start launchd_sim: could not bind to session, launchd_sim may have crashed or quit responding

上記のようなエラーが出力されました。下記のLinkを参考にエラー修正しました。

iPhone 15 Proで起動しようとしたため、参考URLと状況は違うものの、シミュレーターのキャッシュを削除することによって起動しました。

Android　のエミュレータ起動

aと入力した際の出力結果

› Opening on Android...
› Opening exp://192.168.11.5:8081 on Pixel_3a_API_34_extension_level_7_arm64-v8a
› Press ? │ show all commands

Web画面の表示

wと入力した際の出力結果

 
It looks like you're trying to use web support but don't have the required dependencies installed.

Please install react-native-web@~0.19.6, react-dom@18.2.0, @expo/webpack-config@^19.0.0 by running:

npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0

If you're not using web, please ensure you remove the "web" string from the platforms array in the project Expo config.

以下のコマンドにより、ExpoプロジェクトにReact Native Webのサポートが追加され、React NativeコードをWebアプリケーションに展開できるようになります。

npx expo install react-native-web@~0.19.6 react-dom@18.2.0 @expo/webpack-config@^19.0.0

以下が出力結果であり、モジュールのインストールが完了しました。

› Installing 3 SDK 49.0.0 compatible native modules using npm
> npm install
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
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

added 348 packages, and audited 1596 packages in 34s

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

7 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

再度、expoを立ち上げ、

npx expo start

wを入力すると、ローカルでReactNativeWebを表示することができました。

まとめ

まずは、HelloWorldまで実行することを目的に実行しました。初めてクロスプラットフォームのツールを触ったため、環境構築だけでもエラー出力が多いのかと感じていました。ですが、少しのエラー出力はあったものの、iOS・Android・Webの起動がすぐに行えました。クロスプラットフォームを扱えると同時にWebとAppを作成することができるのか、、と感動しました。ですがバージョン管理であったり、ビルド周りのエラー出力に関する記事が多いように感じたので、プロジェクトの実装・運用面では苦労しそうだという印象を受けました。次回は、簡単なUI実装をしていきたいと思います。

最後に

他にも良い方法があれば、コメントいただけると大変うれしいです。
良かったと思ったら、いいねやTwitterのフォローよろしくお願いいたします！

個人でアプリを作成しているので、良かったら覗いてみてください！