コアコンセプト / プロジェクト構造

プロジェクト構造

空のNativeScriptプロジェクトのデフォルト構造は、appplatformsnode_modulesディレクトリを 含むルートフォルダー、およびpackage.jsonファイルで構成されます。

myApplication/ └── app ├── App_Resources └── ... ├── node_modules ├── platforms └── package.json

初期テンプレート、プログラミング言語(JavaScriptまたはTypeScript)、またはアプリケーションで使用しているプラグインに基づいて、プロジェクトに存在できる他のディレクトリと構成ファイルがいくつかあります。 この記事では、NativeScriptプロジェクトに常に存在するファイルとフォルダー、およびアプリの開発中に遭遇する可能性のあるより一般的なものについて説明します。

app/ ディレクトリ

プロジェクトのルートにあるappディレクトリはプロジェクトの開発スペースです。 すべての共通およびプラットフォーム固有のコードをこのディレクトリに配置します。 アプリのビルドの準備が整うと、NativeScriptツールは関連するコンテンツを各ターゲットプラットフォームのプラットフォーム固有のフォルダーにコピーします。

appディレクトリでは、プラットフォーム固有のファイルを使用して、ターゲットプラットフォームごとにカスタマイズされた機能とデザインを提供できます。 ファイルがプラットフォーム固有であることを示すには、ファイル名がname.ios.extensionまたはname.android.extensionの形式であることを確認してください。 例:main.ios.jsmain.android.js

共有機能を開発したり、共通ファイルで設計することもできます。ファイルが一般的であることを示すには、ファイル名に.android.iosが含まれていないことを確認してください。

appフォルダーには、App_Resourcesディレクトリーもあります。

注釈: nsconfig.jsonファイルappディレクトリの場所を上書きできます。

app/package.json

これはセカンダリのpackage.jsonファイルです。 このファイルでは、アプリのエントリポイントファイルを指定し、NativeScriptランタイムの動作を構成できます。 以下は、基本的なセカンダリpackage.jsonファイルの例です。

{
	"main": "app.js",
	"discardUncaughtJsExceptions": true,
	"android": {
		"v8Flags": "--expose_gc",
		"forceLog": true
	},
	"ios": {
		"jscFlags": "--dumpOptions=2 --validateOptions=1"
	}
}

ネイティブから呼び出されたJavaScript例外を破棄する

通常、ネイティブAPIから呼び出されたJavaScriptコードからの未処理の例外は、スタックトレースを表示してアプリケーションをクラッシュさせます。 このようなクラッシュを防ぎたい場合は、discardUncaughtJsExceptionsフラグを使用してこの動作をオーバーライドできます。

破棄された例外はすべて、application.discardedErrorEventを起こします。 global.__onDiscardedErrorに1つの引数を持つ関数を割り当てることで、 受信したDiscardedErrorEventDataインスタンスを使用するか、 NativeScriptErrorインスタンスとして例外を受け取る ことにより、アプリで処理できます。 通常、例外をログに記録したり、分析処理へ報告したりします。

例:

var application = require("application");

application.on(application.discardedErrorEvent, function (args) {
	const error = args.error;

	console.log("Received discarded exception: ");
	console.log(error.message);
	console.log(error.stackTrace);
	console.log(error.nativeException);
	//report the exception in your analytics solution here
});

Androidランタイム構成

Androidランタイムに固有のフラグの説明については、Androidカスタムフラグの記事を参照してください。

iOSランタイム構成

iOSランタイムに固有のフラグの説明については、iOSカスタムフラグの記事を参照してください。

app/App_Resources

このApp_Resourcesフォルダーには、アプリケーションのプラットフォーム固有のリソース(アイコン、構成ファイルなど)が含まれています。 NativeScriptツールによって使用される構成ファイルは、Android用はApp_Resources/Android/src/main/AndroidManifest.xml、iOS用はApp_Resources/iOS/Info.plistです。

また、App_Resources/iOS/build.xcconfigまたはApp_Resources/Android/app.gradleを変更して、 iOSプラットフォームとAndroidプラットフォームのビルドプロパティを追加または削除できます。

プラットフォームのディレクトリ

ビルドを開始したり、プロジェクトにターゲットプラットフォームを追加したとき、platformsディレクトリが作成されます。 NativeScriptツールは、それぞれのプラットフォーム名で新しいサブディレクトリを作成します。 これらのサブディレクトリには、プラットフォームのネイティブSDKを使用したネイティブ開発に必要なプラットフォーム固有のプロジェクト構造があります。 プロジェクトのビルドの準備が整うと、NativeScriptツールは、関連するコンテンツをappディレクトリから各ターゲットプラットフォームのプラットフォーム固有のサブディレクトリにコピーします。

