NativeScript(Angular): Web/Android/iOS

はじめに

この記事は、Angularを触った事がある方を対象にしています。

NativeScriptとは

NativeScriptはWebとMobileアプリ（AndroidとiOS）をJavaScriptとCSSで実装出来るフレームワークです。
NativeScriptで作成されたアプリはFull-Nativeなモバイルアプリになります。

NativeScriptの何が嬉しいか

• 簡単導入

  • Angular Schematics と ng add を使う事によって簡単に導入できます。
  • 同じリポジトリ内でWebとMobileを構築していくことが出来るため、コードの共有化が可能になります。

• 完全ネイティブ

  • NativeScriptで開発されたアプリは完全にネイティブです。これは、ネイティブUIやネイティブAPIへのアクセス、およびデバイス上のネイティブレンダリングを意味しています。

• コード共有

  • KotlinとSwiftでの開発に比べるとロジックや通信部分を共有して、テンプレート部分のみ個別に作成していけるので無駄が無く、素早い実装が可能です。
  • １つのコードで、Web/Android/iOSを管理でき、より楽に、安心してコード管理をしていくことが可能なります。

開発環境構築

• XcodeとAndroid studioなどのダウンロード/インストール

  • こちらを参考にインストール

• NativeScript CLIのインストール

  • npm i -g nativescript

• Angular CLIのインストール

  • npm i -g @angular/cli

• NativeScript Schematicsのインストール

  • npm i -g @nativescript/schematics

プロジェクト生成

• Angular Schematicsを使用してプロジェクトを生成

  • ng new --collection=@nativescript/schematics project-name --shared --style=scss

Webローカルホスト起動

• npm run start

iOSエミュレーション

• npm run ios

Androidエミュレーション

• npm run android

感想

簡単なHelloWordアプリ（コードはこちらから）を実装してみましたが、今後実務でも扱っていけたら、改めて記事を書こうかと思います。
Angularを使った事がある人なら、直ぐに開発を始められて、Web、Android、iOS間でコード共有出来るのでコード管理が楽になると思います。