fix-component-async

Component.js の非同期設定を修正する

このスキルは、UI5 リンターが検出するものの、コンポーネントの読み込み動作を理解する必要がある場合があるため自動修正できない、Component.js の非同期設定の問題を修正します。

対応するリンタールール

ルール ID	メッセージパターン	このスキルによる対応
async-component-flags	Component is not configured for asynchronous loading	IAsyncContentCreation インターフェースを追加します
async-component-flags	Component does not specify that it uses the descriptor via the manifest.json file	manifest: "json" を追加します
async-component-flags	Component implements the sap.ui.core.IAsyncContentCreation interface. The redundant 'async' flag ... should be removed	manifest から async フラグを削除します
async-component-flags	The 'async' property at '...' must be removed	async: false を削除します
no-removed-manifest-property	Property '...' has been removed in Manifest Version 2	async プロパティを削除します

使用するタイミング

次のようなリンター出力が表示された場合に、このスキルを適用してください。

Component.js:5:1 error Component is not configured for asynchronous loading.  async-component-flags
Component.js:5:1 warning Component does not specify that it uses the descriptor via the manifest.json file  async-component-flags
Component.js:10:5 warning Component implements the sap.ui.core.IAsyncContentCreation interface. The redundant 'async' flag at '/sap.ui5/rootView/async' should be removed  async-component-flags
manifest.json:25:9 error The 'async' property at '/sap.ui5/rootView/async' must be removed  async-component-flags

完全なモダナイゼーションワークフロー中の重要事項： リンターが async-component-flags を指摘していなくても、すべての Component.js にこのスキルを必ず適用してください。リンターは、manifest.json から冗長な async: true フラグが削除された後にのみ、不足しているインターフェースを検出できます。そのため、モダナイゼーションの初期段階ではエラーがまだ表示されません。あらかじめ必ず IAsyncContentCreation を追加してください。

重要なルール

IAsyncContentCreation をインポートしない

IAsyncContentCreation はマーカーインターフェースです。UI5 ランタイムは interfaces 配列内の名前を文字列としてチェックします。モジュール依存関係としてインポートしてはいけません。sap.ui.define の依存関係配列に追加すると、sap/ui/core/IAsyncContentCreation は読み込み可能なモジュールではないため、ランタイムエラーが発生します。

// WRONG — do NOT import it
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/core/IAsyncContentCreation"  // ← WRONG: will fail at runtime
], function(UIComponent, IAsyncContentCreation) {
  ...
});

// CORRECT — only reference it as a string in interfaces
sap.ui.define([
  "sap/ui/core/UIComponent"
], function(UIComponent) {
  return UIComponent.extend("my.app.Component", {
    metadata: {
      manifest: "json",
      interfaces: ["sap.ui.core.IAsyncContentCreation"]  // ← string reference only
    }
  });
});

既存の依存関係配列に "sap/ui/core/IAsyncContentCreation" がある場合は、それと対応する関数パラメーターを削除してください。

interfaces の正しい配置

interfaces は metadata オブジェクトのプロパティであるため、metadata: { } の内側にネストする必要があります。UIComponent.extend() の設定オブジェクトには、次の 2 つの階層があります。

UIComponent.extend("name", {
  metadata: {          ← level 1: component config
    manifest: "json",  ← level 2: metadata properties
    interfaces: [...]  ← level 2: THIS IS WHERE interfaces GOES
  },
  init: function() {}  ← level 1: component config
});

UI5 ランタイムが interfaces を読み取るのは metadata オブジェクト内からのみです。レベル 1（metadata と同じ階層）に配置すると、エラーなく無視され、コンポーネントは非同期として認識されません。

編集後に確認してください。interfaces は metadata: より 1 階層深くインデントされていますか？そうでない場合は、誤った場所に配置しています。

修正方法

1. async-component-flags - IAsyncContentCreation インターフェースを追加する

IAsyncContentCreation インターフェースは、コンポーネントがコンテンツを非同期で読み込むことを宣言する最新の方法です。

正しい例 — interfaces を metadata の内側にネストする：

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

  return UIComponent.extend("my.app.Component", {
    metadata: {
      manifest: "json"
    }
  });
});

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

  return UIComponent.extend("my.app.Component", {
    metadata: {
      manifest: "json",
      interfaces: ["sap.ui.core.IAsyncContentCreation"]
    }
  });
});

誤った例 — interfaces を間違った階層に配置する：

// WRONG — interfaces as a sibling of metadata (level 1 instead of level 2)
return UIComponent.extend("my.app.Component", {
  interfaces: ["sap.ui.core.IAsyncContentCreation"],  // ← WRONG: outside metadata
  metadata: {
    manifest: "json"
  }
});

2. async-component-flags - manifest 宣言を追加する

