React Native

React Nativeの環境構築の手順【Windows版】

投稿日:2020年9月19日 更新日:

WindowsでReact Nativeの開発環境を構築する方法を知りたい。

このような疑問に答えます。

React Nativeの環境構築の方法にはRect Native Cliを使用する方法とExpoを使う方法の大きく2種類あります。

今回は、最もプレーンなReact Native Cliを使用する環境構築の手順を紹介します。

MacでReact Nativeの開発を行いたい場合はReact Nativeの環境構築の手順【MacOS版/M1対応】をご覧ください。

※この記事は、2020年9月時点、React Nativeの公式ホームページで推奨されてる、Windowsでの開発環境の構築手順を参考にして紹介します。
詳しくはReact Native公式ホームページのSetting up the development environmentをご覧ください。

この記事の内容

<スポンサーリンク>

はじめに:React Nativeの紹介と注意事項

React Nativeは、Facebookが開発したJavascriptのフレームワークのReactをモバイルで使用できるようにしたフレームワークです。
モバイルアプリフレームワークなので、Android、iOSの両方で動くアプリを作れます。

React Nativeを用いるメリットを知りたい場合は、アプリ開発でReact Nativeを使うメリットをご覧ください。

しかし、Windows環境で開発をする場合、iOSのプロジェクトは直接ビルドできません。

iOSプロジェクトをビルドしたい場合は、Expoを利用するか、MacOSのパソコンを使用しましょう。

Chocolateyのインストール

ChocolateyはWindowsのアプリをコマンドでインストールするためのツールです。
Chocolateyの公式ホームページはこちら

React Nativeの環境をインストールするためにChocolateyをインストールします。

① PowerShellかコマンドプロンプトを管理者として実行します。

PowerShell、またはコマンドプロンプトの実行方法:タスクバーの検索欄にPowerShellまたはcmdと記入して、「管理者として実行」を選択します。

② Chocolateyのhttps://chocolatey.org/installに記載されている以下のコマンドを先ほど起動したPowerShellかコマンドプロンプトで実行します。

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

③ インストールが完了したら、chocoと入力し、実行してみましょう。

バージョンが表示されたら完了です。

Node、Python2、JDKのインストール

React NativeのビルドにはJavaScriptを実行する環境のNodeとPythonを使用します。
Androidアプリの開発のためにJDK(Java Development Kit)も必要です。

Node、Python2、JDKを先程インストールしたChocolateyを使ってインストールします。

JDKはバージョン8以降のものをインストールしましょう。
ここでは、バージョン11をインストールします。

① PowerShellかコマンドプロンプトを管理者として実行します。

② 以下のコードを記述して実行します。

choco install -y nodejs.install python2 openjdk11

③無事インストールされたか確認をします。

一度、PowerShellかコマンドプロンプトを閉じ、再度起動します。

そして、node -vpython --versionjava -versionjavac -versionを順番に実行します。

すべてのバージョンが確認出来たらインストール完了です。

Android開発環境の準備

これから、Androidでの開発をするための環境を整えます。

Android Studioインストール

Android Studioのインストーラーを公式ページからダウンロードします。

ダウンロードが出来たら、Android Studioのインストーラーを起動しましょう。

インストーラーの指示に沿ってインストールの手順を進めていきます。

セットアップの「choose component」の画面で、「Android Virtual Device」にチェックが入ってることに注意しましょう。

android-studio-install-001

インストールできて、Android Studioが起動すると、いくつかの設定を行います。

次の画面にたどり着いたら、「Custom」を選択します。

android-studio-install-002

SDK Components SetUpで 「Android SDK Platform」下の項目と「Android Virtual Device」の項目にチェックを入れましょう。
それ以外はそのままの推奨設定で問題ありません。

android-studio-install-003

以下のAndroid Studioのホーム画面にたどり着いたら、インストール完了です。

android-studio-install-004

Android SDKのインストール

Android Studioのホーム画面右下の「Configure」から、「SDK Manager」を選択します。

画面上部の「SDK Tools」を選択後、画面右下の「Show Package Details」にチェックを入れ、「29.0.2」が選択されているか確認します。
選択されていない場合は、チェックを入れ、「Apply」をクリックします。

android-studio-install-005

ライセンスに同意し、追加したSDKをインストールします。

以下の画面になったらSDKのインストール完了です。

android-studio-install-006

環境変数の設定

Android Studioの環境変数を設定します。

まず、ANDROID_HOMEの環境変数を設定します。

①コントロールパネルを開きます。

タスク バーの検索ボックスに「コントロール パネル」と入力して、[コントロール パネル] を選びます。

②「ユーザーアカウント」→「ユーザーアカウント」→「環境変数の変更」と進みます。

③「新規作成」を押して、ANDROID_HOMEの環境変数を以下のように追加します。

