MENU

IT導入どうにゅう・DX支援しえん受付うけつけ中ちゅう！

  • 現役げんえきエンジニアがサポート
  • WraptasアンバサダーによるWEBサイト制作せいさく
  • オーダーメイドの自動じどう化かツール開発かいはつ

＼ 無料むりょうで相談そうだん可能かのう ／

詳細しょうさいをみる
IT導入どうにゅう・DX支援しえん受付うけつけ中ちゅう！CLICK!

【初心者しょしんしゃ向むけ】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をコピーしました！
この記事きじで分わかること