こんにちは!突然ですが、このページに辿り着いた方は**「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 --version
npm --version
#Expoのインストール
npmコマンドからインストールします。
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
成功するとこのようになります。
雛形が作成されたので、少し中身を覗いて見ましょう!
初期状態ではApp.jsが画面に読み込まれています。基本的にはここら辺を使って開発していきます。
次に、これを実際にお手持ちのiPhoneで開いてみたいと思います。
#実機での動作確認
まずはApp storeからExpo Goをダウンロードしておきましょう!
次に、プロジェクトのあるディレクトリに移動して、expo start
で開発サーバを立てます。
cd MyApp
expo start
すると、ブラウザとターミナルにこのようなQRコード付きの画面が出現すると思います。
CONNECTIONで「LAN」を選択している場合は、**お使いのPCとスマホが同じネットワークに繋がっている(共通のwi-fiを使っている)必要があります。**また、Expoが誤ったIPアドレスを認識している可能性があるのでよく確認してください(私の場合はHAMACHIがオンラインになっていたので間違ったネットワークに繋がっていました)
ちなみに、どうしても別々のネットワークじゃなきゃダメ!という場合は、「Tunnel」を選択してビルドしてください。ただし、ビルドも更新も時間がかかるので使い勝手が悪いです…
これをiPhoneのカメラで読み取り、現れたリンクからExpo Goへと飛びましょう!
ビルドが完了し、App.jsにあるテキストが表示されれば成功です!
お疲れさまでした!次回は実際にアプリを作っていきたいと思います!
それでは~~!