LoginSignup
0
1

More than 1 year has passed since last update.

[MacOS][React Native][Expo Go][Node.js]環境構築からプロジェクト作成まで備忘録

Last updated at Posted at 2023-03-06

前提条件:アプリ検証するためのスマホにExpo Goアプリがインストールされていること
(インストール先URL:https://expo.dev/client

手順は大きく5つです
1.Node.jsのインストール
2.yarnのインストール
2.5.yarnのインストールがうまくいかない時(権限エラー)
3.プロジェクトを作成する
4.開発サーバを起動する
5.Expo Goアプリで確認する
EX.まとめ


Node.jsのインストール

MacにNode.jsをインストールします。
いろんなインストール方法があると思いますが私は今回公式サイトのインストーラから取り込みました。
公式サイト:https://nodejs.org/ja/download/
 


yarnのインストール

Macにyarnをインストールします。
yarnとは何?については私は↓を参考にしました。
https://qiita.com/Hai-dozo/items/90b852ac29b79a7ea02b
https://newsite-make.com/node-npx-npx-yarn/

・yarnインストールコマンド

% npm install -g yarn 

・インストール成功時のログ

added 1 package in 1s

 


yarnのインストールがうまくいかない時(権限エラー)

インストーラを使うとローカルの権限を持つディレクトリにnpmがインストールされるためにパッケージをグローバルに実行すると権限エラーが発生することがあるそうです。

・権限エラーログ

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules' 

そういう場合はnpmのデフォルトディレクトリを手動で変更してあげるといいみたいです。
下記コマンドを順次打っていきます。

・ホームディレクトリにグローバルインストール用のディレクトリを作成

% mkdir ~/.npm-global

・新しいディレクトリパスを使用するようにnpmを構成

% npm config set prefix '~/.npm-global'

・任意のテキストエディタで、~/.profileファイルを開くか作成して、次の行を追加

% export PATH=~/.npm-global/bin:$PATH

・更新

% source ~/.profile

 


プロジェクトを作成する

材料が揃ったのでプロジェクトを作成します

・プロジェクト作成コマンド

"プロジェクトを作成したいディレクトリ" % npx create-expo-app "プロジェクト名"

・処理を続行するか聞かれるので了承する("y"押下)

[ create-expo-app@1.3.2
Ok to proceed? (y) y

・処理実行成功ログ
私は色々ワーニング出たものの一応成功ログ出ました。

✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.

- cd sampleTodo
- npm run android
- npm run ios
- npm run web

 


開発サーバを起動する

作成したプロジェクトのサーバを起動します。

・サーバー起動コマンド

"作成したプロジェクトのディレクトリ" % yarn expo start 

・成功ログ

yarn run v1.22.19
$ "作成したプロジェクトのディレクトリ"/node_modules/.bin/expo start
Starting project at "作成したプロジェクトのディレクトリ"
Starting Metro Bundler
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
█ ▄▄▄▄▄ █ ██▀▀▄▀▄██ ▄▄▄▄▄ █
█ █   █ █  ▀█ ▀██▀█ █   █ █
█ █▄▄▄█ █▀  █▄█▀▄▀█ █▄▄▄█ █
█▄▄▄▄▄▄▄█▄█ ▀▄█▄▀ █▄▄▄▄▄▄▄█
█ ▄██▄ ▄█▀█▄█▄▀▄▀▄██ ▀▄▄ ▄█
█ ▄█  ▄▄   ▄█▀█▀ ▀▀ █▄  ▀██
█ ▀ ▄█▄█"QRコード"█▄▀▀▀▄ ▀██
███▀  ▄▄ ███ ▄█▀▄▄▄█▄▀ ▀███
█▄▄▄█▄▄▄▄▀█ █▄▀▄▄ ▄▄▄ ▀ ▄▄█
█ ▄▄▄▄▄ █▀▀▀█▀██▀ █▄█ ▀▀▀██
█ █   █ █▄ ▀▄ ▀▄█▄▄ ▄▄▀ ▀▀█
█ █▄▄▄█ █▀   ███▄██▄▀█▀▀ ██
█▄▄▄▄▄▄▄█▄▄▄███▄████▄▄▄▄▄▄█

› Metro waiting on exp://"ポート番号"
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› 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 ? │ show all commands

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

  


Expo Goアプリで確認する

Expo Goアプリでサーバ起動したプロジェクトを確認します。

・スマホカメラでターミナルに表示されたQRコードを読み取る
・表示されたURLをExpo Goアプリで開く
成功するとスマホの画面に↓の状態が表示されます。
まだ何も実装していないのでこの表示で問題ないです。
IMG_B119A6BFA6FD-1.jpeg

また、Expo Goアプリでのビルドが成功するとターミナルに以下のログが増えてると思います。
・Expo Goアプリでビルド成功後のログ

iOS Bundling complete 11366ms

あとはExpo Goに表示された通りApp.jsファイルなどで色々実装すると、変更保存するたびにExpo Go側の画面が更新されていきます。
(今回は「Open up App.js to start working on your app!」を「Hello world!」に書き換えてみた)
IMG_AD793377A46B-1.jpeg


まとめ

以上がM1 MacでReact Native開発するためのExpo Goを用いた環境構築手順です。
公式が初心者に推奨している通り、CLIを用いたりするよりも難易度低いのかなと思います。
(比較していないのでわからないですが、、)
今までスマホアプリ開発はAndroidStudioでもXcodeでも実機で検証する際には有線で接続していたので
QRコードからワイヤレスで検証できるのは個人的に少し感動しました。

終わり。


参考:https://zenn.dev/ikeo/articles/8d0c88dcedf256b09f73

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1