NativeScript-アーキテクチャ

NativeScriptは、モバイルアプリケーションを作成するための高度なフレームワークです。モバイルアプリケーションの作成の複雑さを隠し、高度に最適化された高度なモバイルアプリケーションを作成するためのかなり単純なAPIを公開します。 NativeScriptを使用すると、エントリーレベルの開発者でも、AndroidとiOSの両方でモバイルアプリケーションを簡単に作成できます。

この章では、NativeScriptフレームワークのアーキテクチャについて説明します。

前書き

NativeScriptフレームワークのコアコンセプトは、開発者がハイブリッドスタイルのモバイルアプリケーションを作成できるようにすることです。ハイブリッドアプリケーションは、プラットフォーム固有のブラウザーAPIを使用して通常のモバイルアプリケーション内でWebアプリケーションをホストし、JavaScript APIを介してアプリケーションへのシステムアクセスを提供します。

NativeScriptは* JavaScript言語*に多額の投資をして、開発者に効率的なフレームワークを提供します。 JavaScript はクライアント側プログラミング（Web開発）の事実上の標準であり、すべての開発者はJavaScript言語をよく知っているため、開発者はNativeScriptフレームワークに簡単にアクセスできます。低レベルでは、NativeScriptは*ネイティブプラグイン*と呼ばれるJavaScriptプラグインのコレクションを通じてネイティブAPIを公開します。

NativeScriptは、_ネイティブプラグイン_をベースに構築されており、高レベルで使いやすい_JavaScriptモジュール_を多数提供しています。各モジュールは、カメラへのアクセス、画面の設計などの特定の機能を実行します。これらすべてのモジュールを複数の方法で組み合わせて、複雑なモバイルアプリケーションを構築できます。

以下の図は、NativeScriptフレームワークの概要を示しています-

フレームワーク

NativeScriptアプリケーション*-NativeScriptフレームワークにより、開発者はAngularスタイルアプリケーションまたはVueスタイルアプリケーションを使用できます。
JavaScriptモジュール*-NativeScriptフレームワークは、UIモジュール、アプリケーションモジュール、コアモジュールなどとして明確に分類されたJavaScriptモジュールの豊富なセットを提供します。アプリケーションはいつでもすべてのモジュールにアクセスして、あらゆるレベルの複雑なアプリケーションを作成できます。
JavaScriptプラグイン*-NativeScriptフレームワークは、プラットフォーム関連の機能にアクセスするためのJavaScriptプラグインの大規模なコレクションを提供します。モジュールはJavaScriptプラグインを使用して、プラットフォーム固有の機能を提供します。

ネイティブプラグイン −ネイティブプラグインは、JavaScriptプラグインでさらに使用されるシステム機能をラッパーするプラットフォーム固有の言語で記述されています。

プラットフォームAPI *-プラットフォームベンダーによって提供されるAPI。

つまり、NativeScriptアプリケーションは、モジュールを使用して作成および編成されます。モジュールは純粋なJavaScriptで記述され、モジュールはプラグインを介して（必要な場合はいつでも）プラットフォーム関連の機能にアクセスし、最後にプラグインはプラットフォームAPIとJavaScript APIを橋渡しします。

NativeScriptアプリケーションのワークフロー

前に学習したように、NativeScriptアプリケーションはモジュールで構成されています。すべてのモジュールが特定の機能を有効にします。 NativeScriptアプリケーションをブートストラップするモジュールの2つの重要なカテゴリは次のとおりです-

ルートモジュール
ページモジュール

ルートモジュールとページモジュールは、アプリケーションモジュールとして分類できます。アプリケーションモジュールは、NativeScriptアプリケーションのエントリポイントです。これはページをブートストラップし、開発者がページのユーザーインターフェイスを作成できるようにし、最後にページのビジネスロジックの実行を許可します。アプリケーションモジュールは、以下の3つのアイテムで構成されています-

XMLでコード化されたユーザーインターフェイス設計（例： page.xml/page.componentl）
CSSでコード化されたスタイル（例： page.css/page.component.css）
JavaScriptでのモジュールの実際のビジネスロジック（例： page.js/page.component.ts）

NativeScriptは、アプリケーションページを設計するための多くのUIコンポーネント（UIモジュールの下）を提供します。 Angularベースのアプリケーションでは、UIコンポーネントをXML形式またはHTML形式で表すことができます。アプリケーションモジュールは、UIコンポーネントを使用してページをデザインし、デザインを個別のXML _page.xml/page.componentl_に保存します。標準のCSSを使用してデザインのスタイルを設定できます。

アプリケーションモジュールは、デザインのスタイルを個別のCSS _page.css/page.component.css._に保存します。ページの機能は、デザインおよびプラットフォーム機能へのフルアクセス権を持つJavaScript/TypeScriptを使用して実行できます。アプリケーションモジュールは、個別のファイルpage.js/page.component.tsを使用して、ページの実際の機能をコーディングします。

ルートモジュール

NativeScriptは、UIコンテナーを介してユーザーインターフェイスとユーザー操作を管理します。すべてのUIコンテナには_Root Module_が必要であり、それを介してUIコンテナがUIを管理します。 NativeScriptアプリケーションには2種類のUIコンテナがあります-

