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プロジェクトにTypeScriptを導入する手順

React NativeプロジェクトをTypeScriptで作成したい。 プロジェクトをTypeScriptに変更したい。 このような疑問に答えます。 TypeScriptはJavaScriptから派…

もっと見る

react-native-calendarsの日本語化とカスタム方法

React Nativeでカレンダーを実装したい。 react-native-calendarsの使い方やカスタム方法が知りたい。 このような疑問に答えます。 〇この記事の内容 react-nativ…

もっと見る

ESLintとPrettierの導入【React Native & TypeScript】

React NativeとTypeScriptで開発する場合の便利なツールを知りたい。 ESLintやPrettierをプロジェクトやVSCodeに導入する方法が知りたい。 このような疑問に答えます。…

もっと見る

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

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

もっと見る

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

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

もっと見る


  1. […] React NativeをWindowsでの環境構築の手順は、React Nativeの環境構築の手順【Windows版】に日本語でまとめてあるので、こちらも参考にしてみてください。 […]

comment

メールアドレスが公開されることはありません。

プロフィール

プロフィール

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

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

広告

<スポンサーリンク>