android-studio-install-007

変数値はSDKフォルダのパスにします。
エキスプローラーのアドレスバーに%LOCALAPPDATA%\Android\Sdkと入力すると、SDKフォルダのパスまで移動します。

④PowerShellを起動し、Get-ChildItem -Path Env:\を実行して、「ANDROID_HOME」が追加されてることを確認します。

以上でANDROID_HOMEの環境変数の設定は完了です。

次に、platform-toolsのパス変数を追加します。

① コントロールパネルを開き、「ユーザーアカウント」→「ユーザーアカウント」→「環境変数の変更」と進みます。

② 「Path」を選択し、「編集」→「新規登録」と進みます。

③ platform-toolsのパスを以下のように追加します。

android-studio-install-008

エキスプローラーのアドレスバーに%LOCALAPPDATA%\Android\Sdk\platform-toolsと入力すると、platform-toolsのパスまで移動します。
そこのパスを追加しましょう。

これで環境変数の設定は完了です。

プロジェクト作成と起動確認

React Nativeのプロジェクトを作成して、起動してみましょう。

プロジェクトの作成

PowerShell、またはコマンドプロンプトを管理者で実行して、プロジェクトを作成したいパスまで移動しましょう。
cd [フォルダのパス]で移動することができます。

以下のコードを実行して、プロジェクトを作成します。

npx react-native init [プロジェクト名]

「Run instruction」が表示されたら作成完了です。

*react-native-cliパッケージをインストールしてあると不具合が発生する場合があるので、事前に削除しておきましょう。

仮想デバイスの起動

Android Studioのホーム画面右下の「Configure」から、「AVD Manager」を選択します。

すでにデバイスを作成済みの場合は、Playボタンを押して、デバイスを起動します。

まだデバイスを作っていない場合は「Create Virtual Device」を選択し、新しいデバイスを作成します。

デバイスの種類をお好みで選択し、次の画面で「Api Level」の29をダウンロードします。

android-studio-install-009

ダウンロードが完了したら、そのまま進み、作成来たら、Playボタンを押して起動します。

これで、プロジェクトを実行するためのデバイスの準備は完了です。

プロジェクトの実行

まず、Metroを起動します。

PowerShell、またはコマンドプロンプトで、作成したプロジェクトのフォルダ内まで移動しましょう。

そして、以下のコードを実行します。

npx react-native start

プロジェクトの実行中はMetroを起動したままにする必要があります。実行しているウィンドウを閉じないように気を付けましょう。

次に、プロジェクトを起動します。

新しくPowerShell、またはコマンドプロンプトを開き、作成したプロジェクトのフォルダ内まで移動しましょう。

以下のコードを実行し、プロジェクトを起動します。

npx react-native run-android

以下のような画面が仮想デバイス上に表示されたら、起動成功です。

react-native-project

 

<スポンサーリンク>

まとめ

以上がWindowsでのReact Nativeの環境構築の手順になります。

新しいバージョンがリリースされていたら、少し手順が変わる可能性があります。随時、公式ドキュメントを確認してみてください。

この記事の環境構築を参考にして、ぜひReact Nativeでのアプリ作成に挑戦してみてください!

広告

<スポンサーリンク>

広告

<スポンサーリンク>

-React Native
-

執筆者:

関連記事

React Nativeでclassをfunctionに変換する10ステップ

React Native のclassをfunctionに変換したい。 このような疑問に答えます。 React Nativeでモバイルアプリ開発をするとき、functionで作りたくても、多くの資料は…

もっと見る

React Nativeの環境構築の手順【MacOS版/M1対応】

MacOSでReact Nativeの開発環境を構築する方法を知りたい。 iOS、Android、それぞれの開発に必要なツールが知りたい。 このような疑問に答えます。 この記事では、MacOSでRea…

もっと見る

React NativeとTypeScriptの開発におすすめな本

React NativeとTypeScriptのおすすめな本を知りたい。 このような疑問に答えます。 React NativeとTypeScriptの日本語の情報はまだ少なく、中々見つかりません。 そ…

もっと見る

【React Native】classとfunction、どちらを使うのか

classとfunctionの違いを知りたい。 どちらを使ったらいいのかわからない。 このような疑問に答えます。 React Nativeには、classとfunctionがあり、どちらを中心に使えば…

もっと見る

React Nativeのおすすめの勉強法と進め方【環境構築から学習まで】

React Nativeの学習方法が知りたい。 このような疑問に答えます。 私がReact Nativeを習得した経験を踏まえた上で、React Nativeのおすすめの学習方法をまとめました。 ※こ…

もっと見る


comment

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

プロフィール

プロフィール

海外経験14年の帰国子女。
未経験からエンジニアに転職。
開発を中心にPLとして活動中。

詳しいプロフィールはこちらから。

広告

<スポンサーリンク>