重要: platformsのサブディレクトリにあるファイルは、prepare <Platform>プロセス中にNativeScript CLIによってappディレクトリのコンテンツで上書きされるため、編集しないでください。

package.jsonファイル

プロジェクトのルートディレクトリにあるメインのpackage.jsonには、アプリケーション、その依存関係、その他の役立つ情報に関する詳細が含まれています。 作成者(author)、説明(description)、バージョン(version)などの一般的なnpm package.jsonプロパティを設定するか、 依存関係(dependencies)とdevDependencies属性を変更して、アプリが依存するnpmパッケージとNativeScriptプラグインを指定できます。

ルートのpackage.jsonには、nativescriptオブジェクト内に配置されるいくつかのNativeScript固有のプロパティも含まれます。

基本的なメインpackage.jsonファイルの例を次に示します。

{
	"nativescript": {
		"id": "org.nativescript.myApplication",
		"tns-android": {
			"version": "5.0.0"
		},
		"tns-ios": {
			"version": "5.0.0"
		}
	},
	"description": "My NativeScript Application",
	"license": "MIT",
	"repository": "https://github.com/myApplication",
	"dependencies": {
		"nativescript-theme-core": "~1.0.4",
		"tns-core-modules": "~5.0.0"
	},
	"devDependencies": {
		"nativescript-dev-typescript": "~0.7.0",
		"typescript": "~2.7.2"
	},
	"readme": "My NativeScript Application"
}

hooksディレクトリ

hooksフォルダーは、プロジェクトが適切に機能するためにフックを必要とするプラグインに依存している場合にのみ存在します。 フックは、拡張可能なNativeScript CLIコマンドの動作を変更または拡張するために使用される実行可能なコードまたはNode.jsスクリプトです。 フックとNativeScriptでフックを使用する方法の詳細については、CLIの拡張を参照してください。

フックを持つ、より一般的なプラグインのいくつかはnativescript-dev-webpacknativescript-dev-typescriptおよびnativescript-dev-sassです。

tsconfig.jsonファイル

tsconfig.jsonファイルは、TypeScriptを使用するプロジェクトにのみ存在します。 このファイルは、TypeScriptをJavaScriptに変換する際のガイドとして機能します。 さまざまなコンパイラオプションを構成することで、変換プロセスを微調整できます。 tsconfig.jsonの詳細については、TypeScriptの公式ドキュメントを参照してください。

nsconfig.jsonファイル

nsconfig.jsonは、メインのpackage.jsonファイルと同じレベルのルートプロジェクトディレクトリにあるオプションの構成ファイルです。 このファイルにより、ユーザーはアプリケーションの構造を変更し、HMR開発者機能を有効/無効にすることができます。 使用可能な構成は、appPathappResourcesPathuseLegacyWorkflowです。

すべてが期待どおりに機能するためには、パス(appPathおよびappResourcesPath)は プロジェクトルート(package.jsonファイルとplatformsディレクトリが配置されている場所)に対して相対的である必要があります。 appPathを省略すると、CLIはアプリケーションファイルがプロジェクトフォルダー内の app というフォルダー内にあると想定します。 appResourcesPathが省略された場合、CLIはそれらがデフォルトの場所(アプリファイルの残りを含むフォルダー内の App_Resources と呼ばれるフォルダー)にあると想定します。

重要: プロジェクトでnsconfig.jsonファイルを使用するには、次の要件を満たしていることを確認する必要があります。
  • NativeScript CLI >= 4.0.0
  • useLegacyWorkflowオプションには、NativeScript CLI >= 5.3.0が必要
  • Androidランタイム >= 4.0.0
  • nativescript-dev-sass >= 1.3.6(アプリケーションで使用する場合)
  • nativescript-dev-webpack >= 0.10.1(アプリケーションで使用する場合)

nsconfig.jsonパスの例

プロジェクトが /d/work/myApplication にあると仮定しましょう。

nsconfig.jsonによるHMR有効化の例

useLegacyWorkflowfalseに設定すると、デフォルトでHMRが有効になります(HMRを使用するために追加のフラグを渡す必要はありません)。 省略した場合のデフォルト値はtrueです(拡張HMRを使用しない標準のライブ同期機能)。

{
	"useLegacyWorkflow": false
}
入門

コアコンセプト

ユーザーインターフェース

ツール

ハードウェアアクセス

プラグインの開発

リリース

アプリテンプレート

パフォーマンスの最適化

フレームワークモジュール

ガイド

サポートを受ける

トラブルシューティング

Siedkick