webpack依存からの脱却！快適フロントエンド開発をViteで実現する #vuefes

by 弁護士ドットコム

Slide 1

Slide 1 text

弁護士ドットコム株式会社 Nobuaki Kambe webpack 依存からの脱却！快適フロントエンド開発を Vite で実現する 2025年10月25日

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

© 2025 Bengo4.com, inc. VISION まだないやり方で、世界を前へ。 Drive a paradigm shift for the better world. MISSION ｢プロフェッショナル・テック｣で、次の常識をつくる。 Be the Professional-Tech Company. プロフェッショナルだからできること。専門知とテクノロジーで、社会に貢献する。 4

Slide 5

Slide 5 text

© 2025 Bengo4.com, inc. 5 5 5 税理士に無料で相談・検索できる日本最大級の税務相談ポータルサイト最新の法改正や実務について分かりやすく解説する日本最大級の企業法務ポータルサイトクラウドサインは、弁護士ドットコムが運営するサービスです OUR SERVICE AI基盤技術「 LegalBrain 1.0」を組み込んだリーガル特化型 AIエージェント契約の締結から管理までデジタルで完結させる契約マネジメントプラットフォーム時事問題の弁護士解説を中心としたメディア日本最大級の無料法律相談ポータルサイト弁護士事務所、企業法務職向け人材紹介事業

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

© 2025 Bengo4.com, inc. 組織の拡大 ● エンジニアの人数が年々増加 ● 機能要求の多様化 AI 時代の開発が加速（ Claude Code、Cursor、GitHub Copilot、Kiro等） ● 開発のスピードアップを実現前提：クラウドサインの状況 ● クラウドサインは、2025年10月19日で10周年 ● レガシーなライブラリと共存しながら webpack でビルドしていた従来の開発環境における課題 9 節目

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

© 2025 Bengo4.com, inc. 13 ● バグ修正、 Hotfix対応で迅速な反映ができない ● 長い待ち時間により集中力が切れてコンテキストスイッチが難しい ● 1日に複数回デプロイするため、トータルでのタイムロスが大きい課題従来の開発環境における課題開発生産性の課題開発環境でかかっていた “ 待ち時間 ” ● ビルド時間：約 90秒 ● 開発サーバー起動時間：約 90秒 ● HMR反映時間：約 4秒

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

© 2025 Bengo4.com, inc. 17 解決策 Vite の特徴 ● 事前バンドルで esbuild を使用している（Go 言語で開発） ● JavaScript ベースよりも 10 倍から 100 倍高速 ● ネイティブな ES module で動的に配信 ● 一部、ブラウザに処理を移譲している開発モード esbuild 本番モード ● 柔軟なプラグインの追加が可能 ● 最適化が優れているため、バンドルサイズを小さくすることができる（圧縮・Tree-shaking 等） Rollup

Slide 18

Slide 18 text

© 2025 Bengo4.com, inc. 18 解決策 Vite の特徴 ● 事前バンドルで esbuild を使用している（Go 言語で開発） ● JavaScript ベースよりも 10 倍から 100 倍高速 ● ネイティブな ES module で動的に配信 ● 一部、ブラウザに処理を移譲している開発モード esbuild 本番モード Rollup 全てのファイルをバンドルする従来のバンドルベースの開発と代わり、必要な時に必要なモジュールを読み込むネイティブ ESM ベースとなっている ● 柔軟なプラグインの追加が可能 ● 最適化が優れているため、バンドルサイズを小さくすることができる（圧縮・Tree-shaking 等）

Slide 19

Slide 19 text

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

© 2025 Bengo4.com, inc. 25 ● build.outDir ： public/vite配下を指定 ● build.manifest ： manifest.jsonという文字列を指定。これにより、build.outDir からの相対パスとしてファイルを出力することが可能（true だと.vite/manifest.jsonになる） ● build.emptyOutDir ： true を指定。これにより、ビルド時に出力先のディレクトリを空にすることができる ※manifest.json の有無で環境を判定できるようにするための対応 build: { 　　　... outDir: '../go/src/bengo4/cloudsign/public/vite', manifest: 'manifest.json', emptyOutDir: true, }, Vite の設定ファイル

Slide 26

Slide 26 text

© 2025 Bengo4.com, inc. 26 ● Vite dev serverとGo のサーバーを連携させるためプロキシと HMR の統合の設定をする ● この設定により、開発時でもログイン状態や認証の維持が可能となっている server: { port: 8080, host: 'localhost', proxy: { '^/(?!src/|node_modules/|@vite/client|@id/).*': { target: {proxyTargetUrl}, changeOrigin: true } }, hmr: { protocol: 'wss', host: 'localhost', port: 8080 } } Vite の設定ファイル

Slide 27

Slide 27 text

