MENU

IT導入・DX支援受付中！

  • 現役エンジニアがサポート
  • WraptasアンバサダーによるWEBサイト制作
  • オーダーメイドの自動化ツール開発

＼ 無料で相談可能 ／

詳細をみる
＼ 最大10%ポイントアップ！ ／詳細を見る

【初心者向け】ReactNativeの基本と環境構築方法を解説

広告
プログラミング
こんな疑問を解決します！
  • ReactNativeってなに？
  • ReactNativeの環境構築方法が知りたい！

ReactNativeは、JavaScriptでネイティブアプリを開発できるクロスプラットフォームフレームワークです。近年、注目を集めており、多くの企業や個人で利用されています。

ReactNativeを始めるには、まず環境構築が必要です。環境構築は、ReactNativeの開発を進める上での基礎となるため、しっかりと理解しておきましょう。

この記事では、ReactNativeの基本と環境構築方法を初心者向けに解説します。

IT導入・DX支援受付中！

  • 現役エンジニアがサポート
  • WraptasアンバサダーによるWEBサイト制作
  • オーダーメイドの自動化ツール開発

＼ 無料で相談可能 ／

詳細をみる
この記事で分かること

ReactNativeとは

ReactNativeとは、Facebook社が開発したモバイルアプリケーションフレームワークです。

使用する言語はJavaScriptで、JavaやSwiftを書かなくてもネイティブアプリを開発することができます。

ReactNativeのメリット

クロスプラットフォーム

Android、iOS、Webの3つのプラットフォームを同時に開発できるため、開発工数とコストを大幅に削減することができます。

ホットリロード機能

従来のモバイルアプリケーション開発では、ソースコードを変更した際にアプリの再起動が必要でした。

ReactNativeのホットリロード機能では、ソースコードを変更した際に、UI部分のみ再ビルドをかけることができるため、再起動せずに変更を反映することができます。

Web開発の経験を活かせる

ReactNativeは、JavaScriptベースで開発するため、Web開発の経験があるエンジニアであれば、短期間でモバイルアプリケーションを開発できます。

ReactNativeの環境構築方法

Chocolateyのインストール

Chocolateyは、Windows向けのパッケージマネージャーです。

ソフトウェアの依存関係を含め、簡単にソフトウェアのインストール・アップデートをすることができます。

