ちょっとした勉強会でNativeScriptについて調査をしたので、調査結果をほとんどそのまま記事として公開しておく。本ブログで取り上げているReact Nativeとの違いについても言及している。

Native Scriptの概要とReact Nativeとの比較

Native Scriptの概要

• Javascriptコードでネイティブアプリを生成するプラットフォーム
• 素のJavascriptだったり、TypeScript、フレームワークのAngular、Vueなど、Javascriptにまつわる様々な技術で開発可能(開発言語・技術の選択肢がいくつかある)
• 公式以外の拡張機能はすべてNative Scriptへのプラグインとして提供される(※AngularやVueの開発環境もプラグイン)

React NativeとNative Scriptの比較

• さまざまなJavascript関連技術にて開発可能という幅広さがある
• Expoのような仕組みだったり、コードのビルド方法であったり、開発時のワークフローがReact Nativeとよく似ている
• NativeScriptのほうがiOS, AndroidともにReact Nativeよりもサポート対象OSは若干狭まるが、気にならない程度

NativeScriptの開発環境

特徴

• React NativeでいうExpoのような機構がある。コードの内容が反映されたQRコードを出力することで、そのコードを専用アプリ(Android, iOS両方あり)で読み込み、ビルドなしにインスタントに動作確認可能
• 開発環境の設定は少し面倒そう→ https://docs.nativescript.org/start/quick-setup
• しかし、開発環境の設定をフォローするNativeScript Sidekickというツールが提供されている
• ちょっとした開発であればWebの専用エディタが用意されており、そこで開発が可能。また、Webの専用エディタからはソースコードもダウンロード可能となっている。専用エディタからソースコード内容を反映したQRコードを生成できる(専用アプリで動作確認可能)

開発する言語・フレームワーク

下記技術にて開発可能。

• JavaScript
• TypeScript
• Angular
• Vue

対応OSバージョン

Android 17, iOS 9 (NativeScript v4.0.0)

https://docs.nativescript.org/start/general-requirements

(参考) React Nativeの対応OSバージョン

Android 16, iOS 8 (React Native v0.55)

https://github.com/facebook/react-native

JavaScript(NativeScript Coreでの開発)

NativeScript Coreというのは、Native Scriptが提供するAPI。

• UIレイアウトはXMLで記述する
• UIレイアウトへのスタイリングはCSSで行う
• 標準的なルーター機構はある

Vueでの開発

• JavaScript(NativeScript Core)とレイアウトとスタイリング手法は基本は変わらず
• Vueのテンプレート構文など、VueのAPIが提供する機能が使えるようになっている
• Vue(Native Script向け)が使えるので、WebのVueでコンポーネントを作るように、NativeScript向けのVueコンポーネントを生成して開発する
• ルーターにvue-routerを使う

その他

• プラグインのマーケットプレイスがある
• CTOに向けたNative Script導入ガイドラインがある
• ハードウェアAPIはカメラと位置情報を提供
• データベースやローカルストレージはなく、別途プラグインを導入する必要がある

所見

自分自身の慣れたJavascript技術を使ってネイティブアプリを作るという点が、Native Scriptの最大の強みという認識。開発スタイルがReact Nativeと非常に良く似ていそう(ソースコードのビルド方法、Expoのようなインスタントにアプリをビルドなしに動作確認する方法がある、など)。

次点の強みでいうと、WebにNative Script向けの専用エディタが公開されており、開発から動作確認が特に環境構築をせずともインスタントにできることだ。Webの専用エディタで書いた内容のQRを発行し、専用アプリでスキャンし、動作確認というかなりインスタントな開発も可能であるということだ。この状態で開発する場合の環境構築でいうと、強いて言うなら専用アプリのインストールくらいしかない。React Nativeでは、Webのエディタが提供されているわけでもなく、QRコードの発行もCLIにて行うので、Native Scriptではこのあたりの仕組みがWebの開発環境により綺麗に吸収されている点が素晴らしい。

気になる点は、Native Scriptのマーケットプレイスにあるプラグインの品質だ。どれだけメンテナンスされ、公式がサポートしていないハードウェア機能がラッピングされているかだが、これについては未調査である。React Nativeの開発においても、公式外のモジュールに頼ることも多いので、周辺環境の活性化具合でどちらを選ぶというのはありえるかもしれない。

mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。

Previous Story

sequelize-cliで「ERROR: null value in column "createdAt" violates not-null constraint」が出たときの対処

Next Story

Vueの製品レベルの環境構築を時短でおこなうチュートリアル