こんにちは！今日は、Backstageの巨大なモノレポの森の中で、「このパッケージがフロントエンドプラグインかどうかをどうやって知るのか？」というテーマで深く探求していきましょう。🕵️♂️
Backstageは数多くのパッケージで構成されており、初めて触れると道に迷いやすいです。しかし、いくつかの明確な「手がかり」さえ知っていれば、どのパッケージがユーザー画面を担当するフロントエンドプラグインなのかをたった5秒で把握できます。その秘訣を今すぐ公開します！💡
🏗️ フロントエンドプラグイン識別の3段階公式
Backstageパッケージを調査する際、次の3つの要素を確認すればよいです。これらはフロントエンドプラグインであることを証明する決定的な証拠です。
1. package.jsonの名前と依存関係 📦
最初に確認すべき場所は、パッケージのルートにあるpackage.jsonファイルです。
- 命名規則: ほとんどの公式およびコミュニティプラグインは、@backstage/plugin-<名前>の形式に従います。バックエンドプラグインとは異なり、末尾に-backendが付かないのが特徴です。
- 主要な依存関係: dependenciesリストに@backstage/core-plugin-apiまたは@backstage/core-componentsが含まれている場合、これはUIを構成し、BackstageコアAPIと通信するフロントエンド用パッケージである可能性が99%です！
2. src/plugin.tsファイルの存在 🧩
フロントエンドプラグインは、自身をBackstageシステムに登録するために特定の関数を使用します。srcフォルダ内のplugin.ts（またはこれに類似した名前のファイル）を開いてみてください。
- createPlugin関数: コード内でcreatePlugin関数が呼び出されているか確認してください。この関数はプラグインのアイデンティティを定義し、ルート（Route）やAPIなどをカプセル化する役割を果たします。
TypeScript
// 例: src/plugin.ts
import { createPlugin } from '@backstage/core-plugin-api';
export const myFrontendPlugin = createPlugin({
id: 'my-plugin',
// ... プラグイン設定
});3. エクステンション（Extensions）の定義 🎨
フロントエンドプラグインは画面に表示される必要があるため、ユーザーに公開される「構成要素」を定義します。これらをエクステンション（Extensions）と呼びます。
- createRoutableExtensionまたはcreateComponentExtension: これらの関数が使用されている場合、それは特定のURLパスで表示されるか、他のページに挿入されるUIコンポーネントを提供することを意味します。
🔍 フォルダー構造から見るフロントエンドプラグインの特徴
形式的なコード以外にも、フォルダー構造自体がバックエンドとは明確に異なります。
| フォルダー/ファイル | 役割 | 特徴 |
|---|---|---|
| src/components/ | UIコンポーネント | React(tsx)ファイルが豊富です。⚛️ |
| src/api/ | フロントエンドAPI定義 | バックエンドと通信するためのインターフェースがあります。 |
| src/routes.ts | ルート参照 | プラグイン内で移動するパス情報を含みます。📍 |
| src/index.ts | 外部公開経路 | 他のパッケージから利用されるコンポーネントとAPIをexportします。 |
—
💡 実践練習：バックエンドプラグインとはどう違うのか？
混乱を避けるため、バックエンドプラグインとの違いを明確に見ていきましょう！
- バックエンドプラグイン: 名前に-backendが付き、src/service/router.tsがあり、createRouterやadd(import(…))形式を使用してExpressルーターを提供します。⚙️
- フロントエンドプラグイン: 名前がすっきりしており、src/plugin.tsがあり、Reactコンポーネントを提供します。🎨
🏁 結論：識別の核心はcreatePlugin
Backstageパッケージ内でフロントエンドプラグインを見つける最も直接的で確実な方法は、srcフォルダー内でcreatePlugin関数が呼び出されているかを確認することです。これが、プラグインがBackstageフロントエンドアプリに統合される公式の「入場券」だからです。
これで、どのパッケージを見ても、それが画面を描画する役割なのか、裏でデータを処理する役割なのかを明確に区別できるようになるでしょう！🚀
コメントを残す