前回の続きで、Mac無しでiOSアプリ開発の環境構築編です。
今回はWindowsマシンでiOSアプリの開発を進めるために環境構築を行っていきます。
前提条件
実行環境
Windows11のPC とiPhone13を使って進めていきます。
使用するツール
主に使用するのは次の2つのツールです。
React Native
こちらは前回の記事で触れていますが、React Native を使用してJavaScriptベースでiOSとAndroid両方のプラットフォーム向けにアプリ開発をしていきます。
私はiPhone向けにリリース・使用したいのでAndroidでの動作確認などは直近しない予定です。
Expo
React Nativeのアプリ開発を容易にするためのプラットフォーム。
これを使うことで手元のスマホ(iPhoneでもAndroidでも)、QRコードを読み込むだけでアプリをテストできるようです。
Windows PCへのNode.jsのインストール
React NativeはJavaScriptを使用するので、JavaScript実行環境の1つであるNode.jsをインストールします。
https://nodejs.org/enからインストーラをダウンロードして実行し、インストール。
コマンドプロンプトを起動して次のコマンドを打つとバージョンが表示されました。
C:\Users\tqnse>node -v
v22.14.0
C:\Users\tqnse>npm -v
10.9.2途中でコマンドプロンプトのようなものが立ち上がって、「続行するにはキーを押してください」というようなメッセージが表示されました。
何かキーを押してコマンドプロンプトの進行を待っていると管理者権限でWindows PowerShellが立ち上がって必要なパッケージをインストールしてくれます。
因みに、最初はPowerShellでうまくいきませんでした。
PS C:\Users\tqnse> npm -v
npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことが
できません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してくだ
さい。
発生場所 行:1 文字:1
+ npm -v
+ ~~~
+ CategoryInfo : セキュリティ エラー: (: ) []、PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccessこのエラーは、PowerShellのスクリプト実行ポリシーが原因で発生しているようです。
Windowsではセキュリティの観点から、デフォルトでスクリプトの実行が無効になっている場合があります。
これは次の手順で解決できます。
- PowerShellを管理者権限で開く
- 現在の実行ポリシーを確認
次のコマンドを入力して、現在の設定を確認します。Get-ExecutionPolicy
「Restricted」と表示される場合、この設定を変更する必要があります。
私の場合は「Restricted」と表示されました。 - 実行ポリシーを一時的に変更
次のコマンドを入力して、実行ポリシーを「RemoteSigned」に変更します。Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
RemoteSignedはローカルスクリプトの実行を許可し、外部からダウンロードされたスクリプトに署名を要求します。これは安全性が高い選択肢です。 - 変更を確認 変更が反映されたことを確認するには、再度以下を入力します
Get-ExecutionPolicy - その後、npm -v コマンドを試す。
実際に、上記の手順を進めた結果次のようになりました。
PS C:\Users\tqnse> Get-ExecutionPolicy
Restricted
PS C:\Users\tqnse> Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
PS C:\Users\tqnse> Get-ExecutionPolicy
RemoteSigned
PS C:\Users\tqnse> npm -v
10.9.2設定を戻すには、次のコマンドを打ちます。
Set-ExecutionPolicy -Scope CurrentUser RestrictedExpo-CLIのインストール
ExpoのコマンドラインツールであるExpo-CLIをインストールします。
次のコマンドを打って、Expo-CLIをインストールします。
npm install -g expo-cli歯車的なグルグルがしばらく表示されたあとWarningが沢山でて固まりまりました。
コマンドプロンプトを立ち上げなおして、バージョン確認のために次のコマンドを打ってみました。
C:\Users\tqnse>expo -V
WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
6.3.12表示された、リンク先のブログポストによるとnpxを付ければ新しいバージョンとしてのExpoを使えるようで、それで問題ないみたいです。
プロジェクトの作成
次のコマンドを打って、アプリ開発プロジェクトの雛形を作成します。
C:\Users\tqnse>npx expo init my-first-project
WARNING: The legacy expo-cli does not support Node +17. Migrate to the new local Expo CLI: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421.
┌───────────────────────────────────────────────────────────────────────────┐
│ │
│ The global expo-cli package has been deprecated. │
│ │
│ The new Expo CLI is now bundled in your project in the expo package. │
│ Learn more: https://blog.expo.dev/the-new-expo-cli-f4250d8e3421. │
│ │
│ To use the local CLI instead (recommended in SDK 46 and higher), run: │
│ › npx expo <command> │
│ │
└───────────────────────────────────────────────────────────────────────────┘
Migrate to using:
› npx create-expo-app --template
? Choose a template: » - Use arrow-keys. Return to submit.
----- Managed workflow -----
> blank a minimal app as clean as an empty canvas
blank (TypeScript) same as blank but with TypeScript configuration
tabs (TypeScript) several example screens and tabs using react-navigation and TypeScript
----- Bare workflow -----
minimal bare and minimal, just the essentials to get you started上記の下部、”Choose a template”にあるとおり、workflowを選ぶように促されました。
とりあえずblankを選択。
blankを選択すると、なにやらインストールが始まりました。
しばらく待っていると。
√ Choose a template: » blank a minimal app as clean as an empty canvas
√ Downloaded template.
📦 Using npm to install packages.
√ Installed JavaScript dependencies.
✅ Your project is ready!
To run your project, navigate to the directory and run one of the following npm commands.
- cd my-first-project
- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.
- npm run android
- npm run ios # requires an iOS device or macOS for access to an iOS simulator
- npm run web“Your project is ready!”と表示されたので、プロジェクトのひな型が完成したようです。
プロジェクトのディレクトリに移動してexpo startしてみました。
C:\Users\tqnse>cd my-first-project
C:\Users\tqnse\my-first-project>expo start間違えました、npxが必要でした。正しくは次のように打ちます。
C:\Users\tqnse\my-first-project>npx expo startするとWindows セキュリティのプロンプトが表示されました。
許可をクリックすると、QRコードが表示されました。
このQRコードをiPhoneでそのまま読んでも、何も起きませんでした。
iPhoneにExpoのアプリをインストールしないといけないようです。
Expo Goアプリのインストール
Expo Goというアプリをストアから検索してインストールしました。
アプリを起動するとiPhone側でもExpo Goアプリにローカルネットワーク上でデバイスを見つけることを許可するかの確認が求められるので許可しました。
そして、iPhoneの画面が次のような画面になり、ひな型のアプリが起動しました。
そしてPCのターミナル側には次のような表示が出ており、iPhoneのiOSを認識したようです。
iOS Bundled 7410ms index.js (652 modules)
(NOBRIDGE) LOG Bridgeless mode is enabled
INFO
💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).デフォルトの設定ではiPhoneを振るとデバッグメニューが出てきて、色々開発に役立ちそうな項目がありました。
ここまでで、ひとまず開発環境は整ったようです。
まとめ
今回はReact NativeとExpoを使用したiOSアプリの開発環境をWindows PC上に構築して、実際に手元のiPhoneで動かすところまで実際にやってみました。
ツールのインストールで少しだけ躓きましたが、ほぼスムーズに実機で動かすところまでできたので、簡単な印象を抱きました。
私は過去に(もう10年ほど前ですが..)Android Studioを使ってアプリ開発しようとした時に実機で動かすところまでかなり苦労した経験があります。
その時、USBケーブルで実機と繋ぐだけでなく、Android端末はデバッガーモードに切り替えないといけなかったと記憶しています。(そもそもAndroid Studioが重くて時間がかかる。)
しかし、今回のExpoのように専用のアプリを入れて、QRコードを読むだけでアプリが動くのは、やはり手軽でいいなと思いました。
複数の端末が手元にあれば、より簡単にデバッグもできそうです。
次回はひな型のプロジェクトについて、理解し、コードを改変して開発を進めてみたいと思います。
以上、最後までお読みいただき、ありがとうございました。
コメント