アプリケーションコンテナー-すべてのNativeScriptアプリケーションには1つのアプリケーションコンテナーが必要であり、application.run（）メソッドを使用して設定されます。アプリケーションのUIを初期化します。

モデルビューコンテナー-NativeScriptは、モデルビューコンテナーを使用してモーダルダイアログを管理します。 NativeScriptアプリケーションは、任意の数のモデルビューコンテナーを持つことができます。

すべてのルートモジュールは、そのコンテンツとして1つのUIコンポーネントのみを持つ必要があります。 UIコンポーネントは、その子として他のUIコンポーネントを持つことができます。 NativeScriptは、TabView、ScrollViewなどの多くのUIコンポーネントに子機能を提供します。これらをルートUIコンポーネントとして使用できます。 1つの例外は_Frame_です。これには子オプションはありませんが、ルートコンポーネントとして使用できます。フレームは、ページモジュールをロードするオプションと、他の_ページモジュール_に移動するオプションも提供します。

ページモジュール

NativeScriptでは、すべてのページが基本的に_Page Module_です。ページモジュールは、NativeScriptによって提供される豊富なUIコンポーネントのセットを使用して設計されています。ページモジュールは、_Frame_コンポーネント（defaultPage属性を使用するか、navigate（）メソッドを使用）を介してアプリケーションにロードされます。これは、_Root Modules_を使用してロードされ、アプリケーションの起動時にapplication.run（）を使用してロードされます。

アプリケーションのワークフローは、以下の図のように表すことができます-

アプリケーション

上記の図は、次の手順で詳細に説明されています-

NativeScriptアプリケーションが起動し、application.run（）メソッドを呼び出します。
application.run（）は_Rootモジュール_をロードします。
_ルートモジュール_は、以下に指定されているUIコンポーネントのいずれかを使用して設計されています-
フレーム
TabView
SideDrawer
レイアウトビュー
フレームコンポーネントは、指定されたページ（ページモジュール）を読み込み、レンダリングされます。他のUIコンポーネントは、_Root Module_で指定されたとおりにレンダリングされます。他のUIコンポーネントにも、_Page Modules_をメインコンテンツとしてロードするオプションがあります。

AngularベースのNativeScriptアプリケーションのワークフロー

前に学習したように、NativeScriptフレームワークは、さまざまなカテゴリの開発者に対応するための複数の方法を提供します。 NativeScriptでサポートされている方法論は次のとおりです-

NativeScript Core -NativeScript Frameworkの基本またはコアコンセプト
*角度＆plus; NativeScript *-角度ベースの方法論
Vuejs＆plus; NativeScript -Vue.jsベースの方法論

AngularフレームワークがNativeScriptフレームワークにどのように組み込まれているかを見てみましょう。

ステップ1

NativeScriptは、Angularアプリケーションをブートストラップするオブジェクト（platformNativeScriptDynamic）を提供します。 platformNativeScriptDynamicには、アプリケーションの起動に使用されるbootstrapModuleメソッドがあります。

Angularフレームワークを使用してアプリケーションをブートストラップする構文は次のとおりです-

import { platformNativeScriptDynamic } from "nativescript-angular/platform";
import { AppModule } from "./app/app.module";
platformNativeScriptDynamic().bootstrapModule(AppModule);

ここに、

*_AppModule_* はルートモジュールです。

ステップ2

アプリモジュールの簡単な実装（指定されたコードの下）。

import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
@NgModule(
   {
      bootstrap: [
         AppComponent
      ], imports: [
         NativeScriptModule,
         AppRoutingModule
      ], declarations: [
         AppComponent
      ]
   }
) export class AppModule { }

ここに、

*_AppModule_* は、AppComponentコンポーネントをロードしてアプリケーションを起動します。 Angularコンポーネントはページに似ており、デザインロジックとプログラミングロジックの両方に使用されます。

AppComponent（app.component.ts）とそのプレゼンテーションロジック（app.component.css）の簡単な実装は次のとおりです-

*app.component.ts*

import { Component } from "@angular/core";
@Component(
   {
      selector: "ns-app",
      templateUrl: "app.componentl"
   }
)
export class AppComponent { }

ここに、

_templateUrl_は、コンポーネントのデザインを参照します。

*app.componentl*

<page-router-outlet></page-router-outlet>

ここに、

*_page-router-outlet_* は、Angularアプリケーションが接続される場所です。

要約すると、AngularフレームワークはNativeScriptフレームワークに似たモジュールで構成されていますが、若干の違いがあります。 Angularの各モジュールには、Angularコンポーネントとルーター設定ファイル（page-routing.mocdule.ts）があります。ルーターはモジュールごとに設定され、ナビゲーションを処理します。 Angularコンポーネントは、NativeSctiptコアのページに類似しています。

各コンポーネントには、UIデザイン（page.componentl）、スタイルシート（page.component.css）、およびJavaScript/TypeScriptコードファイル（page.component.ts）があります。

Nativescript-architecture

目次

NativeScript-アーキテクチャ

前書き

NativeScriptアプリケーションのワークフロー

ルートモジュール

ページモジュール

AngularベースのNativeScriptアプリケーションのワークフロー

ステップ1

ステップ2