TSKaigi 2026 - 10秒のビルドを1秒へ：tsdownが切り拓く2026年のTypeScriptライブラリ開発

このスライドは TSKaigi 2026 の登壇に使用したスライドのアーカイブになります。

チームラボでは、フロントエンドエンジニアを募集しています。
少しでも、チームラボにご興味をお持ち頂けましたら、採用ページをご覧頂けますと幸いです。
https://www.team-lab.com/recruit/

Transcript

1. © teamLab Inc. 10秒のビルドを1秒へ： tsdownが切り拓く2026年のTypeScript ライブラリ開発 irie チームラボ パッケージチーム 所属
2. © teamLab Inc. 所属｜ 2 自己紹介 2 チームラボ パッケージチーム フロントエンド班 irie 福岡出身 福岡→鹿児島→東京 うどんがすき
3. © teamLab Inc. tsdownの紹介 4
4. © teamLab Inc. tsdownとは？ の前に 5
5. © teamLab Inc. tsdownとは？ tsupについて軽く紹介 6
6. © teamLab Inc. tsupについて TypeScriptライブラリ開発者に向けた、簡単に配布できるようにするための　　 バンドラです。 7 TypeScriptライブラリ向けバンドラー 配布を容易にするための設計 esbuildベース 高速なビルドパフォーマンスを実現 ほぼゼロコンフィグ 手軽に開始可能 （with no config,とあるが設定ファイルは必要） メンテナンス終了と移行 積極的メンテナンスは停止。 後継の tsdown への移行を推奨
7. © teamLab Inc. ライブラリバンドラとは？ 他のプロジェクトですぐに使える状態にすること 8 TypeScriptやJSX（ReactやSolid etc）、 Vueコンポーネントといったソースコード 他のプロジェクトで直接利用できる 出力形式に変換
8. © teamLab Inc. 辛いポイント ライブラリを公開する時に遭遇する辛いポイント 9 複雑な設定 プラグインの競合 複数フォーマット etc パフォーマンス 型生成
9. © teamLab Inc. tsdownとは？ そんなあなたにtsdown 10
10. © teamLab Inc. tsdownとは？ • シンプルさ と速さを重視して設計された、　TypeScript ライブラリ開発者の負担を大幅に軽減する次世代のラ イブラリバンドラ • tsupの実質的な後継 11
11. © teamLab Inc. tsdownとは？ • シンプルさ と速さを重視して設計された、　TypeScript ライブラリ開発者の負担を大幅に軽減する次世代のラ イブラリバンドラ 12
12. © teamLab Inc. tsdownのシンプルさ シンプル is ベスト 13
13. © teamLab Inc. tsdownのシンプルさ tsupと同じくゼロコンフィグで使える デフォルトの設定が優秀なので、tsdown.configで設定しなくてもある程度使える ことが多い 14 出力形式がesm .d.ts の生成 clean設定 etc…
14. © teamLab Inc. tsdownのシンプルさ Rollupプラグイン、Rolldownプラグイン、unplugin、さらには一部のViteプラグイン をサポートしている 開発者は既存の豊富なプラグインをそのまま利用することで効率的に開発ができる 15
15. © teamLab Inc. tsdownの速さ 速度は「正義」 16
16. © teamLab Inc. tsdownの速さ tsdownはビルドの速さを強みにしている rolldownをベースにしているため、パフォーマンスに優れている 17 https://rolldown.rs/guide/introduction
17. © teamLab Inc. tsdownの速さ typescript関連のライブラリを作成する上で厄介なのが、d.tsの生成です。 d.tsがないとライブラリ利用者は型の恩恵を得ることが難しくなります。 が、 基本的にd.tsを生成するためには、tsc が必要になります 18 これが遅い
18. © teamLab Inc. tsdownの速さ tsdownでは、型生成のため rolldown-plugin-dts を利用している。 内部で、oxcを利用するかtscを利用するのかを判定してd.tsを生成する 19 { "compilerOptions": { "isolatedDeclarations": true } } tsconfig.ts
19. © teamLab Inc. tsdownの速さ 実験的機能ではありますが tsgoも利用できます！！ 速度がどのくらい早くなるのかについて はこのあと 20 https://tsdown.dev/reference/api/Interface.DtsOptions#tsgo
20. © teamLab Inc. tsupからの移行と速度比較 21
21. © teamLab Inc. tsupからの移行 現在はアクティブメンテナンスは終了している。 その移行先として、tsdownが推奨されている 22 https://github.com/egoist/tsup
22. © teamLab Inc. tsupからの移行 tsupからの移行はコマンドが用意されているので比較的簡単 23 https://tsdown.dev/guide/migrate-from-tsup > npx tsdown-migrate
23. © teamLab Inc. tsupからの移行 実際に移行してみよう 24
24. © teamLab Inc. tsupからの移行 https://github.com/shadcn-ui/ui/tree/main/packages/shadcn こちらのパッケージで移行を試してみます 25 PR自体はすでに作成されています https://github.com/shadcn-ui/ui/pull/9953 差分はこれだけです✨
25. © teamLab Inc. tsupからの移行 気になる速度については、、、 26 tsup tsdown
26. © teamLab Inc. tsupからの移行 気になる速度については、、、 27 tsdown/tsgo 👑
27. © teamLab Inc. 2026年の選択肢としてのtsdown 28
28. © teamLab Inc. rolldownの1.0が公開 2026/05/07にrolldownの安定版が正式にリリースされました🎉 https://voidzero.dev/posts/announcing-rolldown-1-0 29
29. © teamLab Inc. viteとの連携 将来的には、viteのLibraryモードの基盤となるようことが明記 (すでにvite 8からはtsdownと同じくrolldownやoxcを利用するようになっている） 30 https://tsdown.dev/guide/#key-differences-between-tsdown-and-rolldown
30. © teamLab Inc. vite+へ搭載 vite+にも搭載済み 31 https://viteplus.dev/#feature-run
31. © teamLab Inc. tsdownの安定版リリースへ 現状はまだ v0.22.0 が最新版 rolldownのv1が正式リリースされた中でtsdownのv1へのリリースが高まっている （個人の感想です😊） 32
32. © teamLab Inc. まとめ 33
33. © teamLab Inc. まとめ • 「速さ」によく注目されるが「シンプルさ」もtsdownの強み ◦ rolldownやoxcによって爆速 ◦ ライブラリを配布する時の難しさを隠蔽し、ライブラリ製作者への負荷を軽減 • tsdownはあくまで選択肢の一つ ◦ 選択肢はたくさんある。それぞれの好みやそれでしかできないことなどから自分のプロジェ クトにあった選択肢を取るべき • 利用していて、ビルド速度にストレスを感じたら、tsdownに移行してみるの はかなりお勧め ◦ tsupからの移行は楽なので一番お勧め 34
34. © teamlab Inc. irie チームラボ パッケージチーム 所属 10秒のビルドを1秒へ：tsdownが切り拓く2026年のTypescriptライブラリ開発 ご清聴ありがとうございました
35. © teamLab Inc We’re Hiring! サマーインターンシップ応募受付中！