始めに / CLIの基本

コマンドラインインターフェイスの基本

この記事では、新しいアプリを作成する方法、それらのアプリをデバイスで実行する方法、高速な反復を可能にする開発ワークフローを設定する方法など、NativeScriptコマンドラインインターフェイスの基本を学びます。

アプリケーションを作成する

NativeScriptでは、NativeScript CLIを使用してアプリを作成および実行します。 インストール後、NativeScript CLIはターミナルまたはコマンドプロンプトでtnsコマンドとして使用できます。 これはTelerik NativeScriptの略です。

このセクションでは、NativeScript CLIについて理解し、CLIのcreateコマンドを使用して最初のNativeScriptアプリを起動します。

演習：tns createコマンドを使用します

ターミナルまたはコマンドプロンプトを開き、次のコマンドを実行して新しいNativeScriptアプリケーションを作成します。

tns create HelloWorld --template tns-template-blank

ここでは、createコマンドに2つのことを渡しています。 作成するアプリの名前を決定するHelloWorldと、「tns-template-blank」という名前の定義済みテンプレートを使用してアプリの足場の作成をNativeScript CLIに指示する--templateオプションです。

ヒント： tns createコマンドを使用して、さまざまなテンプレートをアプリの足場にすることができます。 他のテンプレートを試すには、-templateオプションなしでtns createを実行します。 NativeScript CLIを使用すると、対話型プロンプトを使用してテンプレートを選択できます。

NativeScript CLIは新しいアプリのセットアップ中にいくつかの依存関係をダウンロードする必要があるため、createコマンドの完了には数分程度かかる場合があります。

コマンドが終了したら、cdコマンド（ディレクトリの変更）を使用して、新しいアプリのフォルダーに移動します。

cd HelloWorld

アプリを作成したので、新しいアプリをデバイスで起動して実行する方法を見てみましょう。

ヒント： tns helpコマンドを使用して、WebブラウザーでNativeScript CLIのヘルプドキュメントを表示できます。

実行中のアプリケーション

NativeScriptモバイルプロジェクトが作成されたら、2つの異なる方法でアプリケーションを開始できます。

プレビューを使用したクイックセットアップ

注釈： このセクションを完了するには、NativeScript CLIクイックセットアップを完了する必要があります。

ローカルコンピューターにアプリの足場ができたので、デバイスでアプリを実行する準備が整いました。

演習：tns previewコマンドを 使用する

NativeScriptでは、CLIのtns previewコマンドを使用して、ローカルで開発しているアプリをiOSまたはAndroidデバイスのNativeScript Playgroundアプリにリンクします。仕組みを見てみましょう。

ターミナルまたはコマンドプロンプトで次のコマンドを実行します。

tns preview

ターミナルには、このようなQRコードが表示されます。

次に、iOSまたはAndroidデバイスでNativeScript Playgroundアプリを開きます。

注釈： デバイスにNativeScript Playgroundアプリがまだインストールされていない場合は、iOS App StoreまたはGoogle Playで「NativeScript Playground」を検索してダウンロードしてください。

Playgroundアプリで、[ Scan QR code ]オプションをタップし、ターミナルまたはコマンドプロンプトに表示されるQRコードをスキャンします。

スキャン後、デバイスにアプリが表示されます。

デバイスにアプリをインストールtns previewした際に、ターミナルまたはコマンドプロンプトのコマンドが終了しないことに気付くかもしれません。 つまり、ターミナルに入力することはできません。

これは、tns previewコマンドがプロジェクトの変更を監視しているためです。 tns previewコマンドがコードの変更を検出すると、コマンドはアプリを自動的に更新（ライブ同期）するため、これらの変更をすぐに確認できます。 これを実際に確認できるように、コードを更新してみましょう。

演習：ライブ同期を試す

お気に入りのテキストエディタまたはIDEで新しいプロジェクトを開きます。

ヒント： エディターを使用してNativeScriptアプリを開発できますが、Visual Studio Codeをお勧めします。詳細については、この章の付録に進んでください。

アプリに簡単な画像を追加して、ライブ同期がどのように機能するかを見てみましょう。アプリのapp/main-page.xmlファイルを開き、そのコンテンツを次のコードに置き換えます。

<Page loaded="pageLoaded">
	<ActionBar title="My App" class="action-bar"></ActionBar>
	<Image src="https://user-images.githubusercontent.com/544280/42960643-66d498ac-8b5a-11e8-8946-7224eefea6a5.jpg"></Image>
