Reactnative プロジェクトの起動方法について

こんにちは、Uniqoooneブログ担当カワダです。
(今回からちゃんと挨拶を入れていくことにしました。こんにちは!!)

先日、そろそろ開発日記書こうかなあ、なんて言いつつ
今回もまた技術録です!
(キリのいいところまで行ってしまおうかなと思いまして・・・ね!)

今回は少し短めです。テーマは Reactnative プロジェクトの起動方法について!

前回開発環境を整えてもらったと思うので、実際にプロジェクト起動してみましょう、
というお話しです。
今回は ios も Android も書いていきますよ〜。

ちなみに前回の環境構築周りの話はこちら

ということで早速。まずは ios から!

Reactnative プロジェクトの起動方法- ios Ver. –

1.シミュレータ(ios シミュレータ)での起動方法

iosシミュレータ とは?
Appleの開発者向けのツール「Xcode」に付属されているiOSのシミュレータソフト。
Mac上で、iPhoneやiPadの環境をシミュレートすることができます!
その他のシミュレータより優れている点としては、
・Appleが公式に配布しているMac標準アプリケーションなので、動きが軽いこと
・iosシミュレータにしかない開発ツールがあること
・iosでの動きの再現度が非常に高いこと
などがあげられます!

– iosシミュレータでのプロジェクト起動手順 –

主に”ターミナル”を使って起動していきます!

❶ターミナルでプロジェクトのルートディレクトリに移動します。

cd [プロジェクト名]

※自分で決めたプロジェクト名を入力してください(ex : cd NewGameProject )

❷npm(Node Package Manager)をインストールします。

npm install


 ちなみに Node Package Manager とは、Node.jsのパッケージを管理してくれるツールです。
 (そのまんまですね。)
 パッケージには便利な機能がたくさんまとまっており、その管理を楽にしてくれるツールです。
 よく使うコマンドなどはこちらのサイトが参考になるかと思います!

❸iosディレクトリに外部ライブラリをインストール

CocoaPodsちゃんの力を借りてインストールします。

cd ios
pod install

❹プロジェクトの実行!

cd [プロジェクト名]
npm start

ここまできたらもう一つ別個でターミナル画面を開きます。
ここまで使ってたターミナル画面もまだ閉じないでくださいね!

❺iOSのシミュレータで実行する

cd [プロジェクト名]
npx react-native run-ios

以上が iosシミュレータ での起動方法です。

2.実機(iPhone/iPad)での起動方法

シミュレータは非常に優秀ですが、それでもやはり多少の差異はあります。
ですので、iPhone や iPad の実機で動かして確認することも、不可欠です!

– 実機でのプロジェクト起動手順 –

ではアプリを端末に導入していきますので、Macと繋いであげてください。
そして、Apple開発者アカウントを未作成の場合は、先に取得してしまいましょう!
↓ ↓ ↓
Apple Developer Account

①pod インストール

ターミナルで下記コマンドを実行してください。

cd [プロジェクト名]
cd ios
pod install

②プロジェクトを開く

プロジェクト内のフォルダから、「[プロジェクト名].xcworkspace」を探し、開きます(実行します)。
※ ディレクトリ(例):/Users/kawada/sample/ios/sample.xcworkspace

すると xCode Project の画面が立ち上がります。

③デバイスの登録

「Project」⇨ 「Destination」⇨ 「(端末の名前)」 を選択します。
(※端末の名前は個人情報的なアレがありますので隠してあります・・・)

xCodeProject画面でデバイス登録

④プロジェクト各種設定

「sample」⇨「Signing & Capabilities」⇨「Add an Account」を選択してアカウントを登録します。

プロジェクト設定画面

次は「sampleTests」⇨「Signing & Capabilities」⇨「Add an Account」
を選択してこれまたアカウントを登録します。

アカウント登録画面

次に node のパスを設定します。まずは以下のコマンドでnodeのパスを確認します。

which node

パスの取得ができたら、「sample」⇨「Build Phases」⇨「Bundle React Native code & images」
の順に選択し、以下のような画面を開きます。

nodeパス変更

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

と書かれている部分を変更していきます!
“export NODE_BINARY=” 以降の部分を先ほど取得したnode のパスに変更します。
↓変更例↓

export NODE_BINARY= /Users/kawada/.nodebrew/current/bin/node
../node_modules/react-native/scripts/react-native-xcode.sh

⑤Debug か Release かの設定

デバイスをPCに繋いだままで使用したい場合は、”Debug” 状態での使用となり、設定の変更は特に必要ありません。
けれど、デバイスにアプリケーションをインストールして、独立状態でも使用したい!という場合は
“Release”状態に設定を変更をする必要があります。以下、設定方法です!

「Product」⇨「Schema」⇨「Edit Schema」と選択していきます。

"Release"に設定1

画面が開いたら「Run」を選択。
「Debug」となっている設定(Build Congiguration)を “Release”に変更します。

"Release"に設定

⑥実行

