VS codeでiPhone実機で動作するReact Nativeアプリをデバック！！

react

最近初Macを買いました。最初はXCodeでSwiftと戯れていたのですが、Visual Studioに慣れた体には少し大変です。
今回はMac上でアプリを作成するのですが、ターゲットとしてはAndriodもあります。クロスプラットフォームの開発にはいくつかあって、.net派の私にとってはXamarinが第一選択肢になるのですが、最近はReactも使っているのでReact Naitiveでチャレンジしてみます。
React Naitive はFacebookから提供されていますが、Facebook以外からも多くのアプリが提供されています。クロスプラットフォームのデファクトになる可能性もあると感じています。

Mac上で開発するので、VS code を使用して開発します。React Naitiveのプロジェクトというかワークススペースはreact-native initコマンドをつかって簡単に作成でき、そのフォルダをVS codeで開けばそのまま開発できます。デバッグもReact Native Toolsの拡張機能を追加することで簡単にできます。

これは簡単だと思っていたのですが、今回BLEを利用するアプリなのでiPhoneの実機で動かさないといけないのですが、その方法が分からずVSCodeでは無理かなと思っていました。

それができることが分かったので紹介しておきます。

まず最初にiPhoneの実機にインストールできるようにするios-deployをインストールします。

npm install -g ios-deploy

環境によってはエラーが出ますが、私の環境では以下のコマンドでインストールできました。

sudo npm install -g --unsafe-perm=true ios-deploy

次にVS Codeを起動してVS Codeのメニューのデバッグ（虫）アイコンを選択します。左上にデバッグのラベルがありその右のスピンの選択項目から構成の追加を選択するとlaunch.jsonファイルが開かれるので以下のような構成を追加します。

        {
            "name": "iPhone",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "target": "device",
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },

設定を保存すると追加したiPhoneが選択可能になるので、選択してデバッグを実行すると実機にインストールされデバッグできるようになります。

これでとりあえずコードと戯れる環境が出来たので色々試していきます。