「NativeScript & Angular」ことはじめ

この記事はメモとして残して置いた限定公開記事を全体公開にしたものです。記事の内容は古い可能性があります。

対象と思われる方

• NativeScript やってみたいけど…な方
• コンソールで npm install ぐらいは叩いたことある方
• なんらかのシステム開発経験がある方
• アプリ開発経験者経験優遇

NativeScript とは何なのか？

https://docs.nativescript.org/

NativeScript は、クロスプラットフォームのモバイルアプリを構築できるフレームワークです。NativeScript を使用することで JavaScript で実装されたアプリを、iOS、Android それぞれのネイティブソースに変換し、ネイティブアプリとしてビルドできます。同系のフレームワークとしては ReactNative があります。

NativeScript でのアプリ実装方法はいくつかあります。Google を中心としたコミュニティで開発されている Angular を使用する「NativeScript & Angular」。Angular から派生した Vue.js を使用して実装する「NativeScript & Vue.JS」。それらのフレームワークを使用せずに実装できる「NativeScript Core」があります。また、GUIインターフェイスで開発を支援する「NativeScript Sidekick」なども提供されています。

NativeScript は、必ずしも Angular を必要としませんが、公式が Angular 最新版との統合を謳い、且つ Angular 推しに見えます。個人的には Vue.js にも興味が惹かれましたが、今回は、「NativeScript & Angular」の使用を前提に進めていきます。

なぜ NativeScript を選ぶのか？

私はウェブ開発が中心のエンジニアですが、モバイルアプリの開発プラットフォームとして何を選択するかは、とても悩ましい問題です。

候補は代表的なものだけでも数多くあります。

• Native 開発

  • Android: Kotlin、Java
  • iOS: Swift、Objective-C

• Hybrid 開発

  • ReactNative
  • NativeScript
  • Flutter
  • Xamarin

• HTML5 開発

  • Ionic

私の選定基準は以下の2つがメインでした。

• 学習コストが高すぎないこと
• できれば Android も iOS も同時に開発したい

私は PHP や Ruby、JavaScript をメインとしてきたフロント寄りのエンジニアです。そのため、完全 Native 開発には、学習コストという意味で二の足を踏みました。最初は Ionic が今の技術を一番活かせるだろうと考えましたが、Ionic はあくまでネイティブっぽい表現を HTML5 で再現しているに過ぎないとのこと。今後、PWA（Progressive Web Apps）の仕組みがもっと洗練されてくれば、おもしろい存在になりそうですが、現時点での選択肢としては除外しました。最後に残ったのが Hybrid 開発です。Flutter、Xamarin は、ドキュメントを読めば読むほどおもしろい存在でしたが、Dart、.NET の学習コストを考え、除外しました。ReactNative、NativeScript が残ったわけですが、最初は ReactNative 推しでした。ただ、いまだに 0.60 というベータ状態であること。ドキュメントは大量に見つかるものの、バージョン違いで動かないものが多いこと。使おうとしたライブラリのメンテが止まっていた。。などを経て、NativeScript に心が動きました。まだ、アプリリリースという目標からすれば、志半ばというところですが、入門周りの内容を整理しておきます。

「NativeScript & Angular」をさわってみる

さっそく「NativeScript & Angular」をさわっていきます。

https://www.nativescript.org/nativescript-is-how-you-build-native-mobile-apps-with-angular

「NativeScript & Angular」で開発することの利点、特徴などが説明されています。ある程度理解できたら「Get Started」。

Step #1: NativeScript Playground

これ系の資料は、環境構築から始まることが多いですが、NativeScript には「NativeScript Playground」と呼ばれる、ウェブベースの開発環境があります。また、そこで開発したものを、同名アプリ「NativeScript Playground」と「NativeScript Preview」というアプリを使って、実機確認することもできます。お手軽なので一度試してみます。

https://play.nativescript.org/?template=play-ng&tutorial=getting-started-ng

※ このチュートリアルは NativeScript や Angular 云々というよりは「Playground」の使い方といったイメージです。

Step #2: Install the NativeScript Command-Line Interface

次にローカルでビルドできる環境を作ります。私の環境は以下です。

• WSL on Windows 10
• Ubuntu 18.04.2 LTS
• node v10.16.0

上記の通り、Windows 10 + WSLのUbuntu環境なので、以下を参考にしました。

• NativeScript Advanced Setup: Linux
  
  https://docs.nativescript.org/start/ns-setup-linux

• Windows、Mac の方は以下を参考にどうぞ
  
  https://docs.nativescript.org/start/quick-setup#full-setup

※ と、簡単に書きましたが、個人的には環境構築で結構ハマりました。Playground でデバッグしているうちは問題ありませんが、以下で説明するエミュレータ―との連携がなかなかうまくいきませんでした。後日、整理できれば追記します。

Step #3: Learn the NativeScript Command-Line Interface Basics

コマンドラインツールの基本的な使い方です。

tns create sample-app --template tns-template-blank-ng
cd sample-app
tns preview

これを実行するとQRコードが表示されます。このコードをインストールした Playground アプリで読むと表示確認ができます。また、コードを変更するとリアルタイムで表示が更新されます。

Playground で動作確認を行う方法は手軽ですが、制限もあるとのことです（制限がなにかは現時点ではよくわかりませんでしたが）。そのため、ローカルにビルドして、エミュレーターや実機にプッシュして表示確認することも必要になってきます。

エミュレーターや実機がつながっている状態で以下を実行します。

tns run android
tns run ios // Mac x Xcode必須

デバイスにつながらない場合は以下で確認してみてください

tns devices

対象デバイス、エミュレーターが見つからない場合は繋がっていません。

また、こちらもホットロードで、修正をリアルタイムで確認できます。HMR（Hot Module Replacement）と呼ばれています。NativeScript5.3以降では、デフォルトで有効になっています。有効になってない場合は

tns run android --hmr

で、有効にできます。

Build a Full App tutorials

ここまで終われば1通りの開発環境ができていると思います。

この後の学習方法は人それぞれかと思いますが、「NativeScript & Angular」での開発手順を体験できるチュートリアルがあるので紹介しておきます。これが終われば、開発の流れがある程度イメージできると思います。

Debugging Applications

デバッグは Visual Studio Code の拡張機能か、Chrome の DevTools でのデバッグがメインです。私の場合は、Windows 側にインストールした Visual Studio Code と、WSL側にインストールした NativeScript Cli がうまく通信できていないのか、拡張機能からはデバッグできませんでした。Chrome DevTools のみ使用しています。

https://docs.nativescript.org/tooling/debugging/debugging

Choosing An Editor

エディターに関しては、とくに決まりはありません。ただし、NativeScript チームは、Visual Studio Code をおススメしています。理由は以下のようなことです。

• TypeScript のサポートがすばらしい！
• デバッグツールの拡張機能を公式にサポート！
• Windows、macOS、Linux で使用できる！
• Microsoft がメンテしてるのでこれからも安心（だと思うよ）！

ことはじめ以降

Playground で実行できるサンプルが以下に転がっています。
https://market.nativescript.org/?tab=samples&framework=angular&category=all_samples

本の紹介や、チュートリアル動画などが以下に転がってます。
https://www.nativescript.org/books-and-videos

あとは、サンプルや、既存アプリの写経などで慣れていくしかないかと。適当な締めになりましたが、皆様の参考になれば。