Chocolatey – The package manager for Windows

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('<https://chocolatey.org/install.ps1>'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\\chocolatey\\bin

インストールが終わったら、コマンドプロンプトを再起動して、インストールがうまくいったか確認する。

choco -v
2.0.0

Node.jsのインストール

Node.jsは、V8 JavaScriptエンジンをベースとしたJavaScriptランタイム環境です。

Node.jsは、サーバーサイドでのJavaScript実行に特化しており、非同期I/O処理をサポートしています。また、npm(Node Package Manager)というパッケージマネージャーを含んでおり、多くのライブラリやフレームワークが利用できます。

Node.js

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

choco install -y nodejs-lts

インストールが終わったら、コマンドプロンプトを再起動してインストールがうまくいったか確認します。

node --version
v18.16.1

npmもインストールされたか確認するために次のコマンドを実行します。

npm --version
9.5.1

Pythonのインストール

React NativeのビルドシステムはPythonを使っています。

Pythonは、AIやアプリ開発などに用いられている高水準インタプリタ型汎用プログラミング言語です。Webアプリケーション、データ分析、人工知能、機械学習などの分野で広く使用されています。

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

choco install -y python

インストールが終わったら、コマンドプロンプトを再起動してインストールがうまくいったか確認します。

python --version
Python 3.11.4

React Native CLIのインストール

React Native CLIは、React Nativeアプリケーションを作成するためのコマンドラインインターフェース（CLI）です。React Nativeアプリの作成、ビルド、テスト、デプロイに使用できます。

React Native CLIは、React Native開発に必要な開発ツールをインストールするために使用されるnpmパッケージです。

npm install -g react-native-cli

インストールが終わったら、次のコマンドを実行してインストールがうまくいったか確認します。

react-native --version
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

JDKのインストール

Reeact NativeでAndroidアプリを開発する場合はJDK（Java Development Kit）が必要になります。

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

choco install -y microsoft-openjdk11

インストールが終わったら、コマンドプロンプトを再起動してインストールがうまくいったか確認します。

java -version
openjdk version "11.0.18" 2023-01-17 LTS
OpenJDK Runtime Environment Microsoft-7208460 (build 11.0.18+10-LTS)
OpenJDK 64-Bit Server VM Microsoft-7208460 (build 11.0.18+10-LTS, mixed mode)

Android Studioのインストールとセットアップ

Android Studioのインストール手順

  1. 公式ページからAndroid Studioをダウンロードします
  2. インストーラーを起動後「Next」を押下して次の画面に進みます
  3. 「Android Virtual Device」にチェックを入れ、次の画面に進みます
  4. Android Studioのインストールを指定し、次の画面に進みます
  5. スタートメニューを設定する画面が出るので、「Install」を押してインストールを開始します
  6. インストール完了後、「Start Android Studio」にチェックが入っていることを確認して「Finish」を押します

Android Studioのセットアップ

  1. 初回起動時、セットアップウィザードが表示されるので「Custom」を選択して次に進みます
  2. UIテーマをお好みで選択します
  3. SDKコンポーネントのセットアップ画面が表示されるので、「Performance (Intel ® HAXM)とAndroid Virtual Device」の項目にチェックを入れ次に進み、セットアップを完了させます

Android SDKのインストール

  1. Android Studioのホーム画面右下の「Configure」から「SDK Manager」を選択します
  2. 「SDK Platforms」タブ画面右下の「Show Package Details」にチェックを入れます
  3. 次の内容を選択します
    • Android SDK Platform 33
    • Intel x86 Atom_64 System Image または Google APIs Intel x86 Atom System Image
  4. 「SDK Tools」タブ画面右下の「Show Package Details」にチェックを入れます
  5. 「Android SDK Build-Tools」を展開し、「33.0.0」にチェックを入れます
  6. 最後に「Apply」を押してインストールを開始します

Android Studioの環境変数設定

React Nativeは、ネイティブコードでアプリを構築するために環境変数を設定する必要があります。

  1. Windowsのスタートメニューを右クリックし、「システム」を選択します
  2. 画面右の関連設定にある「システム詳細設定」を開きます
  3. 「詳細設定」タブの「環境変数」を押下します
  4. ユーザー環境変数の「新規」を押下します
  5. 変数名と変数値を次のように入力して登録します
    変数名：ANDROID_HOME
    変数値：Android SDKへのパス　例）C:\Users\<ユーザー名>\AppData\Local\Android\Sdk
  6. 変数「Path」の編集画面を開き、platform-toolsへのパスをリストに追加します
    例）C:\Users\<ユーザー名>\AppData\Local\Android\Sdk\platform-tools
  7. 上記が完了したら、コマンドプロンプトを開き次のコマンドを実行します
adb

環境変数設定がうまくいっていれば、次のような結果が表示されます。

Android Debug Bridge version 1.0.41 Version 30.0.3-6597393 Installed as C:\\Users\\<ユーザー名>\\AppData\\Local\\Android\\Sdk\\platform-tools\\adb.exe

プロジェクトの作成

コマンドプロンプトを管理者権限で開き、プロジェクトを作成したいパスまで移動して次のコマンドを実行します。

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

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

「TypeError: cli.init is not a function for react native」と出た場合は、バージョンを指定して実行します。

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

仮想デバイスの作成

  1. Android Studioのホーム画面右下の「Configure」から「AVD Manager」を選択します
  2. 「Create Virtual Device」からデバイスを押下します
  3. 任意のデバイスを選択し次の画面に進みます
  4. 「x86 Images」タブのTargetが「Android API 33 (Google APIs)」のものを選択し次の画面へ進みます
  5. 「Finish」を押下で完了です

React Nativeアプリケーションを実行する

  1. コマンドプロンプトを管理者権限で開き、作成したプロジェクトのディレクトリに移動します
  2. 次のコマンドを実行し、Metroを開始します
npx react-native start
  1. 新しくコマンドプロンプトを管理者権限で開き、作成したプロジェクトのディレクトリに移動します
  2. 次のコマンドを実行しアプリケーションを開始します
npx react-native run-android

すべてが正しく設定されていると、Androidエミュレータが起動します。

わたゆー

環境構築は以上です！
お疲れさまでした！

まとめ | ReactNativeでいろんなアプリを開発しましょう！

今回はReactNativeの基本と環境構築方法について紹介しました。

ReactNativeは、JavaScriptでネイティブアプリを開発できる手軽で便利なフレームワークです。

環境構築さえできれば、すぐにアプリ開発を始めることができます。

この記事を参考に、ぜひReactNativeでアプリ開発にチャレンジしてみてください。

あわせて読みたい
【初心者向け】Expoの基本と環境構築方法を解説 この記事では、Expoの基本と環境構築方法について紹介しています。
プログラミング
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
この記事で分かること