--- title: Next.js × OpenAPIで型安全なデータ境界を設計するアーキテクチャ改善 tags: #wealthnavi #フロントエンド #tskaigi author: [ウェルスナビ株式会社 技術広報チーム](https://docswell.com/user/WN_Tech-PR) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/2JVV4YKRJQ.jpg?width=480 description: TSKaigi2026のスポンサーセッションで使用した資料です。 詳細：https://2026.tskaigi.org/talks/79 published: May 23, 26 canonical: https://docswell.com/s/WN_Tech-PR/527N4E-2026-05-21-125241 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/2JVV4YKRJQ.jpg) Next.js × OpenAPIで型安全な データ境界を設計する アーキテクチャ改善 2026.05.23 TSKaigi 2026 ⼟本 祐介 1 # Page. 2 ![Page Image](https://bcdn.docswell.com/page/5EGL19Q6JL.jpg) ⾃⼰紹介 土本 祐介（Tsuchimoto Yusuke） ウェルスナビ株式会社 MAP開発チーム / フロントエンド開発 ウェルスナビでは ● 24卒としてウェルスナビに入社 ● React、Next.js 、TypeScriptを使って新規サービスのフロントエンド を担当しています ひとこと ● 初のTSKaigi登壇でご飯が喉を通らないほど、緊張しております。 よろしくお願いいたします！ © WealthNavi Inc. All Rights Reserved. 2 # Page. 3 ![Page Image](https://bcdn.docswell.com/page/4JQYDWK27P.jpg) プロダクト紹介 全⾃動の資産運⽤サービス ウェルスナビ 「⻑期‧積⽴‧分散」でリターンの最⼤化をめざす 1万円から運⽤できる 全⾃動でおまかせできる リスクを抑えて運⽤できる NISAも⾃動で活⽤できる ※画面はイメージです © WealthNavi Inc. All Rights Reserved. 3 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/K74WZKPPE1.jpg) これからのウェルスナビ 個⼈向け ⾦融プラットフォーム お客さまそれぞれのお⾦の悩みを総合的にサポート お客様のお⾦に関するデータを取得 様々なリスクを総合的に診断 中⽴的な⽴場から総合的にアドバイス 定期的にリスクと商品を⾒直し ※現時点では構想段階で未提供。将来的に提供する可能性があるサービス領域 © WealthNavi Inc. All Rights Reserved. 4 # Page. 5 ![Page Image](https://bcdn.docswell.com/page/LJ1YRX9XEG.jpg) 1. 背景と課題 2. Data Access Layerの導⼊ 3. 導⼊の効果‧コスト 4. まとめ 5 # Page. 6 ![Page Image](https://bcdn.docswell.com/page/GJWG1NQK72.jpg) 1 背景と課題 © WealthNavi Inc. All Rights Reserved. 6 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/4EZLP3WN73.jpg) 組織変更により、これまで関わりのなかった 異なるチームのリポジトリのPRをレビューすること になった私 7 @2026 WealthNavi Inc. # Page. 8 ![Page Image](https://bcdn.docswell.com/page/Y76WMXG97V.jpg) ⾒慣れないPageコンポーネントのコードで、 『どんな情報を、どう処理しているのか』を 把握しようと読み始めました。 そこで知った実態が、、、 8 @2026 WealthNavi Inc. # Page. 9 ![Page Image](https://bcdn.docswell.com/page/G75MZXVD74.jpg) 神コンポーネント と 型の横流し 9 @2026 WealthNavi Inc. # Page. 10 ![Page Image](https://bcdn.docswell.com/page/9J29RXXMER.jpg) 背景：Data Access Layerの導⼊前 Server Component (ex.page.tsx) Client Component Backend （Spring Boot） API通信 データの加工・集約 DTO Open APIから 生成した型を長く 利用し続けていた コマンドで型を自 動生成 10 <Library> openapi-typescript @2026 WealthNavi Inc. # Page. 11 ![Page Image](https://bcdn.docswell.com/page/DEY4D88PJM.jpg) 課題 課題 実装把握の困難さ ○ Pageコンポーネントが「データの取得‧加⼯‧エラー判定」ロジックを担う。 UIが求める要件が埋もれ、 仕様把握に多⼤な時間を要する レビュープロセスの停滞 ○ ロジックの修正と表⽰の修正が癒着し、変更箇所が局所化されない。影響範囲の 特定に全体の理解が必要になり、レビューの質と速度が低下 スキーマ変更のUI波及 ○ UI層がOpenAPIから⽣成された型を直接参照。スキーマの変更がUI層まで波及、 コンパイルエラーが発⽣し、修正‧確認などが発⽣する可能性があった 11 @2026 WealthNavi Inc. # Page. 12 ![Page Image](https://bcdn.docswell.com/page/VJNY6QQM78.jpg) 課題を解決しようと⾊々調べていく。 そんなある⽇、 12 @2026 WealthNavi Inc. # Page. 13 ![Page Image](https://bcdn.docswell.com/page/YE9PLDDWJ3.jpg) Data Access Layer（DAL）を発⾒ 13 @2026 WealthNavi Inc. # Page. 14 ![Page Image](https://bcdn.docswell.com/page/GE8DX33RED.jpg) 調べてみる 14 @2026 WealthNavi Inc. # Page. 15 ![Page Image](https://bcdn.docswell.com/page/LELM8VV27R.jpg) Data Access Layer（DAL）とは？ 定義： ● データをいつどのように取得するか、また何をレンダーコンテキストに渡すかを 制御する内部ライブラリ 満たすべき要件： ● サーバー上でのみ（server-only）実⾏される ● 認可チェックを実⾏する ● 安全で最⼩限のデータ転送オブジェクト（DTO）を返す 出典：https://nextjsjp.org/docs/app/guides/data-security 15 @2026 WealthNavi Inc. # Page. 16 ![Page Image](https://bcdn.docswell.com/page/4JMY6GG9JW.jpg) もしかしたら、、、Data Access Layer 使えば今の課題を解決してくれるのでは？ 16 @2026 WealthNavi Inc. # Page. 17 ![Page Image](https://bcdn.docswell.com/page/PJR9PZZ979.jpg) 導入への期待 ● バックエンドのスキーマ変更をDAL内に閉じ込め、UI層への 影響波及をなくしたい ● UI層は「表示」に特化させ、「画面の表示内容の変更」という 理由で変更したい 課題の解決を⽬指し、Data Access Layer（DAL）導入 17 @2026 WealthNavi Inc. # Page. 18 ![Page Image](https://bcdn.docswell.com/page/PEXQ3993JX.jpg) 2 1 Data Access Layerの導⼊ © WealthNavi Inc. All Rights Reserved. 18 # Page. 19 ![Page Image](https://bcdn.docswell.com/page/3EK9YPPNED.jpg) 解決策：Data Access Layerの導⼊後 【Before】DAL導⼊前 Server Component (ex.page.tsx) API通信 データの加工・集約 Client Component Backend （Spring Boot） DTO Open APIから 生成した型を長く 利用し続けていた コマンドで型を自 動生成 <Library> openapi-typescript 【After】DAL導⼊後 DAL Client Component Server Component (ex.page.tsx) DTO 表示用に 作成した型 Service データの 加工・集約 19 Backend （Spring Boot） Repository API通信 DTO Open API から生成した型 @2026 WealthNavi Inc. # Page. 20 ![Page Image](https://bcdn.docswell.com/page/L73W9XXZ75.jpg) 3 1 導⼊の効果‧コスト © WealthNavi Inc. All Rights Reserved. 20 # Page. 21 ![Page Image](https://bcdn.docswell.com/page/87DKG224JG.jpg) 導⼊効果‧コスト DAL導⼊以前の課題 実装把握の困難さ ○ ロジック集中による仕様把 DAL導⼊後（効果） ✅ 実装把握の認知負荷の軽減 ○ DALのメソッドを通じて『何を表 握の認知負荷増⼤ コスト ⚠ メンバーへDALなどの 考えを浸透させるコスト ⽰に使うか』だけを記述 ⚠アーキテクチャの修正コ レビュープロセスの停滞 ○ 変更箇所の分散による、 ✅ レビューの質と速度の向上 スト ○ 各層の責務に集中してレビュー 影響範囲の特定が困難 ✅ スキーマ変更の影響範囲をDAL内部 スキーマ変更のUI波及 に隔離 ○ APIの変更が画⾯に影響し、 ○ UIの再確認や再レビューが不要に エラーが発⽣し修正などが なり、修正ファイル数や確認範囲 発⽣する可能性 を縮⼩ 21 長期的な 開発効率を生む @2026 WealthNavi Inc. # Page. 22 ![Page Image](https://bcdn.docswell.com/page/VJPK311VE8.jpg) 4 1 まとめ © WealthNavi Inc. All Rights Reserved. 22 # Page. 23 ![Page Image](https://bcdn.docswell.com/page/2EVV4YYREQ.jpg) まとめ 長期的に、コントロールできる状態を維持し続ける DAL（Data Access Layer）を設けて、 ● コンポーネントの認知負荷を最⼩化 ○ データ取得‧加⼯の記述をDALへ集約し、コンポーネントを⼀読するだけで表⽰要件 が把握できる環境を整えた ● レビュー時の品質と速度を向上 ○ 加⼯ロジックと表⽰ロジックを分離。レビューのチェックポイントが明確になり、確 認の品質と速度を向上させた ● UI専⽤DTOによるバックエンドの変更を局所化する設計 ○ バックエンドのスキーマ変更による影響範囲をDAL内部に限定し、UIの再確認や レビュー範囲を縮⼩した 23 @2026 WealthNavi Inc. # Page. 24 ![Page Image](https://bcdn.docswell.com/page/57GL1996EL.jpg) ご清聴ありがとうございました 24 @2026 WealthNavi Inc. # Page. 25 ![Page Image](https://bcdn.docswell.com/page/4EQYDWW2JP.jpg) 【重要な注意事項】 ● 本資料は、断定的判断を提供するものではなく、情報を提供することのみを⽬的としており、いか なる種類の商品も勧誘するものではありません。最終的な決定は、お客様⾃⾝で判断するものと し、当社はこれに⼀切関与せず、また、⼀切の責任を負いません。 ● 本資料には将来の出来事に関する予想が含まれている場合がありますが、それらは予想であり、ま た、本資料の内容の正確性、信頼性、完全性、適時性等を⼀切保証するものではありません。本資 料に基づいて被ったいかなる損害についても、当社は⼀切の責任を負いません。また、当社は、新 しい情報や将来の出来事その他の情報について、更新⼜は訂正する義務を負いません。 ● 本資料を利⽤することによりお客様に⽣じた直接的損害、間接的損害、派⽣的損害その他いかなる 損害についても、当社は⼀切の責任を負いません。 商号等：ウェルスナビ株式会社 金融商品取引業者 関東財務局長（金商） 第2884号 加入協会：日本証券業協会、一般社団法人 資産運用業協会 25 @2026 WealthNavi Inc.