</Page>
注釈： このコードがどのように機能するかについては後ほど説明します。とりあえず、ライブ同期の仕組みに慣れてください。

エミュレータが更新され、新しいイメージが表示されます。

Androidエミュレーター上のAppleiOSエミュレーター上のApple

次に、アプリのapp/app.cssファイルを開き、ファイルの下部に次のコードを貼り付けます。 繰り返しになりますが、このコードが現在行っていることの詳細については心配しないでください。

@keyframes spin {
	from { transform: rotate(0); }
	to { transform: rotate(360); }
}
Image {
	animation-name: spin;
	animation-duration: 3s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

エミュレーターが更新されると、ひたすらに回転するリンゴが見えるはずです！

AndroidエミュレーターでのAppleの回転iOSエミュレーターでのAppleの回転

最後の変更を行いましょう。

アプリのapp/app.cssファイルの最初の行を見つけ、core.light.cssファイルをインポートしす。 このインポートは、NativeScriptに「明るい」配色を使用するように指示します。既存のコード行を次のコード行に置き換えて、「空」のカラースキームに変更しましょう。

@import '~nativescript-theme-core/css/sky.css';

エミュレータが更新され、素敵な青いActionBarの色が表示されるはずです。

青いアクションバーを備えたAndroidアプリ青いアクションバーを備えたiOSアプリ

課題：別の配色を選択する

もう少し楽しみをお探しですか？ NativeScriptには、iOSおよびAndroidアプリのスタイル設定に使用できるいくつかの配色があります。 完全なリストから別のスタイルシートを選択して、アプリで試してみてください。どれが一番似合いますか？

全体的に、NativeScript CLIのライブ同期プロセスは、ネイティブiOSおよびAndroid開発をWeb開発のように感じさせます。 CSS、マークアップ、およびJavaScriptコードを変更し、それらの変更を即座に反映することができます。 これらはすべて完全にネイティブなモバイルアプリで実行できます。

RUNを使用した完全セットアップ

注釈： このセクションを完了するには、NativeScript CLIの完全セットアップを完了する必要があります。

NativeScript CLIクイックセットアップを使用すると、アプリをローカルで開発し、NativeScript Playgroundアプリを通じて物理iOSまたはAndroidデバイスでアプリをテストできます。 このワークフローは開始するのに最適ですが、幾つかの制限があります。

NativeScript CLIの完全セットアップを完了したら、iOSおよびAndroidアプリケーションをローカルでコンパイルし、それらのアプリをiOSシミュレーター、Android仮想デバイス、または物理デバイスに直接プッシュできます。 さらに、クイックセットアップで使用したのと同じ高速開発ワークフローが得られます。

演習：tns runコマンドを 使用する

NativeScriptでは、CLIのtns runコマンドを使用してアプリをローカルでビルドし、iOSまたはAndroidデバイスにインストールします。Androidから始めましょう。

ターミナルまたはコマンドプロンプトで次のコマンドを実行して、Androidエミュレーターでアプリを実行します。

tns run android

注釈：
  • この時点でエラーが発生した場合、NativeScript CLIの完全なセットアップ手順を完了していない可能性があります。 手順を完了してもまだうまくいかない場合は、Stack Overflowで助けを求めてみてください。
  • このコマンドをAndroidエミュレーターで実行するには、開発マシンで少なくとも1つのAVD(Android Virtual Device)を構成する必要があります。 まだインストールされていない場合は、今すぐセットアップしてください。

runコマンドは、NativeScript CLIを構築し、ネイティブのAndroidアプリケーションをデプロイするため、完了するまでに数秒かかります（訳注：1～2分かかります）。 コマンドが終了すると、ネイティブエミュレーターが開き、アプリが再び表示されます。今回のみ、アプリはローカルエミュレーターで実行されています。

青いアクションバーを備えたAndroidアプリ

macOSを使用していて、最初にiOS用に開発したい場合は、ターミナルでCtrl+ Cを入力して前のtns run androidコマンドを終了し、代わりに次のコマンドを実行します。

tns run ios

注釈： NativeScriptは、内部でXcodeを使用してiOSアプリをビルドおよび実行します。XcodeはmacOSでのみ使用可能です。したがって、iOSアプリはmacOSでのみ実行できます。

runコマンドは、NativeScript CLIを構築し、ネイティブのiOSアプリケーションをデプロイするため、完了するまでに数秒かかります（訳注：同上）。 コマンドが終了すると、ネイティブシミュレーターが開き、次のようにアプリが表示されます。

青いアクションバーを備えたiOSアプリ

アプリを開発するための完全なセットアップが整ったので、次にできることをいくつか見てみましょう。

RUNでHMRを使用する

NativeScript 5で導入されたHMR(Hot Module Replacement)機能を使用することにより、開発者の作業効率が大幅に向上します。 このオプションには、nativescript-dev-webpackプラグイン（すべてのNativeScript 5.x.xテンプレートでデフォルトで有効）を必要とし、 Hot Module Replacement用に強化されたWebpackバンドルが背後で作成されます。

開発中にHMRを有効にするには、--hmrフラグを渡します（--bundleフラグも渡せますが自動的に発行されます）。

例えば：

tns run --hmr

デフォルトでHMRを使用する

NativeScript 5.3以降では、CLIはデフォルトでHMR開発者エクスペリエンスを有効にするオプションを提供します。 これは、nsconfig.json（詳細はnsconfigファイルとオプションに関する記事を参照）を作成し、 useLegacyWorkflowプロパティにboolean値を渡すことで実現できます。

例えば：

nsconfig.json 
{
	"useLegacyWorkflow": false
}

次に、RUNコマンドを実行すると、HMRが有効になります。

tns run
注釈： useLegacyWorkflowをデバッグビルドで使用する場合とリリースビルドで使用する場合では、概念的な違いがあります。 デバッグビルドに対してフラグを有効にすると、拡張HMRエクスペリエンスが有効になります。 ただし、--releaseフラグが渡された場合（リリースビルド）--bundleは、バックグラウンドでのみ実行されます（HMRなし）。 これは、追加のHMRロジックとファイルを本番環境に持ち込むことを避けるためです。 Webpack livesyncとHMRの違いの詳細については、比較表を参照してください。

useLegacyWorkflowの拡張フラグ

useLegacyWorkflowオプションをfalseに設定すると、フラグ--no-hmrおよび--no-bundleを使用できます。

useLegacyWorkflowオプションでデフォルトのHMRを有効にしたが、HMRを使用せずにテストする必要がある場合、--no-hmrフラグを渡して現在のビルドの機能を無効にすることができます。

例えば：

tns run --no-hmr

--no-hmrを使用すると、Webpackバンドルでデフォルトのライブ同期が効果的に提供されます。

useLegacyWorkflowオプションを使用してデフォルトのHMRを有効にしているが、HMRとWebpackの両方のバンドルを無効にする場合は、--no-bundleフラグを渡すことができます。

例えば：

tns run --no-bundle

次のステップ

プレビューワークフローが設定されたので、NativeScript PlaygroundのBuild a Full Appチュートリアルをご覧ください。 CLI環境での作業を希望する場合は、Playgroundからチュートリアルプロジェクトをダウンロードし、tns previewコマンドを使用してローカルでチュートリアルを完了できます。

チュートリアルを開始

アプリケーションのデバッグ

これで、NativeScriptアプリを作成して実行する方法がわかりました。次のステップは、問題が発生したときにアプリをデバッグする方法を学習することです。NativeScriptでのデバッグの仕組みを見てみましょう。

NativeScriptアプリケーションをデバッグする場合、主に2つの方法があります。

JavaScriptコードまたはTypeScriptコードをステップ実行する必要がある場合は、Chrome開発ツールとVisual Studioデバッガーを確認することをお勧めしますが、とりあえず、アプリで簡単なログを記録する方法を見てみましょう。

演習：NativeScriptのコンソールログ出力

どの環境でもアプリをデバッグするためにできる最も自然なことの1つは、システムのログに書き込むことです。 NativeScriptでは、Web上で機能するのと同じコンソールAPIのほとんどがNativeScriptでも機能するため、Web上でのロギングと同様に多くの機能があります。

このアクションを確認するには、アプリのapp/main-page.jsファイルを開き、そのコンテンツを以下のコードに置き換えます。

exports.pageLoaded = function() {
	console.log("Hello World");
};

NativeScript CLIがアプリを更新したら、ターミナルまたはコマンドプロンプトに戻ります。このように見える「Hello World」メッセージが下部に表示されるはずです。

コンソールログを実行した後のターミナル表示

console.log()関数は、文字列、数値、ブール値などのプリミティブ値を出力するのに最適ですが、オブジェクトに対してはうまく機能しません。 このような状況では、複雑なオブジェクト出力を目的としたコンソールオブジェクトの別のメソッドconsole.dir()を使用する必要があります。

この動作を確認するには、app/main-page.jsファイルの内容を、console.log()を使用して単純なオブジェクトを記録する以下のコードに置き換えます

exports.pageLoaded = function() {
	console.log({
		type: "Apple",
		color: "Red"
	});
};

コンソールを見ると、次のあまり役に立たない出力が表示されます。

JS: [object Object]

先に進み、コードのconsole.log参照をconsole.dirに置き換えます。 NativeScript CLIがアプリを更新すると、ターミナルまたはコマンドプロンプトにオブジェクトの完全な出力が表示されます。

JS: === dump(): dumping members ===
JS: {
JS:     "type": "Apple",
JS:     "color": "Red"
JS: }
JS: === dump(): dumping function and properties names ===
JS: === dump(): finished ===
console.log()およびconsole.dir()関数は、NativeScriptアプリケーションのデバッグ時に使用できる多くのツールのうちの2つです。

より高度な開発に移行する際に、ステップデバッグを試してみることもできますが、とりあえず、NativeScriptアプリのエラーに対処する方法に注意を向けましょう。

演習：NativeScriptでのエラー処理

エラーは発生します。エラーが発生した場合、エラーの処理方法を知ることが重要です。新しいアプリでいくつかのことを台無しにしましょう。

<ActionBar>(app/main-page.xmlファイルの2行目)を宣言するコード行を見つけます。以下のようになるように、その行の最後の>を削除します。

<ActionBar title="My Apple" class="action-bar"></ActionBar

これは無効なマークアップであり、予想どおりNativeScriptはユーザーインターフェイスをレンダリングできません。 ただし、NativeScriptは、関連するエラーとスタックトレースをコンソールに記録します。 ターミナルまたはコマンドプロンプトに戻って少し上にスクロールすると、問題の正確な場所を示す次のエラーが記録されます。

JS ERROR Error: Building UI from XML. @file:///app/main-page.xml:2:50
> close tag

main-page.xmlファイルの2行目に戻って>を追加し、エラーを修正しましょう。

<ActionBar title="My Apple" class="action-bar"></ActionBar>

NativeScript CLIは、エラーが発生した後でも、アプリケーション内のファイルを監視し続けます。そのため、この問題を修正すると、CLIはアプリを以前の状態に更新します。

次のステップ

NativeScript CLIの完全なセットアップが完了し、NativeScriptアプリの作成、実行、デバッグの方法がわかったので、独自のビルドを開始する準備が整いました。開発を始めると、次のリソースが役立つ場合があります。

エディターの選択

NativeScriptアプリは、任意のテキストエディターまたはIDEで開発できます。 したがって、エディターに深く精通している場合は、NativeScriptを使用してアプリケーションを構築するときにも、選択したエディターを引き続き使用してください。

ただし、エディターに精通していない場合、または何か新しいものを試したい場合は、NativeScriptチームはMicrosoftのVisual Studio Codeを使用してNativeScriptアプリケーションを開発することをお勧めします。その理由は次のとおりです。

Visual Studio Codeを試してみる場合は、NativeScriptアプリを開発するときに役立つヒントを1つ見てみましょう。

注釈： WebStormユーザーの場合、多くのNativeScript関連機能を追加する、このコミュニティの作成した人気のあるプラグインをチェックしてください。

ヒントと手法

Visual Studio Codeをインストールした後、エディターの[ファイル]→[開く]メニューオプションを使用してプロジェクトを開くことができますが、 NativeScriptのようなコマンドラインベースのプロジェクトでより適切に機能する代替オプションcodeコマンドがあります。

codeコマンドはコマンドラインまたはターミナルで実行され、tnsコマンドがNativeScriptアプリで実行するのと同じように機能します。 Visual Studio Codeは、LinuxやWindowsにデフォルトでcodeコマンドをインストールしますが、macOSでは、実行する必要がある手動ステップが1つあります。

セットアップしたら、現在のフォルダー内のファイルを編集用に開くために、ターミナルにcode .と入力できます。 たとえば、次の一連のコマンドを使用して新しいNativeScriptアプリを作成し、編集用に開くことができます。

tns create MyNewApp cd MyNewApp code .
入門
コアコンセプト
ユーザーインターフェース
ツール
ハードウェアアクセス
プラグインの開発
リリース
アプリテンプレート
パフォーマンスの最適化
フレームワークモジュール
ガイド
サポートを受ける
トラブルシューティング
Siedkick
NativeScriptドキュメントのライセンス