46
62

More than 1 year has passed since last update.

Windows機でiOSアプリの開発から実機インストールまで行ってみる【ReactNative】~環境構築編~

Last updated at Posted at 2021-07-04

こんにちは!突然ですが、このページに辿り着いた方は**「iPhone開発したい!でもMacPC持ってない!」**というお悩みをお持ちではないでしょうか??

そんなお悩みをお持ちの方には、ReactNativeでの開発をオススメします!!ExpoというReactNativeの開発ツールを用いることにより、たとえMacPCを持っていなくともiPhoneさえあれば実機ビルドもすることが可能です。そしてテスト(実機へのインストール)段階においても徹底的にWindows機だけで行います!(もちろんVirtualBox上でMacOSを使用することもありません)
今回の記事ではiOSアプリを作るための流れと使用ツールの説明を以下でしたいと思います!

#ReactNativeとは?
iOSやAndroid、webといった複数のプラットフォームに対応した(クロスプラットフォーム)フレームワークで、しばしば他の例としてFlutterやXamarinが挙げられます。クロスプラットフォームのフレームワークを使用して開発することにより、「iPhoneはXcodeとswiftで、AndroidはAndroidStudioとJavaで~」のようにそれぞれ別々のプラットフォームで開発する必要は無く、JavaScript(またはTypeScript)だけでiPhoneにもAndroidにも対応したアプリが作れちゃうよ~、っていうのがReactNativeです。

#Expoとは?
ReactNativeには開発ツールとしてExpoとReactNative CLIの二つが用意されています。Expoでは開発サーバを立ち上げると、画面上にQRコードが出現し、スマホ実機で読み取ることで動作確認をすることができます。 ReactNative CLIはWindowsに導入する際はChocolateyを使ってインストールする必要があります。Bluetoothや音楽再生などを扱う場合はこちらを使用しましょう(カメラや位置情報を扱うのはExpoでも可能)ただ、WindowsPCでは実機デバッグやエミュレータの点でReactNative CLIを使って開発するのは難しそうです…
というわけで今回はExpoを使ってiOSアプリを開発していきたいと思います!(もちろんAndroidでも動作します)

#今回の作業の流れ
・node.jsのインストール
・Expoのインストール
・プロジェクトの作成
・実機での動作確認

#node.jsのインストール
こちらからnode.jsのインストーラをダウンロードして、インストールしてください。

node.jsのインストールが完了したか確認
node --version
npm --version

#Expoのインストール
npmコマンドからインストールします。

Expoのインストール
npm install -g expo-cli
#expoコマンドが使えるか確認
expo --version

#プロジェクトの作成
expoを正常にインストールすることができたら、次は任意のディレクトリまで移動してプロジェクトを作成していきます。expo init プロジェクト名を実行するとManaged workflowとBare workflowの2種類のテンプレートを選択することができます。今回はJSを使っていきたいと思うのでManaged workflowのblankを選択します。

プロジェクトの作成
expo init MyApp
#Choose a template: » blank

成功するとこのようになります。
1.PNG
雛形が作成されたので、少し中身を覗いて見ましょう!
2.PNG
初期状態ではApp.jsが画面に読み込まれています。基本的にはここら辺を使って開発していきます。

次に、これを実際にお手持ちのiPhoneで開いてみたいと思います。

#実機での動作確認
まずはApp storeからExpo Goをダウンロードしておきましょう!

次に、プロジェクトのあるディレクトリに移動して、expo startで開発サーバを立てます。

開発サーバを立てる
cd MyApp
expo start

すると、ブラウザとターミナルにこのようなQRコード付きの画面が出現すると思います。
CONNECTIONで「LAN」を選択している場合は、**お使いのPCとスマホが同じネットワークに繋がっている(共通のwi-fiを使っている)必要があります。**また、Expoが誤ったIPアドレスを認識している可能性があるのでよく確認してください(私の場合はHAMACHIがオンラインになっていたので間違ったネットワークに繋がっていました)
ちなみに、どうしても別々のネットワークじゃなきゃダメ!という場合は、「Tunnel」を選択してビルドしてください。ただし、ビルドも更新も時間がかかるので使い勝手が悪いです…
3.PNG
これをiPhoneのカメラで読み取り、現れたリンクからExpo Goへと飛びましょう!
ビルドが完了し、App.jsにあるテキストが表示されれば成功です!

お疲れさまでした!次回は実際にアプリを作っていきたいと思います!
それでは~~!:wave::wave:

次回(開発編)

46
62
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
46
62