【TSKaigi2026登壇資料】バイトル」のTypeScriptリニューアル — 積み上がったレガシーとパフォーマンスに挑む現在地

Transcript

1. 「バイトル」のTypeScriptリニューアル 〜 積み上がったレガシーとパフォーマンスに挑む現在地 〜 ディップ 横⼭ 隼 2026/05/23 TSKaigi 2026
2. 横⼭ 隼 Yokoyama Hayato ディップ株式会社 プロダクトソリューション部メディアWeb開発課 2022年 新卒⼊社 現在の仕事 バイトルの求職者向けサイトのリニューアル 主にフロントエンド
3. × “Labor force solution company” ⼈材サービスとDXサービスの提供を通して、労働市場における諸課題を解決し、 誰もが働く喜びと幸せを感じられる社会の実現を⽬指します。 VISION Human work force solution ユーザーファーストな独⾃機能を搭載した、 求⼈情報‧⼈材紹介サービスの提供を通じて、 ユーザーの就業課題を解決しています。 ⼈材サービス事業 Digital labor force solution バイトコミュニケーションアプリ『バイトルトーク』や、 機能を絞ったシンプルなSaaS型の『コボット』を通じて、 職場環境やコミュニケーション課題を解決しています。 DX事業
4. Copyright © DIP Corporation, All rights reserved. 📝 本⽇お話しすること 弊社プロダクト「バイトル」のリニューアルで取り組んだパフォーマンス改善のお話をします。 王道な取り組みから、ちょっとニッチな事例まで、 プロダクトを選ばず、明⽇から取り組めるものもご紹介します。 "⾃分のチームでも試せそう" と思えるものを1つでも持ち帰っていただけたら幸いです。
5. Copyright © DIP Corporation, All rights reserved. 20年超えの歴史を持つ アルバイト求⼈サービス
6. Copyright © DIP Corporation, All rights reserved. インターネットの家庭普及率が18%程度だった2002年 「バイトル」サービス開始
7. Copyright © DIP Corporation, All rights reserved. スマホ普及率が4%だった2010年 ガラケー全盛期に「動画」で仕事探しができる機能を実装
8. Copyright © DIP Corporation, All rights reserved. 2024年⽇本初となる対話型バイト探しサービス 「dip AI AGENT」をリリース
9. Copyright © DIP Corporation, All rights reserved. サービスは成⻑を続けている
10. Copyright © DIP Corporation, All rights reserved. サービスの成⻑に伴って「技術的負債」は溜まってきた • JavaScriptで動いているため型安全性がなく、動かすまでバグに気付けない • グローバルスコープのCSS (Sass) で、1つ直すとどこに影響があるか分からない • テストが形骸化している‧存在しない • ライブラリのバージョンをあげるだけでもきつい
11. Copyright © DIP Corporation, All rights reserved. サービスの成⻑に伴って「技術的負債」は溜まってきた • JavaScriptで動いているため型安全性がなく、動かすまでバグに気付けない • グローバルスコープのCSS (Sass) で、1つ直すとどこに影響があるか分からない • テストが形骸化している‧存在しない • ライブラリのバージョンをあげるだけでもきつい ➡ 事業の成⻑を⽀えられない
12. Copyright © DIP Corporation, All rights reserved. そんな経緯もありバイトルを今 リニューアル
13. Copyright © DIP Corporation, All rights reserved. TypeScript ⾔語 React Router (framework mode) フレームワーク CSS Modules スタイリング Vite 8 ビルド Rolldown Oxlint / Oxfmt リンター / テスト Vitest TypeSpec API定義 / 型⽣成 Orval React 技術スタック
14. Copyright © DIP Corporation, All rights reserved. ✅ 型安全性を⼿に⼊れて、動かすまで気付かないバグが消えた ✅ テストもちゃんと書けるようになった ✅ 型に守られて、AI駆動で開発が爆速になった
15. Copyright © DIP Corporation, All rights reserved. 万全に進めてきた リニューアル
16. Copyright © DIP Corporation, All rights reserved. 負荷テストで 本番相当の負荷を流すと
17. Copyright © DIP Corporation, All rights reserved. ......
18. Copyright © DIP Corporation, All rights reserved.
19. Copyright © DIP Corporation, All rights reserved.
20. Copyright © DIP Corporation, All rights reserved.
21. Copyright © DIP Corporation, All rights reserved.
22. Copyright © DIP Corporation, All rights reserved.
23. Copyright © DIP Corporation, All rights reserved. 型もテストもあるから、AIで仕様通りに動くものはサクサク作れた。 API,DB などの⼀部は既存のものを継承する設計だった。 結果、どかっと機械的に負荷をかけたら、改善点が⾒つかった。
24. Copyright © DIP Corporation, All rights reserved. 型もテストもあるから、AIで仕様通りに動くものはサクサク作れた。 API,DB などの⼀部は既存のものを継承する設計だった。 結果、どかっと機械的に負荷をかけたら、改善点が⾒つかった。 ➡ やるしかない
25. Copyright © DIP Corporation, All rights reserved. TypeScriptのパフォーマンス改善 • 型チェック‧コンパイルにかかる時間を短縮すること • JavaScriptにコンパイルされた後、⾼速に動くこと
26. Copyright © DIP Corporation, All rights reserved. TypeScriptのパフォーマンス改善 • 型チェック‧コンパイルにかかる時間を短縮すること • JavaScriptにコンパイルされた後、⾼速に動くこと ←今回 狙うはこっち
27. Copyright © DIP Corporation, All rights reserved. まず「低コストかつ効果が⼤きそうなもの」を中⼼に取り組んだ
28. Copyright © DIP Corporation, All rights reserved. 画像の軽量化やWebP変換
29. Copyright © DIP Corporation, All rights reserved. loading="lazy" / fetchpriority="high" / rel="preconnect" など リソースの読み込み優先度やタイミングの調整 <img src="thumb.jpg" loading="lazy" /> <link rel="preconnect" href="https://fonts.googleapis.com" /> <script async src="https://example.com/script.js"></script> 外部リソースの⾮同期読み込み 外部リソースの事前接続 画像の遅延読み込み
30. Copyright © DIP Corporation, All rights reserved. Cache-Control ヘッダーの設定し 可能な限りCDNキャッシュから配信 "Cache-Control": "public, max-age=31536000, immutable" ハッシュ付きの静的アセット
31. Copyright © DIP Corporation, All rights reserved. かなり効果はあった 👍
32. Copyright © DIP Corporation, All rights reserved. もうちょっとミクロな問題への取り組みも 1. 計測‧広告タグのメインスレッド占領によるパフォーマンス低下 2. ⼤量に分割されたJavaScript,CSSによるリクエスト数増加 3. Core Web Vitalsを可視化できていない
33. Copyright © DIP Corporation, All rights reserved. もうちょっとミクロな問題への取り組みも 1. 計測‧広告タグのメインスレッド占領によるパフォーマンス低下 2. ⼤量に分割されたJavaScript,CSSによるリクエスト数増加 3. Core Web Vitalsを可視化できていない
34. Copyright © DIP Corporation, All rights reserved. 現バイトルから受け継いだ 計測‧広告タグの積み重なりによるパフォーマンスの悪化 • ⻑年の機能拡張に応じて、計測‧広告タグが肥⼤ • 初期ロード時にメインスレッドが⻑時間占有され、 Core Web Vitals（特にTBT） が悪化した ⚠ リニューアルでも計測‧広告タグの多くを引き継ぐ
35. Copyright © DIP Corporation, All rights reserved. requestIdleCallback() で計測タグが 描画とユーザー操作をブロックしないようにする requestIdleCallback() でアイドル状態になったタイミングで、 スクリプトが発⽕するように調整
36. Copyright © DIP Corporation, All rights reserved. もうちょっとミクロな問題への取り組みも 1. 計測‧広告タグのメインスレッド占領によるパフォーマンス低下 2. ⼤量に分割されたJavaScript,CSSによるリクエスト数増加 3. Core Web Vitalsを可視化できていない
37. Copyright © DIP Corporation, All rights reserved. JavaScriptやCSSが過剰に分割され リクエスト数が増加していた
38. Copyright © DIP Corporation, All rights reserved. バンドルを可視化して改善点を特定
39. Copyright © DIP Corporation, All rights reserved. バンドルを可視化して改善点を特定 ➡ ⼤きなチャンクを動的インポートで切り出したり ⼩さすぎるチャンクを束ねたり、チャンク戦略を⾒直す
40. Copyright © DIP Corporation, All rights reserved. 📝 ⼤きすぎるチャンクは動的インポートに切り出す • 動画再⽣ボタンが押されてから動画再⽣ライブラリをインポート • 検索バーがタップされたら、検索のシートコンポーネントをインポート 📝 ⼩さすぎるチャンクは束ねる • アイコンライブラリを1つに束ねる • デザインシステムを1つに束ねる
41. Copyright © DIP Corporation, All rights reserved. 📝 ⼤きすぎるチャンクは動的インポートに切り出す • 動画再⽣ボタンが押されてから動画再⽣ライブラリをインポート • 検索バーがタップされたら、検索のシートコンポーネントをインポート ✅ 初期転送量を削減し、ロード時間を改善 📝 ⼩さすぎるチャンクは束ねる • アイコンライブラリを1つに束ねる • デザインシステムを1つに束ねる
42. Copyright © DIP Corporation, All rights reserved. もうちょっとミクロな問題への取り組みも 1. 計測‧広告タグのメインスレッド占領によるパフォーマンス低下 2. ⼤量に分割されたJavaScript,CSSによるリクエスト数増加 3. Core Web Vitalsを可視化できていない
43. Copyright © DIP Corporation, All rights reserved. New RelicでCore Web Vitalsを可視化
44. Copyright © DIP Corporation, All rights reserved. ちょっとずつ改善出来てきている • ⾚(Poor) → ⻩(Needs Improvement) 、 ⻩(Needs Improvement) → 緑 (Good) になった。⼀段ずつ改善中 • パフォーマンスは、⼩さなベストプラクティスの積み重ね • 正直、TypeScript単体の部分での改善はあまり出来なかった tsconfigの "verbatimModuleSyntax": true , "isolatedModules": true などの 挙動がモダンバンドラーのデフォルトになっている • TypeScript, Viteの最新のエコシステムに乗ること⾃体が⼤きな最適化になった
45. dip_tech Copyright © DIP Corporation, All rights reserved. 最後に
46. Copyright © DIP Corporation, All rights reserved. まだまだ道の途中です パフォーマンス改善の余地はまだ沢⼭あります。 リニューアルしきれていない機能もあります。 テスト、デザインシステムなど、まだまだ整えるところもあります。
47. We are hiring ⼀緒に変⾰に挑戦する仲間を募集中です！