【SAPUI5】Component.jsとmanifest.json

##はじめに
SAPUI5を学んでいて、アプリケーションを構成する色々なファイルの役割を理解する必要があると感じました。そこで今回は、Component.jsと、manifest.jsonの役割について整理します。
##これまでのフォルダ構成
前回までに作成したアプリケーションでは、フォルダ構成は以下のようになっていました。Component.js とmanifest.jsonはなくても動いていました。

##Component.jsとmanifest.jsonの役割は？
私は、Component.js とmanifest.jsonは、index.htmlから機能を細分化して独立させたものと理解しました。では、具体的にどのような役割分担となっているのでしょうか。

ファイル	役割
index.html	Bootstrapの定義、コンテンツを配置する場所(body)の定義
Component.js	初期処理の定義
manifest.json	ライブラリのバージョン、モデルなど、アプリケーションに必要な設定を定義

Component.jsはロジックを書くところで、manifest.jsonは各種パラメータを指定するところ、と言うことができそうです。
もともとこれらはComponent.js一本で記述していましたが、SAPUI5 version 1.30からウェブアプリマニフェストを参考にmanifest.jsonを外に出すようになったそうです。
各ファイルの関係については、SAP公式ドキュメントの図がわかりやすいので参考にしてください。

##実装してみる
###ゴール
実行結果の見た目は前回と変わりません。
フォルダ構成は以下のようになります。

###ステップ

1. Component.jsを作成する
2. manifest.jsonを作成する
3. index.htmlを変更する
4. アプリを実行する

###1. Component.jsを作成する
index.htmlと同じ階層にComponent.jsファイルを新規作成します。
以下のコードを入力します。

sap.ui.define([
	"sap/ui/core/UIComponent"
], function (UIComponent) {
	"use strict";

	return UIComponent.extend("test.helloworld.Component", {

		metadata : {
			manifest: "json"
		},

		init : function () {
			// call the init function of the parent
			UIComponent.prototype.init.apply(this, arguments);

			// additional initialization can be done here
		}

	});
});

ここで行っているのは、以下の2点です。

• manifest.jsonを参照することを宣言（metadata:の部分）
• 初期処理の定義

###2. manifest.jsonを作成する
index.htmlと同じ階層にmanifest.jsファイルを新規作成します。
以下のコードを入力します。
※以下は一例で、実装内容はアプリケーションにより変わります

{
	"_version": "1.3.0",
	"sap.app": {
		"_version": "1.3.0",
		"id": "test.helloworld",
		"type": "application",
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"applicationVersion": {
			"version": "1.0.0"
		}
	},
	"sap.ui": {
		"_version": "1.3.0",
		"technology": "UI5",
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_bluecrystal"
		]
	},
	"sap.ui5": {
		"_version": "1.2.0",
		"rootView": {
			"viewName": "test.helloworld.view.App",
			"type": "XML",
			"id": "app"
		},
		"autoPrefixId": true,
		"dependencies": {
			"minUI5Version": "1.34",
			"libs": {
				"sap.ui.core": {
					"minVersion": "1.34.0"
				},
				"sap.m": {
					"minVersion": "1.34.0"
				},
				"sap.ui.layout": {
					"minVersion": "1.34.0"
				}
			}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		}
	}
}

ここでは大きく分けて3つのことを定義しています。共通しているのは、アプリケーションを実行するのに必要なバージョンを指定しているということです。

• sap.appに関する設定：アプリケーションのid、タイトルなど
• sap.uiに関する設定：サポートするデバイスの種類、UIのテーマなど
• sap.ui5に関する設定：最初に表示するビュー(rootView)、従属するライブラリのバージョンなど

それぞれの属性の詳細については、以下のヘルプを参考にしてください。
Descriptor for Applications, Components, and Libraries

###3. index.htmlを変更する
attachInitメソッドを以下のように変更します。
もともとビューを直接表示していましたが、Component.jsを呼び出す設定に変更します。初期表示するビューはmanifest.jsonで指定しましたね。

	    <script>
	       sap.ui.getCore().attachInit(function () {
	       	/* コメントアウト
              sap.ui.xmlview({
                 viewName : "test.helloworld.view.App"
            */
            	new sap.ui.core.ComponentContainer({
					name : "test.helloworld"
              }).placeAt("content");
	       });
	    </script>

###4. アプリを実行する
実行結果は以下のようになります。

##（補足）ファイルの呼び出し順について
デバッグツールで見てみると、index.html⇒Component.js⇒manifest.jsonの順に呼ばれていることがわかります。一方、Fiori Launchpadから実行する場合はindex.htmlは使用せずにComponent.jsが直接呼ばれます。（つまり、Component.jsが必須ということ）