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

Embed

Start on current slide

Slide 1

Slide 1 text

「バイトル」のTypeScriptリニューアル〜積み上がったレガシーとパフォーマンスに挑む現在地〜ディップ横⼭隼 2026/05/23 TSKaigi 2026

Slide 2

Slide 2 text

横⼭隼 Yokoyama Hayato ディップ株式会社プロダクトソリューション部メディアWeb開発課 2022年新卒⼊社現在の仕事バイトルの求職者向けサイトのリニューアル主にフロントエンド

Slide 3

Slide 3 text

× “Labor force solution company” ⼈材サービスとDXサービスの提供を通して、労働市場における諸課題を解決し、誰もが働く喜びと幸せを感じられる社会の実現を⽬指します。 VISION Human work force solution ユーザーファーストな独⾃機能を搭載した、求⼈情報‧⼈材紹介サービスの提供を通じて、ユーザーの就業課題を解決しています。⼈材サービス事業 Digital labor force solution バイトコミュニケーションアプリ『バイトルトーク』や、機能を絞ったシンプルなSaaS型の『コボット』を通じて、職場環境やコミュニケーション課題を解決しています。 DX事業

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Copyright © DIP Corporation, All rights reserved. サービスの成⻑に伴って「技術的負債」は溜まってきた ● JavaScriptで動いているため型安全性がなく、動かすまでバグに気付けない ● グローバルスコープのCSS (Sass) で、1つ直すとどこに影響があるか分からない ● テストが形骸化している‧存在しない ● ライブラリのバージョンをあげるだけでもきつい

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Copyright © DIP Corporation, All rights reserved. TypeScript ⾔語 React Router (framework mode) フレームワーク CSS Modules スタイリング Vite 8 ビルド Rolldown Oxlint / Oxfmt リンター / テスト Vitest TypeSpec API定義 / 型⽣成 Orval React 技術スタック

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

外部リソースの⾮同期読み込み外部リソースの事前接続画像の遅延読み込み

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

Slide 35

Slide 35 text

Slide 36

Slide 36 text

Slide 37

Slide 37 text

Slide 38

Slide 38 text

Slide 39

Slide 39 text

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Copyright © DIP Corporation, All rights reserved. 📝 ⼤きすぎるチャンクは動的インポートに切り出す ● 動画再⽣ボタンが押されてから動画再⽣ライブラリをインポート ● 検索バーがタップされたら、検索のシートコンポーネントをインポート ✅ 初期転送量を削減し、ロード時間を改善 📝 ⼩さすぎるチャンクは束ねる ● アイコンライブラリを1つに束ねる ● デザインシステムを1つに束ねる

Slide 42

Slide 42 text

Slide 43

Slide 43 text

Slide 44

Slide 44 text

Copyright © DIP Corporation, All rights reserved. ちょっとずつ改善出来てきている ● ⾚(Poor) → ⻩(Needs Improvement) 、⻩(Needs Improvement) → 緑 (Good) になった。⼀段ずつ改善中 ● パフォーマンスは、⼩さなベストプラクティスの積み重ね ● 正直、TypeScript単体の部分での改善はあまり出来なかった tsconﬁgの "verbatimModuleSyntax": true , "isolatedModules": true などの挙動がモダンバンドラーのデフォルトになっている ● TypeScript, Viteの最新のエコシステムに乗ること⾃体が⼤きな最適化になった