SFCで実現する病院・医療システムの動的組み立て式UI

Vue Fes Japan 2026 LT発表資料です。

Transcript

1. 2026.10.24 / Vue Fes Japan 2026 SFCで実現する病院・医療システムの動的組み立て式UI 三浦 恒樹 (MIURA KOUKI) / 医療ITエンジニア
2. 自己紹介 - 医療ITエンジニア / 診療情報管理士 / 上級医療情報技師 / 医用画像情報専門技師 フクダ電子株式会社に所属 ※本日の発表内容は所属企業と関係ありません TypeScript / Vue.js / Node.js / Java / C# / PHP - 3兄弟の父、休日は習い事の送り迎えとか... - 参加している勉強会 札幌PHP勉強会 ゆるWeb勉強会 JBUG札幌 JavaDO えびてく クラメソ札幌IT勉強会（仮） AWS初心者LT会in札幌 札幌すごいAI会 札幌IT石狩鍋 hokkaido.js 函館本線沿線勉強会 JPUG-Ezo VueSapporo さっぽろ医療IT勉強会 ※運営
3. INDEX - 医療現場の課題 - Issues in Clinical Practice - Vueによる実装の考え方 - Implementation Approach in Vue - 動的組み立て式UI - Dynamic UI Composition - デモ - Demo - まとめ - Summary
4. 医療現場の課題 - Issues in Clinical Practice 「誰が」、「どこで」見るかによって、最適なUIが異なる 患者情報 何を What Patient Information どこで Where 誰が Who 医師が、 循環器内科病棟で 見たい情報 循環器内科病棟 ICU その他 Cardiology Ward Intensive Care Unit Others 医師 薬剤師 Physician Pharmacist 臨床工学 技士 CE 医師 薬剤師 Physician Pharmacist 臨床工学技士が、 ICUで 見たい情報 臨床工学 技士 CE 医師 薬剤師 Physician Pharmacist 臨床工学 技士 CE
5. Vueによる実装の考え方 - Implementation Approach in Vue - 単一ファイルコンポーネント (SFC) HTML・JS・CSSを1つの .vue ファイルにまとめ、患者情報やバイタルサインなどの画面部品を独立して開発する。 - 動的コンポーネント (Dynamic Components) <component :is> を使い、職種や病棟に応じた設定から表示するSFCを動的に切り替える。 - 非同期コンポーネント (Async Components) defineAsyncComponent と動的 import() を使い、画面に必要なSFCだけを遅延読み込みして、初期ロードを軽量化する。
6. 動的組み立て式UI - Dynamic UI Composition レイアウト設定（データ） 設定・位置情報 const layout = [ { id: 'patient', column: 0, row: 0 }, { id: 'obsFull', column: 1, row: 0 }, { id: 'dates', column: 2, row: 0 }, ] 動的コンポーネント <component v-for="item in layout" :key="item.id" :is="widgets[item.id]" /> 配置する
7. DEMO ICカード + PIN
8. DEMO 医師 × 循環器内科病棟 医師 × ICU
9. DEMO 薬剤師 × ICU 臨床工学技士 × ICU
10. まとめ SFCで実現する病院・医療システムの動的組み立て式UI - 画面を部品化 … 単一ファイルコンポーネント (SFC) - 設定データから画面を動的に生成 … 動的コンポーネント - 必要なコンポーネントだけを読み込む … 非同期コンポーネント 「誰が」、「どこで」、「いつ」といったきめ細やかなニーズを実現するために、 Vue.js の動的組み立て式 UI は効果的です。 ご清聴ありがとうございました。