© 2025 Bengo4.com, inc. 27 manifest.json の中身の例 ● 本番環境時にサーバー側がこの構造を見てどのファイルを読み込むか、ファイルに対して依存しているファイルが何かが記載されている https://ja.vite.dev/guide/backend-integration // Record 構造になっています // 各チャンクは、 ManifestChunk インターフェイスに従っています "src/pc/pages/DashboardIndex/index.ts": { "file": "js/DashboardIndex.min.js", "name": "DashboardIndex", "src": "src/pc/pages/DashboardIndex/index.ts", "isEntry": true, "imports": [ "_vendor.min.js", "_index.min.js", "_CsButton.min.js", "_CsInput.min.js", "_CsDialog.min.js", ... ] }, ... }

Slide 28

Slide 28 text

© 2025 Bengo4.com, inc. 28 "scripts": { "dev": "rm -rf ../go/src/bengo4/cloudsign/public/vite/** && vite", "build": "vue-tsc && vite build", }, 環境判定の仕組み ● manifest.json の存在チェックで環境を判定するようにした ○ manifest.json 有り...prd 環境 ○ manifest.json 無し...dev 環境 ● npm run dev を実行した時に明示的なパスを指定して、viteの中身を削除している（manifest.jsonも削除される） ● npm run build を実行した時は、build.outDirの指定先にmanifest.json を生成している

Slide 29

Slide 29 text

© 2025 Bengo4.com, inc. 29 Backendの対応 ● Go側でアプリケーション起動時に、InitVite という関数を発火するようにしている ※アプリケーション起動時＝ revel.onAppStart ● manifest.json の存在を確認して、 isRunDevServer という変数に存在する・しないの bool 値を設定 ● その変数をフロント側に渡すことで本番環境 or 開発環境かを判定している var ( isRunDevServer bool viteManifest ViteManifest ) func InitVite() { var err error manifestFile, err := os.Open("./public/vite/manifest.json") if err != nil { revel.AppLog.Error("Vite Failed to open manifest.json", err) // vite/manifest.json が存在しない場合は dev server で動作しているとする isRunDevServer = true return } defer manifestFile.Close() if err := json.NewDecoder(manifestFile).Decode(&viteManifest); err != nil { revel.AppLog.Error("Vite Failed to decode manifest.json", err) // エラーの場合も開発モードとして扱う isRunDevServer = true return } ... isRunDevServer = false }

Slide 30

Slide 30 text

© 2025 Bengo4.com, inc. 30 revel.TemplateFuncs["js"] = func(entryPoint string) string { // 開発サーバーで動作している場合 if isRunDevServer { // 開発サーバーのパスを返す return fmt.Sprintf("/%s", entryPoint) } // manifest.json が存在しない場合 if viteManifest == nil { return "" } // 指定されたエントリーポイントが manifest.json に存在しない場合 entry, ok := viteManifest[entryPoint] if !ok { return "" } // エントリーポイントに file プロパティが存在しない場合 if entry.File == "" { return "" } return fmt.Sprintf("/vite/%s", entry.File) } 　 js：entryPoint に対応する js のパスを返す Backendの対応〈 Go の関数の中身〉　 isRunDevServer：開発サーバーで　動作しているかを判定する　 appendif：value がゼロ値ではない場合に　　 append を実行する revel.TemplateFuncs["appendif"] = func(viewArgs map[string]any, key string, value any) template.JS { if truth, _ := template.IsTrue(value); !truth { return template.JS("") } if viewArgs[key] == nil { viewArgs[key] = []any{value} } else { viewArgs[key] = append(viewArgs[key].([]any), value) } return template.JS("") } revel.TemplateFuncs["isRunDevServer"] = func() bool { return isRunDevServer }

Slide 31

Slide 31 text

© 2025 Bengo4.com, inc. 31 {{- appendif . "moreScripts" (js "src/pc/pages/AccountLogin/index.ts") -}} Frontendの対応　共通HTMLテンプレート　各ページの HTMLテンプレート ※ AI を駆使して、約150のページ全てを一括実装 {{- if not isRunDevServer -}} {{- end -}} {{if isRunDevServer}} {{end}} ● 共通テンプレートで環境別の処理 ● 各ページのテンプレートは対応しているエントリーファイルを渡して読み込む ● CSSは全てのファイルをまとめている（ vite/css/style.css に出力）ポイント

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

© 2025 Bengo4.com, inc. 34 実装 CSS 統合 CSS 統合 CSS 分割各ページで必要なスタイルを読み込むため、ページ移動のたびに新しい CSS をダウンロードする必要がある設定ファイルが複雑になってしまう（出力された manifest.json の中身を見て、依存している css を取得...）最初に全部の CSS を読み込むのは時間がかかる複雑な設定が不要（オプション１つの指定でOK） CSS を読み込んでしまえば、以降はキャッシュにより早く表示が可能こちらを選択 CSS分割・統合のメリット・デメリット

Slide 35

Slide 35 text

© 2025 Bengo4.com, inc. 35 実装 CSS 統合 build: { 　　　... 　　　cssCodeSplit: false, }, CSSをまとめる方向で決定 https://ja.vite.dev/config/build-options.html#build-csscodesplit メリット・デメリットとクラウドサインのサービスの使用用途上、 2回目以降のパフォーマンスが大事になってくることから CSS をまとめることに決定実装も、build.cssCodeSplit のオプションを false にするだけでOK