NativeScript-VueをVS Codeで開発してみる #Mac

Prologue

NativeScriptはNativeScript Playgroundというブラウザベースの開発環境が用意されています。QRコードの読み込みやスマホとの同期も簡単に進められ、console.logやエラーも確認ができるので、初めてNativeScriptに触れる自分のような初学者にもわかりやすく使いやすいと思います。
その中で、自分のlocal環境で開発するとしたらどのように設定し、どのようにプロジェクトを作成するのか...疑問に思ったので設定周りをチャレンジしてみました。

環境

macOS: 10.15.2
node.js: 10.16.0
terminal: iTerm
エディタ: VS Code
スマホ実機: iPhone XS(iOS13.3)
Project概要
- 言語: NativeScript-Vue
- パッケージマネージャ: yarn, npm

注意

NativeScriptはほんの少し触った程度のため、実際開発を行っている人向けではないと思います。もし違う点等あればご指摘ください。
NativeScriptを一度も触ったことがない方は、NativeScript Playgroundから入ることをお勧めします。ここではNativeScript Playgroundを使ったことがあることを前提とし、そのため必要なapp等は公式Documentをご確認ください。
ここで書いているのは設定から最初のプレビューまでとなります。

NativeScript CLIのインストール

node.jsがインストールされているか予め確認。

node --version

2. nataivescriptのインストール。

参考: https://docs.nativescript.org/angular/start/quick-setup

npm install -g nativescript

// EACCESS エラーが出たらsudoコマンドを使う

sudo npm install -g nativescript

※ Document通りに進めていましたが、あとで調べたらyarnのpackageにもあるようなので、使いたい人は以下をお試しください。

yarn add nativescript

インストールが成功しているか確認します。

nativescript --version

6.3.0 // version情報が出る

3. tnsコマンドの実行。

3-1. デモプロジェクトの作成
参考: https://docs.nativescript.org/angular/start/cli-basics

  tns create nativeApp[project-name] --template tns-template-blank-ng

3-2. localで作ったAppとスマホデバイスのNativeScript Playground appをリンクさせます。

※ 以降のコマンドはiTermなどのターミナルでもVS Codeのターミナルどちらでも可能。

  cd nativeApp[project-name]
  tns preview

3-3. QRコードが作成されたら、NativeScript Playground appでQRコードをスキャンします。
同期が取れると使用しているスマホデバイスの情報が表示され、以下のようなテキストが出ます。

  Project successfully prepared (ios)

3-4. 画面の確認

初期画面は何もない真っ白な画面がスマホに表示されます。

※ プロジェクトの変更を検知して画面も更新されるので、その様子を確認したい人はhttps://docs.nativescript.org/angular/start/cli-basics の中にサンプルがあるので試してみてください。

NativeScript-Vueでプロジェクトを作ります。

@vue/cli @vue/cli-init のインストール

yarn global add @vue/cli @vue/cli-init

2. プロジェクトの作成。

プロジェクトを作成したいディレクトリまで移動して以下のscriptを実行。
サンプルではプロジェクト名を'native-vue-app'として作成しています。

vue init nativescript-vue/vue-cli-template native-vue-app

※ 'vue-devtools'を使用すると以下のようなエラーが出たため、予めインストールしないようにするか、インストールした場合にはコメントアウトしてください。(コメントアウト箇所は下記参照してください。)
原因はわかり次第別途追記します。

***** Fatal JavaScript exception - application has been terminated. *****

//

Terminating app due to uncaught exception 'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating 'socket.on')

既にインストールしていて、同様のエラーが出た場合には、app¥main.jsの以下の部分をコメントアウト。

// import VueDevtools from 'nativescript-vue-devtools'


if(TNS_ENV !== 'production') {
  // Vue.use(VueDevtools)
}

3. プレビュー画面の確認。

cd native-vue-app
tns preview

上部のBarに'Welcome to NativeScript-Vue!'が表示されます。

Epilogue

Document通りに設定していけば特に難しい部分はありませんでしたが、'nativescript-vue-devtools'のエラーではまってしまいました。
今回は自力で設定してプレビューが見れるところまでを確認したかったため、コメントアウトで対応しましたが、今後もし機会があれば調べてみたいと思います。

課題

ブラウザdebugの方法、ブラウザで画面確認をする方法
CSSの読み込みがtns previewを再度実行しないと確認できない理由について
VS Code Extensionに'NativeScript'があるため、debug等何ができるのか調べてみたい