こん○○は、よふかしわーくすのよふかしさんです
Androidアプリを作りたかったのですが
特に高度なことはする予定はなくって、簡単にさくっとできないかなぁと思ってました
ちょっと調べてみたところ…
- React Nativeを使うと簡単に作れそう
- しかもAndroidとiOSのクロスプラットフォームでできそう
ってな感じかなと思ったのでやってみました
WindowsでReact Nativeの開発環境を構築する時点で挫折しそうだったのですが…
なんとかかんとか構築できたので手順の備忘録を残しておきます
React Nativeって何？
そもそも、よふかしさんはReact Nativeというものを知りませんでした
ざっと調べてみたので簡単にまとめてみます
- Meta社（旧Facebook社）によって開発されたフレームワーク
- JavaScriptベースでReactというJavaScriptライブラリを使ったスマホアプリを開発可能
- AndroidとiOSの両方に対応するクロスプラットフォーム開発が可能
- JavaScriptはインタプリタ言語なので、コード変更をすぐにアプリに反映可能
- ネイティブアプリと比較して劇的な操作感の低下がない、高パフォーマンスで実行可能
Androidアプリを作りたかったのですが、追々iOS向けも作りたかったので一石二鳥です
JavaScriptも少し触ったことがあるのも、個人的にとっつきやすいポイントです
という訳で、React NativeをWindowsで開発環境を構築してみました
以降、順を追って開発環境のセットアップ手順を残しておきます
Node.jsのインストール
Node.jsはJavaScriptの実行環境です
React Nativeのパッケージ管理、npmコマンドを利用するために必須なので、まずはこのセットアップから実施します
Node.jsは下記からDownloadします
今回は
・node-v22.15.0-x64.msi
をインストールしていきます
まずは実行画面です
Nextをクリック
Nextをクリック
Nextをクリック
Nextをクリック
Automatically install the necessary tools. Note that this will also install Chocolatey. The script will pop-up in a new windows after the installation completes.
をチェックオンしてNextをクリック
Installをクリック
Finishをクリック
その後、すかさずコマンドプロンプトが立ち上がります
何かキーを押します
今度はPowerShellが立ち上がり、各種インストールが実施されます
これは結構時間が掛かるので、じっくり待ちます…
インストールが完了したら、念のためインストール結果を確認しておきます
まずはNode.jsのバージョン確認です
node -v今回は、
v22.15.0
と表示されます
次に、Node Package Managerのバージョン確認です
npm -v今回は、
10.9.2
と表示されます
これで、Node.jsのインストールは完了です
JDKのインストール
JDKとはJava Development Kitの略で、製作したアプリをビルドするために必要です
JDKには大きく2種類が存在します
| 比較項目 | OpenJDK | Oracle JDK |
|---|---|---|
| ライセンス | 無償 | 一部商用（有償） |
| サポート | コミュニティベース | Oracle公式サポート |
| 更新頻度 | コミュニティの管理による | 定期的なアップデート |
| 用途 | 個人・小規模開発向け | 企業向けの安定運用 |
ざっくり、OpenJDKは小規模や個人用、Oracle JDKは大規模や商用といった使い分けでしょうか
今回はOpenJDKをセットアップしていきたいと思います
OpenJDKは下記からDownloadします
今回は、
・OpenJDK21U-jdk_x64_windows_hotspot_21.0.7_6.msi
をインストールしていきます
次へをクリック
使用許諾契約書に同意します、にチェックを入れて、次へをクリック
次へをクリック
次へをクリック
次へをクリック
完了をクリック
これで、OpenJDKのインストールは完了です
React Native CLIのインストール
React Native CLIをインストールしていきます
React Nativeプロジェクトを作成、管理するためのコマンドラインツールで、必須です
下記コマンドを実行します
npmはNode Package Managerのコマンドで、-gでグローバルに、react-navive-cliをインストールします
npm install -g react-native-cliAndroid Studioのインストール
React Nativeの開発環境があればAndroid Studio自体は必須ではないです
ただ、デバッグ時に実機ではなくAndroid Emulaterを使用したり、Android向けビルドに必要なAndroid SDKがセットアップできたりなど、何かと便利なのでほぼ必須と言っていいかと思います
Android Studioは下記からDownloadします
今回は、
・android-studio-2024.3.2.14-windows.exe
をインストールします
Nextをクリック
Nextをクリック
Nextをクリック
Nextをクリック
Nextをクリック
Finishをクリック
Android Studioが立ち上がります
Don’t sendをクリック
Nextをクリック
Nextをクリック
Nextをクリック
Acceptを選択してFinishをクリック
Downloading Componentsが始まるので、完了したらFinishをクリック
これでAndroid Studioのインストールは完了です
Android SDKのセットアップ
Android Studioでビルドに必要な各種SDKのセットアップを実施します
New Projectをクリック
Empty Activityを選択してNextをクリック
Nameやパスを適当に付与してFinishをクリック
こんな感じで立ち上がります
各種SDKをインストールしていきます
Tools→SDK Managerを選択
SDK PlatformsタブのAndroid最新バージョンのAndroid SDK Platformにチェックを入れる
（2025年5月現在、Android15までしか正式リリースされていないので、16はパスして15を選択）
既にInstalledになっているものもありますが、下記が必須のAndroid SDKです
Android SDK Build-Toolsの最新バージョン（今回は36）をチェック
Android SDK Command-line Tools (latest)をチェック
Android SDK Platform-Toolsをチェック
OKをクリック
OKをクリック
Finishをクリック
これでAndroid SDKのセットアップは完了です
Android SDKのインストール確認
よふかしさんの場合はインストールしても環境変数のパスが通っていなくてハマりました…
なので、本項目も実施確認してください
下記コマンドが動作するか確認する
%USERPROFILE%\AppData\Local\Android\Sdk\platform-tools\adb --version正常な場合は、この様に表示されます
Android Debug Bridge version 1.0.41
Version 35.0.2-12147458
Installed as C:\Users\React\AppData\Local\Android\Sdk\platform-tools\adb.exe
Running on Windows 10.0.19045下記コマンドも確認します
%USERPROFILE%\AppData\Local\Android\Sdk\cmdline-tools\latest\bin\sdkmanager --list正常な場合は、この様に表示されます
もっとたくさんのパッケージが表示されますが、1行目だけで省略します…
Picked up JAVA_TOOL_OPTIONS: -Dfile.encoding=UTF-8
[=======================================] 100% Computing updates...
Installed packages:
Path | Version | Description | Location
------- | ------- | ------- | -------
build-tools;34.0.0 | 34.0.0 | Android SDK Build-Tools 34 ダメな場合は、環境変数に下記のパスを通します
- %USERPROFILE%\AppData\Local\Android\Sdk\platform-tools
- %USERPROFILE%\AppData\Local\Android\Sdk\cmdline-tools\latest\bin
ANDROID_HOMEも確認します
echo %ANDROID_HOME%ダメな場合は環境変数を追加します
これでAndroid SDKのインストール確認は完了です
Androidエミュレーターのセットアップ
Android Studioでデバッグ時のエミュレータのセットアップを実施します
エミュレーターを使うことで、PC上でAndroidアプリの動作をテストできる様になります
Tools → Device Manager、を選択
Create Virtual Device、をクリック
任意のデバイスを選択（今回はPixel 9を選択）
Finishをクリック
Device Managerに任意で選択したデバイス（今回はPixel 9）が表示されます
これでAndroid Emulaterのセットアップは完了です
実機Androidデバイスでのデバッグ環境をセットアップ
手持ちのAndroidの実機を使ったテスト環境も構築しておきます
エミュレータだけでは実際に手で触った操作感はわからないので、実機でもデバッグできる様にします
- 開発者向けオプションを有効にする
- 設定→デバイス情報→ビルド番号、を7回連続タップ
- USBデバッグをオンにする
- システム→開発者向けオプション→USB デバッグ、オンにする
React Nativeでサンプルアプリを作成する
いよいよ、React Nativeを使ってAndroidアプリを作成してみます
任意のフォルダ内にアプリ用フォルダ（今回は、MyApp）を作成して初期化します
npx @react-native-community/cli init MyApp
npmをインストールします
cd MyApp
npm install自動生成されたサンプルコードをビルドしてみます
cd android
gradlew buildビルドが通ったら、エミュレータまたは実機にアプリをインストールして実行します
cd ..
npx react-native run-android下記の様に表示されたら成功です！
（画面はPixel 4aですが…）
うまくいかない場合はキャッシュクリアも有効です
npx react-native start --reset-cacheここまでくれば、初期セットアップは完了です
アプリケーションを自作して起動してみる
ルートフォルダに作られているApp.tsxファイルに下記を記述して実行します
（環境、バージョン等によっては、App.jsかもしれません、存在しない場合は新規作成してください）
import React from 'react';
import { View, Text } from 'react-native';
const App = () => {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>Hello, World!</Text>
<Text>yofukashi-works</Text>
</View>
);
};
export default App;
この様に表示されればOKです
そんなこんなで、自作アプリを開発する環境が整いました！
トラブルシュート：エミュレータの接続確認
アプリのエミュレータ起動がうまくいかない場合、いくつか確認方法がありますが
まずは、デバイス（エミュレータ）が接続されているか確認します
adb devicesList of devices attachedの下に、何らかが表示されることを確認できればOKですが…
もし、エミュレータがOFFLINEの場合は下記を試すのも有効です
adb kill-server
adb start-server
adb devicesこれでエミュレータがONLINEになっていることを確認できればOKです
VMWareやHyper-Vなどの仮想環境を起動しているとうまくいかないかもしれませんので
一度、仮想環境を閉じてみたり、OS自体を再起動することも試してみてください
再度となりますが、キャッシュクリアも有効です
npx react-native start --reset-cacheこの開発環境でAndroidを仮想起動すること自体が少し特殊なので
色々トラブルの可能性がありますが、ひとつひとつ追っていけばなんとかなると思います…
終わりに
React NativeでのAndroid/iOSアプリを開発するためのWindowsでの環境を構築してみた
ということで、解説記事を書いてみました
実際にアプリのコーディングを進めていくと、色々とハマることが出てくるかなぁと思いますが
それはそれで都度記録を残していきたいと思います。。。
公開日時：2025/05/18 3:25:43
コメント