思い通りに構成するBackstageエンティティページ！条件付きタブの実装ガイド 🛠️

プラットフォームエンジニアの皆さん、こんにちは！ 👋 Backstageを運用していると、このような悩みが出てくることがあります。

「私たちのチームはKubernetesを使っているサービスにだけK8sタブを表示したいんだけど…」

「JavaプロジェクトにだけSonarQubeタブを露出させることはできないかな？」

Backstageは、EntityLayout.Routeと「フィルター関数（Filter Functions）」を組み合わせることで、この問題を非常にエレガントに解決します。今からその方法を詳しく見ていきましょう！

---

1. 基本概念：EntityLayout.Routeとifプロップ 🧩

Backstageエンティティページの各タブは、EntityLayout.Routeコンポーネントで定義されます。このコンポーネントには、ifという非常に特別なプロップ（Prop）があります。

• 動作原理： ifプロップに渡された関数がtrueを返すとタブがレンダリングされ、falseを返すとタブはまったく表示されません。
• 入力値： この関数は、現在のページのEntityオブジェクトを引数として受け取り、そのメタデータを検査します。

---

2. よく使うフィルター関数 🛠️

Backstageは、@backstage/plugin-catalog-reactパッケージを通じて、よく使われるフィルター用のユーティリティ関数を提供しています。

① 特定の種類（Kind）に基づいて表示する

TypeScript

import { isEntityKind } from '@backstage/plugin-catalog-react';

<EntityLayout.Route if={isEntityKind('component')} path="/docs" title="Docs">
  <EntityTechdocsContent />
</EntityLayout.Route>

② アノテーション（Annotation）の存在に基づいて表示する（最もよく使われる！）

特定のプラグイン設定がcatalog-info.yamlにある場合にのみタブを表示したいときに使用します。

TypeScript

import { isAnnotationNonEmpty } from '@backstage/plugin-catalog-react';

<EntityLayout.Route 
  if={isAnnotationNonEmpty('backstage.io/kubernetes-id')} 
  path="/kubernetes" 
  title="Kubernetes"
>
  <EntityKubernetesContent />
</EntityLayout.Route>

③ コンポーネントタイプ（Type）に基づいて表示する

サービスなのか、ライブラリなのか、ウェブサイトなのかによって区別します。

TypeScript

import { isComponentType } from '@backstage/plugin-catalog-react';

<EntityLayout.Route if={isComponentType('service')} path="/api" title="API">
  <EntityApiDefinitionCard />
</EntityLayout.Route>

---

3. 上級者の秘訣：カスタムフィルターの作成 💡

提供される関数だけでは不十分な場合がありますよね？自分でフィルター関数を作成することもできます。例えば、特定のタグ（tag）が含まれている場合にのみタブを表示したい場合は、次のように記述します。

TypeScript

const isJavaProject = (entity: Entity) => 
  entity.metadata.tags?.includes('java') ?? false;

// ... EntityPage.tsx 内
<EntityLayout.Route if={isJavaProject} path="/jvm-metrics" title="JVM Metrics">
  <MyCustomJvmComponent />
</EntityLayout.Route>

---

4. 複数の条件を組み合わせたい場合：isAnd 🤝

2つ以上の条件がすべて満たされる必要がある場合は、isAnd関数を使用します。

TypeScript

import { isAnd, isEntityKind, isAnnotationNonEmpty } from '@backstage/plugin-catalog-react';

const myCondition = isAnd([
  isEntityKind('component'),
  isAnnotationNonEmpty('my-plugin/id')
]);

<EntityLayout.Route if={myCondition} path="/my-plugin" title="My Plugin">
  <MyPluginContent />
</EntityLayout.Route>

---

5. 実務適用ヒント：快適なUXの作成 ✨

1. 不要なノイズの除去： データがないタブで空の画面を表示する代わりに、上記のようにif文でタブ自体を非表示にする方が、ユーザーエクスペリエンス（UX）の観点からはるかに優れています。
2. デフォルト設定： 必須情報（概要、CI/CDなど）は、条件なしで常に表示し、一貫性を保ちましょう。
3. カタログガイドの提供： タブが表示されずに困惑するユーザーのために、「このタブを表示するにはcatalog-info.yamlにどのようなアノテーションを追加する必要があるか」を案内するガイドを社内Wikiに作成しておくことをお勧めします。📚

---

🏁 終わりに

EntityLayout.Routeのifプロップは、Backstageエンティティページを単なるダッシュボードから「エンティティに特化したインテリジェントポータル」へと進化させるための重要なツールです。さあ、あなたのサービスの特性にぴったりの最適化された画面を構成してみてください！