0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@arika1125(Kanade Y)

DOM Enterprise Gateway フロントエンド開発ログ

0
Posted at

はじめに

このシリーズでは、エンタープライズ向け LLM ゲートウェイ PoC「DOM Enterprise Gateway」 のフロントエンド実装ログを残しています。

前回記事: DOM Enterprise Gateway フロントエンド開発ログ (1) – Angular 20 + Zoneless + SSR で土台を作る

前回は Angular 20 + Zoneless + SSR + Material Design 3 で「土台」を作りましたが、この記事ではその続きとして、タスク管理上の 6.x〜7.x にあたる範囲：

    1. フロントエンド基盤構築
    • 6.1 Angular プロジェクトの初期設定
    • 6.2 コアサービスと状態管理
    1. フロントエンド UI コンポーネント実装
    • 7.1 認証とメインレイアウト
    • 7.2 チャット画面
    • 7.3 ナレッジ管理画面
    • 7.4 設定・ヘルプ画面 + Onboarding

までを、一気に形にしたところまでをまとめます。

この記事の時点では、フロントエンドの主要画面
（Chat / Knowledge / Settings / Help / Onboarding）は実装済みで、
OIDC 未起動のため /login 以降の E2E 動作は未確認、という状態です。

1. 前提: タスク 6.x〜7.x のゴール

.kiro/tasks.md 上の定義では、対象範囲は次のようになっています。

## 6. フロントエンド基盤構築 (P)
- [x] 6.1 Angularプロジェクトの初期設定
- [x] 6.2 コアサービスと状態管理の実装

## 7. フロントエンドUIコンポーネント実装
- [x] 7.1 (P) 認証とメインレイアウトの実装
- [x] 7.2 (P) チャット画面の実装
- [x] 7.3 (P) ナレッジ管理画面の実装
- [x] 7.4 (P) 設定・ヘルプ画面の実装

実際の開発では、7.2〜7.4 については:

  • Backend 側の API 実装
  • Frontend からの統合
  • UI 実装
  • README 更新

まで含めて P0 として「完了」の定義にして進めました。

ソースコードはGitに登録しているので、気になる方は下記をご覧ください。
GitHub: https://github.com/KanadeYumesaki/dom-enterprise-gateway

※ 認証バックエンド（OIDC）がまだ起動していないため、
/settings や /help など MainLayout 配下の UI は「実装済みだが E2E 動作は未確認」 という状態です。

2. 開発環境とツール – 人間と AI の分担前提

2.1 実行環境

  • OS: Windows 11

  • 実行環境: WSL2 (Ubuntu)

  • フロントエンド:

    • Angular 20（standalone + Zoneless + SSR）
    • TypeScript 5.9
    • Angular Material (Material Design 3)

  • バックエンド:

    • Python 3.12 / FastAPI / LangChain v1 / PostgreSQL + pgvector / Redis

  • IDE: Antigravity（AI支援付きの VS Code ベース IDE）

Angular / npm / Poetry / docker などの CLI は すべて WSL 上の Ubuntu で実行しています。

2.2 AI の使い方

今回の範囲では、ざっくり次のように分担しました。

人間がやったこと

  • タスク 6.x〜7.x のスコープ整理
  • 既存コードの読み込みと方針決定
  • AI に投げるプロンプト設計（特に 7.4 のスコープ修正）
  • 型定義・命名・エラーハンドリング方針の最終決定
  • npm run build / ng test / 手動動作確認
  • README.md の書き直し

AI（Codex + ChatGPT）がやったこと

  • 7.2〜7.4 の実装プラン案の草案
  • user_settings / help の Backend API 実装＋テストコード
  • Frontend 側 Settings / Help / Onboarding のスタブ実装
  • app.routes.ts のルーティング更新案
  • README の初期ドラフト

AI に任せる部分を増やしつつ、

「既存コードを読む」「仕様を決める」「最終責任を持つ」

ところは人間が必ず見る、という線引きをしました。

3. 6.x フロントエンド基盤構築

3.1 6.1 Angular プロジェクト初期設定（人間メイン）

やったこと:

  • Angular 20 プロジェクトを SSR + Zoneless 構成で手動セットアップ

  • Angular Material (MD3) の導入

  • プロジェクト構成の整理

    • core/ … 共通サービス群 (Api/Auth/State)
    • layout/ … MainLayout / Header / Sidebar
    • features/ … 機能ごとの UI

  • Prettier / Husky の最低限設定（自動フォーマット）

このあたりはまだ AI に任せるよりも、

  • 「何を土台にするか」
  • 「どのディレクトリ構成にするか」

というレベルの判断が多いので、自分で手を動かしました。

3.2 6.2 コアサービスと状態管理（人間 + AI）

