はじめに
「クロスプラットフォームでアプリを作りたいけれど、WebViewのもっさりした挙動は避けたい」――モバイル開発でそんなジレンマを抱えたことはないでしょうか。HTMLとCSSでUIを組み立てるハイブリッドアプリは手軽な反面、スクロールのカクつきやアニメーションの遅延といったパフォーマンス面の妥協がつきものです。
NativeScriptは、この悩みに正面から向き合うフレームワークです。JavaScript/TypeScriptのコードから直接iOS・AndroidのネイティブUIコンポーネントを生成するため、WebViewを一切経由せずにネイティブアプリ同等の操作感を実現できます。
NativeScriptとは
NativeScriptは、TypeScriptやJavaScriptを使ってiOS・Android向けのネイティブアプリを開発できるオープンソースフレームワークです。React、Vue、Angular、Svelte、Solidなど、普段使い慣れたUIフレームワークをそのまま採用できるのが大きな魅力で、既存のWeb開発スキルをモバイル開発に直結させられます。
主な特徴
- 真のネイティブUI -
<Button>や<Label>といったXMLベースのUIコンポーネントが、実行時にはiOSのUIKitやAndroidのViewへそのまま変換されます。WebViewを介さないため、ネイティブアプリと遜色ないパフォーマンスが得られます。 - 好きなフレームワークを選べる - Angular、Vue、React、Svelte、Solidの中から自分のチームに合ったものを選択でき、学習コストを最小限に抑えられます。
- ネイティブAPIへの直接アクセス -
android.*やios/UIKitのAPIをJavaScriptから直接呼び出せるため、プラグインがなくてもネイティブ機能を柔軟に利用できます。
インストール
Node.jsがインストールされている環境で、CLIをグローバルにインストールします。
npm install -g nativescript
インストールが完了したら、バージョンを確認しておきましょう。
ns --version
基本的な使い方
まずは新規プロジェクトを作成します。ここではVueを使う例を紹介します。
ns create my-app --template @nativescript/template-blank-vue
cd my-app
プロジェクトが作成できたら、実機またはエミュレータで実行します。
ns run android
# もしくは
ns run ios
UIはXMLベースのマークアップで記述します。以下はシンプルなカウンターアプリの例です。
<!-- app/components/Counter.vue -->
<template>
<Page>
<ActionBar title="Counter" />
<StackLayout class="p-20">
<Label :text="`カウント: ${count}`" class="h1 text-center" />
<Button text="カウントアップ" @tap="increment" class="btn btn-primary" />
</StackLayout>
</Page>
</template>
<script lang="ts">
import { defineComponent } from 'nativescript-vue';
export default defineComponent({
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
});
</script>
<Label>や<Button>はコンパイル時にネイティブのTextView・Buttonへと変換されるため、レイアウトの描画やタップ操作はすべてネイティブ側で処理されます。
実践的なユースケース
例えば、端末のカメラやファイルシステムといったネイティブ機能にアクセスしたい場合は、公式プラグインを利用することでシンプルに実装できます。
npm install @nativescript/camera
import { requestPermissions, takePicture } from '@nativescript/camera';
import { ImageSource } from '@nativescript/core';
async function capturePhoto(): Promise<ImageSource | null> {
const hasPermission = await requestPermissions();
if (!hasPermission) {
return null;
}
const image = await takePicture({
width: 640,
height: 480,
keepAspectRatio: true,
saveToGallery: false,
});
return image;
}
プラグインが用意されていない機能でも、ネイティブAPIを直接呼び出せば対応可能です。例えばAndroidのToastを直接表示することもできます。
import { isAndroid, Utils } from '@nativescript/core';
function showNativeToast(message: string): void {
if (isAndroid) {
const context = Utils.android.getApplicationContext();
const Toast = android.widget.Toast;
Toast.makeText(context, message, Toast.LENGTH_SHORT).show();
}
}
このように、フレームワークが用意していない機能もネイティブAPIへの橋渡しによって柔軟に実装できるのは、NativeScriptならではの強みです。
まとめ
NativeScriptは、使い慣れたWeb技術のスキルセットを活かしながら、WebViewを経由しない真のネイティブUIを実現できるフレームワークです。React・Vue・Angular・Svelte・Solidと選択肢が豊富なため、既存プロジェクトの技術スタックに合わせて導入しやすいのも魅力です。
パフォーマンスとネイティブ機能へのアクセスを両立したいクロスプラットフォーム開発を検討しているなら、公式ドキュメント（docs.nativescript.org）を参考にしながら、ぜひ一度触れてみてください。