「sample」を実行します。(再生ボタン▶︎押下!)

実行

⑦完了

実機にアプリが入っていれば完了です!
「welcom to react」とアプリに表示されるハズ。

以上が ios での手順です!
ではでは続きましてAndroidの手順!

Reactnative プロジェクトの起動方法- Android Ver. –

1.シミュレータ(Android エミュレーター)での起動方法

Android エミュレーターとは?
スマホやタブレットなど、具体的な Android デバイスを仮想で表現してくれる Android 仮想デバイス(AVD)です。
PC 上で Android アプリケーションを実行しテストすることができます。

– Androidエミュレーターでのプロジェクト起動手順 –

❶AVD Manager 起動

まずはAVD(Android 仮想デバイス)Manager を起動しましょう
Android Studio から”Configure”を選択。

AndroidStudioの"configuration"選択

開いたメニューから”AVD Manager” を選択

"Configure" から"AVD MAnager" を選択

❷仮想デバイスの追加

以下のような画面が開いたら、仮想デバイスを追加します。
「+ Create Virtual Device」をクリック

端末情報を追加

仮想デバイスの種類を設定していきます。
今回は、Category:「Phone」 の 「Pixel 2」を選択。
「Next」押下で次に進みます。

仮想デバイスの種類を設定

システムイメージを選択します。
今回は以下の画像のように、
API Level : R のものを選択します。

システムイメージの選択

ライセンス同意画面が表示されるので、
「Accept」にチェックを入れて「Next」をクリック!

ライセンス同意画面

今回設定した仮想デバイスの情報が出てくるので、
一応確認して、「Finish」をクリック!

確認画面

❸エミュレータの起動

「Your Virtual Device」に設定した仮想デバイスが加わったら、
その仮想デバイスの「▶︎」ボタン(Launch this AVD in the emulator とガイドが出るかと思います)を
クリックします!

ローンチ作業を開始

以下の画面が出てくれば起動成功です!

Androidエミュレーター Reactnative 起動画面

❹プロジェクト実行

エミュレーターが無事起動したのでいよいよプロジェクト実行です。

ターミナルで以下のコマンドを実行し、プロジェクトのルートディレクトリに移動します。

cd [プロジェクト名]

続けて以下のコマンドも打ち、プログラムを実行していきます。

npm install
npm start 

ここでもう一つ新しいターミナル画面を開き、以下のコマンドを実行!
さっきまで使っていたターミナル画面はまだ閉じないでくださいね!

cd [プロジェクト名]
npx react-native run-android

以上がAndroidエミュレーターでのプロジェクト実行方法です!

2.実機(Android)での起動方法

ios同様に、Androidでも、エミュレーターだけでなく実機で動かす方法があります。

– 実機でのプロジェクト起動手順 –

⓪Androidデバイスの設定をしておく!

まずは利用する端末の方の設定から。
通常、ほとんどのAndroid端末は、GooglePlayからダウンロードしたアプリのみ、
インストール・実行できるような設定になっています。
つまりこのままでは開発中のアプリを入れられない・・・ということで!
「USBデバッグ」の機能を有効化する必要があります!

早速やっていきましょう。


まず、使ってるAndroidデバイスの開発者オプションを有効化する必要があります。
Androidデバイスの設定 > デバイス情報のビルド番号を7回押すと開発者オプションが有効化されます。
開発者オプションが有効化されたら、設定 > 開発オプション > USBデバッグメニューを選択してUSBデバッグ機能を有効化させます。

これで下準備はOKです(‘▽’)

①Android端末とPCを接続

AndroidデバイスをUSBを使ってPCと接続します。
AndroidデバイスでUSBでデバッグを許可するか聞かれたら許可してあげて、
テストができる状態にしてあげます。

②接続の確認

デバイスがADB(Android Debug Bridge)に正しく接続されているか確認します!
ターミナルを開いて、以下のコマンドを実行してください。

adb devices

以下のようにデバイスが表示されればOKです!

List of devices attached 
HPV1DLXR device

※Android Debug Bridge ってなに??
windowsやmacといった開発端末から、android端末の操作を行えるようにするための
多用途のコマンドライン ツールです。
adb コマンドを使用すると、アプリのインストールやデバッグなど、さまざまなデバイス操作を
実行できます。

③Android デバイスでプロジェクト実行!

ターミナルを開いて以下のコマンドを実行します。

cd [プロジェクト名]
npx react-native run-android

ちなみにリリースビルドの作成を行いたい場合は以下のコマンドが使えます。

npx react-native run-android --variant release

Androidデバイスの画面でアプリが起動すれば完了です!

以上が Android でのプロジェクト実行方法でした。

と、いうことで、今回の内容はここまでとなります!

次回こそ開発日記を更新・・・するとかしないとか( ‘ – ‘ )

果たしてどちらが更新されるのかっ!お楽しみに〜

開発日記ってなんぞやという方はご参考までに
Uniqooone開発日記はこちらから

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です