- これからReactNativeでアプリ開発を始めようとしている人
- アプリ開発をしたいけど、環境構築のやり方が分からない
と言う環境構築の手順で困っているという方向けの記事となっています。
1.概要
まず、一番最初に言っておきたいことがReactNativeの環境構築には2種類あります。
その2種類というのが、
Expoを使って開発をするかしないかです。
expoを「使わない方がいい」という方と「使った方がいい」という方で分かれますが、
筆者本人はexpoを使って開発をしている為、ここでは、expoを使った開発構築手順を説明していきます。
expoとは
expoとは、アプリ制作を支援するための開発ツールのことです。
◯メリット
- expoを使うことでReactNative開発をWeb開発みたいにリアルタイムで反映させながら開発することができる
- アプリのビルドをせずに実機で動作確認ができる
- 一つのソースコードでiOSとAndroidのアプリが作れる
◯デメリット
- ネイティブAPIはExpo側で用意されたものだけしか使えない
- アプリ内課金システムが使えない
前までは、プッシュ通知やカメラの機能などはネイティブコード(SwiftやJava)で書かれたコードでしか実装できなかったですが、現在Expoでそれらの機能が使えるようになりました。
なので、ネイティブコードを使う必要がすくなり、Expoを使って開発する人が増えてきたと思います。
2.インストール手順
インストール手順については、他の多くのサイトで手順が解説されているため、
ここでは、細かくインストール手順まで解説していきませんので、よろしくお願いします。
さて、今から色々とインストールしてもらうのですが、準備して欲しいのがターミナルです。
◯ターミナルの起動方法
1. DockでLaunchpadのアイコンをクリックして、検索ボックスに「ターミナル」と検索。
2. Finderで、「/アプリケーション/ユーティリティ」フォルダを開いてから、「ターミナル.app」をダブルクリック。
このターミナル上にコマンドを入力してインストールやバージョン確認、アプリケーションの起動などを行っていきます。
2-1. Homebrewインストール
Homebrewとは
Mac OSにおいてのパッケージをインストールしたりアンインストールするパッケージ管理システムです。
インストール方法
まず、Homebrewがインストールされているか確認するため、下記のコマンドをターミナルに入力して実行しましょう。
|
1 |
$ brew --version |
インストールされている場合は、下記のようにバージョンが表示されます。
(※バージョンは違っていても問題ありません。)
|
1 2 |
Homebrew 2.2.2 Homebrew/homebrew-core (git revision 4340; last commit 2020-01-12) |
すでにインストールされていた方は、手順2-2.nodebrewインストールを行ってください。
インストールされていない(バージョンが表示されなかった)場合は、公式サイトの手順に従って、インストールしてください。
公式サイト：https://brew.sh/
2-2. nodebrewインストール
nodebrewとは
nodebrewとは、自分のPC内に複数のバージョンのNode.jsを管理するためのツールです。
nodebrewは、インストール必須ではないのですが、nodebrewを使わないとNode.jsのバージョンは一つしか管理できません。
なので、プロジェクトによってバージョンの異なるNode.jsを利用する際など(最新バージョンへ更新する際など)、nodebrewを使うことでNode.jsのバージョンを複数管理することができるので、バージョンを簡単に切り替えることができ、とても便利です!
インストールされていない方は、この際にnodebrewもインストールしておきましょう。
インストール方法
最初に、nodebrewがインストールされているかどうか確認します。
以下のコマンドを実行してバージョンが表示されれば、インストール済みですので、手順2-3. Node.jsインストールを行ってください。
|
1 2 |
$ nodebrew -v nodebrew 1.0.1 |
◯nodebrewがインストールされていない方
nodebrewを入れる前に、既にNode.jsがインストールされている場合は、Node.jsを削除する必要がありますので、以下のコマンドを実行して確認してみましょう。
|
1 2 |
$ node -v v12.14.1 |
バージョン表示された人は、Node.jsがinstallされているので、一度削除してからnodebrewをインストールします。
インストール方法、削除方法は、公式に書いてある通りに進めてください。
公式：https://github.com/hokaccha/nodebrew
2-3.Node.jsインストール
Node.jsとは
Node.jsはサーバサイドでJavaScriptを実行できるようにしてくれるものです。
インストール方法
まず、利用可能なバージョンを確認する為に下記のコマンドを実行します。
|
1 2 3 4 5 6 7 8 |
$ nodebrew ls-remote v0.0.1 v0.0.2 v0.0.3 v0.0.4 v0.0.5 v0.0.6 ・・・ v13.0.0 v13.0.1 v13.1.0 v13.2.0 v13.3.0 v13.4.0 v13.5.0 v13.6.0 v13.7.0 v13.8.0 v13.9.0 v13.10.0 v13.10.1 v13.11.0 v13.12.0 v13.13.0 v13.14.0 v14.0.0 v14.1.0 v14.2.0 v14.3.0 v14.4.0 |
表示された中で最新のバージョン(v〜)をインストールしていきます。
上記の結果では、最新のバージョンがv14.4.0ですので、下記のコマンドでNode.jsのv14.4.0をインストールします。
|
1 |
$ nodebrew install-binary v14.4.0 |
インストールが完了したら、インストールされているか下記のコマンドを実行して確認してみましょう
|
1 2 3 4 |
$ nodebrew ls v14.4.0 current: none /* 現在使用しているバージョン */ |
上記が表示されていれば、インストールができていますが…
currentに使用するNode.jsのバージョンを設定する必要があるので、下記のコマンドを実行しましょう
|
1 2 3 |
$ nodebrew use v14.4.0 use v14.4.0 |
これでNode.jsのインストールは完了です。
2-4. ReactNative-expoインストール
ReactNative-expoの開発環境構築をインストールしていきます。
expoには、Expo CLIやExpo Snackなどのツールがありますが、筆者本人はExpo CLIしか使ったことしかない為、ここでは、Expo CLIのインストール方法について紹介します。
Expo CLIは、下記のコマンドを実行することで、インストールすることができます。
|
1 |
$ npm install expo-cli --global |
補足：npmとは、「Node Package Manager」の略で、(Node.jsの)便利な機能をまとめたライブラリのインストールやアップデート等の管理をしてくれるものです。
3.動作確認
3-1. プロジェクトの新規作成
プロジェクトの新規作成は、下記のコマンドを実行します。MyApp部分はお好きなの名前に変更してください(プロジェクト名は作成後でも変更可能です)。
※プロジェクトファイルは、現在のディレクトリパス上のフォルダに作成されます。
現在のディレクトリパスは、ターミナル上でpwdコマンドを実行することで確認することがきます。
|
1 |
$ expo init MyApp |
実行後、下記の表示のように、
「プロジェクト内のテンプレートは、どれにしますか？」と聞かれるので、
今回はテンプレートは使用せずプロジェクトを作成するので、 「blank」 を選択しEnterを押してください。
|
1 2 3 4 5 6 7 8 9 10 |
$ expo init MyApp ? Choose a template: (Use arrow keys) ----- Managed workflow ----- ❯ blank a minimal app as clean as an empty canvas blank (TypeScript) same as blank but with TypeScript configuration tabs several example screens and tabs using react-navigation ----- Bare workflow ----- minimal bare and minimal, just the essentials to get you started minimal (TypeScript) same as minimal but with TypeScript configuration |
これでプロジェクトフォルダが作成されます。
3-2. アプリケーションの起動
作成したプロジェクトルート(MyAppフォルダ)上まで、cdコマンドで移動してください。
プロジェクトルート上でnpm startコマンドを実行するとローカルサーバー上でアプリケーションが起動します。
|
1 |
$ npm start |
起動するとブラウザが自動で下記の「Expo Developer Tools」を開くと思います。
もし、開かれていない人は、ブラウザで「http://localhost:19002」 を検索して開いてください。
この画面操作してシミュレーターや実機によるテストが可能です。
シミュレータによる確認
上記ブラウザ画面の左メニューで
iOSでシミュレーション確認したい時は、「Run on iOS simulator」
Androidでエミュレート確認したい時は、「Run on Android device/emulator」
を選択してください。
ただし、iOSでシミュレーション確認を行うには、Xcodeをインストールする必要があり、
Androidでエミュレート確認を行うには、Andoroid Studioをインストールする必要がある
ので、必要に応じてインストールしてください。
実機による確認
自分のスマホ(実機)で確認する為には、expoの専用アプリを実機側にインストールして会員登録する必要があります。インストールされている方は、Expo Developer Tools上かターミナル上で表示されているQRコードを読み取ることで実機で確認することができます。
(※expoの専用アプリは、iOSであればApple Store、AndroidであればGoogle Play Storeからインストールしてください)
3-3. iOSでのシミュレーション確認
ここでは、iOSのシミュレーション確認を行います。
Expo Developer Tools上の左側にあるRun on iOS simulatorを選択してください。
自動で以下のようなシミュレーターが表示されますので、
以下のように表示されれば、OKです。
4. まとめ
さて、ここまででシミュレーション確認ができましたので、アプリ開発のスタートです。
“ReactNative+Expoの環境構築からプロジェクト作成までの手順を紹介(mac)【ReactNative】” への7件のフィードバック