開発思考実験日記

2018-02-10 (^_^)

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

最近初Macを買いました。最初はXCodeSwiftと戯れていたのですが、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選択可能になるので、選択してデバッグを実行すると実機にインストールされデバッグできるようになります。

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

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

トラックバック - http://d.hatena.ne.jp/dotnetmemo/20180210/1518223914