ApiService

  • REST + SSE をまとめて扱うラッパーサービス
  • ベース URL や共通ヘッダの付与
  • エラーハンドリングの基本方針（4xx / 5xx / network / parse / unknown）

AuthService

  • /api/auth/* を叩く BFF として実装
  • OIDC リダイレクト用の URL を生成
  • ログイン / ログアウト / コールバック処理の骨組み

StateService

  • Angular Signals を使ったグローバル状態
  • currentUser, isLoading, uiSettings などを保持
  • 認証状態と UI の橋渡し

このあたりは「型と責務さえ決めてしまえば、メソッド実装を AI に展開してもらう」スタイルがハマりました。

4. 7.1 認証とメインレイアウト

4.1 ルーティングとガード

7.1 では、以下のルーティングを定義しました。

  • /login … LoginPageComponent（ガードなし）

  • /auth/callback … AuthCallbackComponent（ガードなし）

  • / … MainLayoutComponent（canMatch: [authGuard]）

    • children:

      • /chat
      • /sessions
      • /memory
      • /knowledge
      • /settings
      • /help

authGuard の役割はシンプルで、

const currentUser = this.stateService.currentUser();
if (!currentUser) {
  // 未ログイン時は /login にリダイレクト
}

というものです。

OIDC / Backend を起動していない状態では、常に /login に戻されるため、/settings や /help は現時点ではブラウザから直接確認できません。
これは仕様通りの挙動として割り切っています。

4.2 MainLayout / Header / Sidebar

  • MainLayoutComponent

    • mat-sidenav-container ベースのレイアウト
    • Header / Sidebar / RouterOutlet を結線

  • HeaderComponent

    • ログインユーザー名やロールを表示
    • ログアウトボタン

  • SidebarComponent

    • RBAC に基づいてメニューを制御（admin のみ /knowledge を表示）

ここまでが前回記事の範囲で、今回の記事はこの上に 7.2〜7.4 の「中身」を載せていく話になります。

5. 7.2 チャット画面 – Streaming & IC-5 Lite

7.2 は、まだ記事にしきれていない部分が多いので、ここでは「どういう役割のコンポーネントに分けたか」だけを整理します。

5.1 コンポーネント分割

  • ChatPageComponent
    親コンポーネント。StateService と連携し、現在のセッション状態を管理。
  • MessageListComponent
    メッセージ一覧の表示（ユーザー / アシスタント / システムなどの区別）
  • ChatInputComponent
    入力フォーム + 送信ボタン + Shift+Enter などのキーハンドリング
  • Ic5ViewerComponent
    IC-5 Lite (Decision / Why / Next 3 Actions / Foresight / Notes) を Markdown からセクション別に表示
  • AttachmentListComponent
    添付中のファイル表示・削除

5.2 Streaming 対応

  • ApiService に connectToSse を用意
  • ChatPageComponent 側で SSE を購読し、Signal による状態更新で UI をリアクティブに更新

この部分は、記事としてはもう少し整理してから別枠（Chat 専用回）で書こうと思っています。
ここでは「7.2 も含めて 7.x 全体の構造が揃った」という文脈で止めておきます。

6. 7.3 ナレッジ管理画面 – Admin 専用 UI

7.3 では、管理者専用のナレッジ管理画面を作りました。

7.3.1 Backend API の確認

  • GET /api/admin/knowledge

    • 管理者権限が必要 (get_current_admin_user)
    • skip, limit, search_query を受け取り、FileUploadResponse[] を返す

これをもとにフロント側で KnowledgeDocument モデルを定義し、
knowledge.models.ts に切り出しました。

7.3.2 フロントの構成

  • KnowledgeFilterFormComponent
    ファイル名検索フォーム（デバウンス付き）
  • KnowledgeListComponent
    MatTable + MatPaginator + MatSort
    ファイル名 / 種別 / サイズ / 作成日などを一覧表示
  • KnowledgeDetailComponent
    選択中ドキュメントのメタデータ詳細
  • KnowledgePageComponent
    親コンポーネント。検索条件 / ページネーション / ローディング状態を管理

7.3.3 AdminGuard

AI が最初に生成したガードは currentUser.is_admin というフィールドを見ていましたが、
実際の User 型は roles: ('admin' | 'user')[] を持っていたため、最終的には次の形に直しました。

const roles = currentUser?.roles ?? [];
const isAdmin = Array.isArray(roles) && roles.includes('admin');

このあたりは 「型定義をちゃんと見て直す」 という、人間側のレビューが効いているところです。

7. 7.4 設定・ヘルプ画面 + Onboarding

7.4 は、最初 AI が「Backend 統合だけやって UI は P1 でいいのでは？」と提案してきたところを、

「P0 のうちに UI までちゃんと作る」

とスコープを修正したタスクです。

7.4.1 Backend: user_settings & help API

Backend 側では、次の実装を行いました（実装自体は AI 主導、人間レビュー）。

  • UserSettings モデル

    • t_user_settings テーブル
    • (tenant_id, user_id) ユニーク
    • theme, language, font_size, llm_profile
    • has_seen_onboarding, onboarding_skipped

  • GET /api/user/settings

    • ログインユーザーの設定を取得（なければデフォルト値）

  • POST /api/user/settings

    • 部分更新 (UserSettingsUpdate)

  • GET /api/help/content

    • HelpSection リストを返す
    • コンテンツは help_content_outline.md ベースの静的データ

7.4.2 Frontend: Settings / Help / Onboarding

SettingsPageComponent

  • /settings で開く設定画面
  • UserSettings の値をフォームにバインド
  • テーマ / 言語 / フォントサイズ / Onboarding フラグを編集
  • updateUserSettings による部分更新

HelpPageComponent

  • /help で開くヘルプセンター
  • 左ペイン: セクション一覧
  • 右ペイン: 選択中セクションのコンテンツ（P0 ではプレーン表示）

OnboardingService + OnboardingDialogComponent

  • hasSeenOnboarding / onboardingSkipped を使って、初回ログイン時にダイアログを表示
  • SSR 環境では isPlatformBrowser でブラウザ専用処理をガード

7.4.3 現時点での制約

  • OIDC / Backend を起動していない状態では、authGuard により /login から先に進めないため、
    /settings や /help の UI はブラウザ上ではまだ確認できていません。

  • その代わり、

    • TypeScript / Angular コンパイル
    • npm run build（SSR バンドル含む）
    • ルーティング・ガードの整合性

    をもって「P0 の実装完了」としています。

この制約は README にも明記し、

Settings / Help は実装済みだが、OIDC 未起動環境では E2E 動作未確認

と正直に書くようにしています。

8. README の書き直し – 引き継ぎやすさを意識

最後に、README を一度まっさらな目線で書き直しました。

ポイントは：

  • プロジェクトの目的と全体アーキテクチャを最初に置く
  • Backend / Frontend のセットアップ手順を WSL 前提 で明記
  • 各画面の状態（P0 でどこまでできていて、何が未確認か）を正直に書く
  • 開発ルール（推測禁止 / エラー握りつぶし禁止 / コメント方針）を README にも載せる

これにより、

  • 自分自身が数週間後に戻ってきても思い出しやすい
  • 他の開発者や AI エージェントが引き継ぎやすい

README になったと思います。

9. 人間 vs AI でやったことまとめ

最後に、この範囲で「誰が何をやったか」をざっくりまとめておきます。
2.2 で書いた分担方針を、タスクごとにもう少し細かく書くとこんなイメージです。

項目 人間 AI
6.1 Angular 初期設定 ◎ 手動で構成決定 △ 補助的なコード生成のみ
6.2 Api/Auth/State サービス ◎ 設計・責務の定義 ○ メソッド実装の展開
7.1 認証 & レイアウト ◎ ルーティング設計 / ガード方針 ○ テンプレート・細かいロジック
7.2 Chat UI ◎ 構成と責務の切り出し ○ コンポーネント実装案
7.3 Knowledge Admin ◎ 型定義 / AdminGuard 修正 ○ コンポーネント雛形とテーブル周り
7.4 Settings/Help/Onboarding ◎ スコープ修正 / 最終調整 ◎ Backend API 実装 / UI 初期実装
README 書き直し ◎ 全面リライト ○ たたき台生成

ざっくり言うと、

  • 「仕様と責務の決定」と「最終レビュー」は人間
  • 「実装の展開」と「ドキュメントのたたき台」は AI

という役割分担で回した形です。

10. まとめと次回予告

この記事では、DOM Enterprise Gateway のフロントエンド側で、

  • 6.x フロントエンド基盤構築
  • 7.x UI コンポーネント（Chat / Knowledge / Settings / Help / Onboarding）

までを一気に揃えた流れを紹介しました。

実務寄りの観点でいうと、

  • Angular 20 + Zoneless + SSR のプロジェクトを自前で立てられる
  • RBAC / Guard / Layout を含む 認証まわりのフロー を設計できる
  • Backend API を読んで モデル・サービス・UI を一貫した形で実装できる
  • AI を使いながらも、最終的な整合性と品質を人間が担保できる

というスキルセットを示すことを意識しています。

次回は、7.2 の Chat UI をもう少し掘り下げて、

  • SSE ストリーミングの扱い
  • IC-5 Lite の Markdown をどうパースして表示しているか
  • フィードバックやメモリとのつなぎ

あたりを整理して書いていく予定です。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?