コンポーネントで manifest を使用する宣言がない場合は、metadata に manifest: "json" を追加します。

// Before
metadata: {
  // no manifest declaration
}

// After
metadata: {
  manifest: "json"
}

3. async-component-flags - 冗長な async フラグを削除する

IAsyncContentCreation インターフェースを実装すると、manifest.json の async フラグは冗長になるため、削除する必要があります。

manifest.json 内：

// Before
{
  "sap.ui5": {
    "rootView": {
      "viewName": "my.app.view.Main",
      "type": "XML",
      "async": true
    },
    "routing": {
      "config": {
        "async": true,
        ...
      }
    }
  }
}

// After
{
  "sap.ui5": {
    "rootView": {
      "viewName": "my.app.view.Main",
      "type": "XML"
    },
    "routing": {
      "config": {
        ...
      }
    }
  }
}

4. async-component-flags - async: false を削除する

async: false が明示的に設定されている場合は、非同期読み込みを妨げるため削除する必要があります。

5. Component.js 内のインライン manifest を処理する

manifest が別個の manifest.json ではなく Component.js 内にインラインで定義されている場合も、インラインの manifest オブジェクトに同じ修正を適用します。interfaces は引き続き metadata の内側に配置します。インラインの manifest プロパティと同じ階層で、どちらも metadata の内側にネストします。

// Before
metadata: {
  manifest: {
    "sap.ui5": {
      "rootView": {
        "async": true,
        ...
      }
    }
  }
}

// After
metadata: {
  manifest: {
    "sap.ui5": {
      "rootView": {
        ...
      }
    }
  },
  interfaces: ["sap.ui.core.IAsyncContentCreation"]  // ← still INSIDE metadata
}

実装手順

1. Component.js ファイルを読みます
2. 構文スタイル（sap.ui.define または ES6 class）を確認します
3. async-component-flags エラーの場合：
   • IAsyncContentCreation インターフェースがすでに宣言されているか確認します
   • 宣言されていない場合は、metadata: { } オブジェクト内のプロパティとして interfaces: ["sap.ui.core.IAsyncContentCreation"] を追加します（manifest と同階層であり、metadata 自体と同階層ではありません）
   • manifest: "json" が宣言されているか確認し、なければ追加します
4. 配置を確認します：interfaces は metadata: より1段深くインデントする必要があります。同じ階層にある場合は誤りです
5. manifest.json（またはインライン manifest）に冗長な async フラグがないか確認します
6. rootView と routing/config から async プロパティを削除します
7. 更新したファイルを書き込みます
8. ゲートスクリプトを実行して検証します：node <skill-dir>/scripts/verify-component.js <project-root> — 終了コードが 0 でなければなりません

修正例

リンターの出力が次の場合：

Component.js:5:1 error Component is not configured for asynchronous loading.  async-component-flags

Component.js の変換：

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

  return UIComponent.extend("my.app.Component", {
    metadata: {
      manifest: "json"
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      // ...
    }
  });
});

// After — interfaces goes INSIDE metadata, not next to init/metadata
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/model/json/JSONModel"
], function(UIComponent, JSONModel) {
  "use strict";

  return UIComponent.extend("my.app.Component", {
    metadata: {
      manifest: "json",
      interfaces: ["sap.ui.core.IAsyncContentCreation"]
    },

    init: function() {
      UIComponent.prototype.init.apply(this, arguments);
      // ...
    }
  });
});

注意事項

• IAsyncContentCreation インターフェースは UI5 1.89 で導入されました。minUI5Version に互換性があることを確認してください
• インターフェースを追加する場合は、非同期読み込みが正しく行われるよう manifest: "json" も存在することを確認してください
• このインターフェースを実装すると、async: true フラグは冗長になるため、安全に削除できます
• UIComponent（Component だけではありません）を継承するコンポーネントも IAsyncContentCreation を使用できます
• コンポーネントが IAsyncContentCreation をすでに実装しているカスタムベースコンポーネントを継承している場合、変更は不要です
• IAsyncContentCreation と manifest v2 の違い：この2つは独立した事項です。manifest の _version を "2.0.0" に更新しても、非同期コンテンツ作成が自動的に有効になるわけではありません。Component.js で IAsyncContentCreation を明示的に実装する必要があります。逆に、IAsyncContentCreation を追加するために manifest v2 は必要ありません。

関連スキル

• fix-manifest-json：IAsyncContentCreation を追加すると、manifest.json の async フラグは冗長になります。fix-manifest-json を使用して _version を更新し、async プロパティを削除して、routing 設定の名前を変更します
• fix-js-globals：Component.js でグローバルアクセスのパターン（例：sap.ui.getCore()）を使用している場合は、fix-js-globals を使用して適切なモジュールインポートに変換します