認証統合から始めるフロントエンドの機能単位開発 — マイクロサービス思想の適用

モノリシックなフロントエンドアプリを、マイクロフロントエンドに対応する過程で、まずは認証統合（Identity Federation）でアプリを分割・整理する重要性を説明します。

Transcript

1. 認証統合から始めるフロントエンドの機能単位開発 - マイクロサービス思想の適用 2026.04.20 フロントエンド・PHPオフラインイベント@札幌 三浦 恒樹 (MIURA KOUKI) 診療情報管理士 上級医療情報技師 医用画像情報専門技師 ドゥウェル株式会社
2. 長男が飼っている ハリネズミがアイコン INTRODUCE ・ドゥウェル株式会社 （医療系IT開発・導入会社）に所属 ・マネージャー（プレイング・マネージャー） ・TypeScript, Vue.js, Node.js, Java，C#, PHP ・３児の父 ・休日は子どものサッカー観戦 ・参加している勉強会 　札幌PHP勉強会、JBUG札幌、JavaDO、ゆるWeb勉強会、えびてく、 　クラメソ札幌IT勉強会(仮)、AWS初心者LT会in札幌、札幌すごいAI会、 　札幌IT石狩鍋、函館本線沿線勉強会、VueSapporo、さっぽろ医療IT勉強会　　等 is the NIHON KOHDEN Group
3. ・#1 モノリシックフロントの限界 ・#2 分割という選択肢 ・#3 マイクロフロントエンドとは ・#4 分割の前に必要なもの ・#5 認証統合（Identity Federation） ・#6 段階的アーキテクチャ ・#7 まとめ INDEX
4. #1 モノリシックフロントの限界 バックエンドは ・マイクロサービス ・モジュラーモノリス 等の細分化の技術が進んできた。 フロントエンドもスケールに 限界がある。 - 機能追加で肥大化 - デプロイ単位が巨大 - チーム間の衝突
5. #2 分割という選択肢 - バックエンド →　マイクロサービス - フロントエンド →　？
6. #3 マイクロフロントエンドとは - 考え方 　- マイクロサービスのフロントエンド版 　- チーム単位での自律開発を実現 　　- 異なる技術スタックでも開発できる - 分割戦略 　- 垂直分割 　- 水平分割 - 実装パターン 　- Build-time　/　Monorepo 　- Run-time(Client-side) 　　- Module Federation、WebComp.. 　- Run-time(Server-side) 　　- SSR 　- Run-time(Edge-side) 　　- HTML Streaming Aggregation 画面A Vue App (Team A) 画面B React App (Team B) 画面C Svelte App (Team C) 認証セッション 画面遷移 垂直分割 ヘッダー　Vue App (Team A) サイドバー React App (Team B) コンテンツ Svelte App (Team C) 水平分割 Vue App Team A React App Team B Build MFE App Front （Client) Edge Server Build-time Run-time ブラウザで統合 Module-Fed eration HTML Streaming Aggregation SSR
7. #4 分割の前に必要なもの - アプリ間の独立性 各アプリが疎結合。独立して動作できる設計。 - 共通の認証基盤 ログイン状態・権限情報を全アプリで共有する仕組み。 - ユーザー体験の一貫性 アプリが分割されていることを意識しない。 共通の認証基盤　＞　ユーザー体験の一貫性 ・認証基盤が共通化されていなければ個別に認証が必要 ・ユーザー体験の一貫性も重要だが、アプリが分割されていることを意識されても良いケースは多い 分割して開発されるため、 独立性は担保できている。
8. #5 認証統合（Identity Federation） - 複数アプリにわたって、ログイン状態、ユーザー情報、権限を統一管理・共有する仕組み カルテアプリ Vue App (Team A) 検査結果アプリ React App (Team B) 文書（紹介・問診・同意）管理 iOS/Android Native App (Team C) 画面遷移 認証基盤 認証統合（Identity Federation）によるアプリ統合 Natvie Appも統合できる。 ただし、UX一貫性の難易度は高くなる。
9. #6 段階的アーキテクチャ UX一貫性が重要な部分から マイクロフロントエンド化 していく
10. ご清聴ありがとうございました。 #7 まとめ ・フロントエンドも肥大化すると開発効率が下がる ・いきなりマイクロフロントエンド（MFE）は影響が大きい ・まずは認証統合（Identity Federation）で分割したアプリを統合する ・ユーザー体験の一貫性が重要な箇所からMFE化していく ・技術：　Module Federation、Web Components、SSR、HTML Streaming Aggregation モノリス（一枚岩）　→　認証統合　→　アプリ分割　→　必要に応じてMFE
11. お知らせ 4/27(月) 19:00～ 5/23(土) 17:30～