Slide 1

Slide 1 text

© teamLab Inc. 10秒のビルドを1秒へ: tsdownが切り拓く2026年のTypeScript ライブラリ開発 irie チームラボ パッケージチーム 所属

Slide 2

Slide 2 text

© teamLab Inc. 所属| 2 自己紹介 2 チームラボ パッケージチーム フロントエンド班 irie 福岡出身 福岡→鹿児島→東京 うどんがすき

Slide 3

Slide 3 text

© teamLab Inc. tsdownの紹介 4

Slide 4

Slide 4 text

© teamLab Inc. tsdownとは? の前に 5

Slide 5

Slide 5 text

© teamLab Inc. tsdownとは? tsupについて軽く紹介 6

Slide 6

Slide 6 text

© teamLab Inc. tsupについて TypeScriptライブラリ開発者に向けた、簡単に配布できるようにするための   バンドラです。 7 TypeScriptライブラリ向けバンドラー 配布を容易にするための設計 esbuildベース 高速なビルドパフォーマンスを実現 ほぼゼロコンフィグ 手軽に開始可能 (with no config,とあるが設定ファイルは必要) メンテナンス終了と移行 積極的メンテナンスは停止。 後継の tsdown への移行を推奨

Slide 7

Slide 7 text

© teamLab Inc. ライブラリバンドラとは? 他のプロジェクトですぐに使える状態にすること 8 TypeScriptやJSX(ReactやSolid etc)、 Vueコンポーネントといったソースコード 他のプロジェクトで直接利用できる 出力形式に変換

Slide 8

Slide 8 text

© teamLab Inc. 辛いポイント ライブラリを公開する時に遭遇する辛いポイント 9 複雑な設定 プラグインの競合 複数フォーマット etc パフォーマンス 型生成

Slide 9

Slide 9 text

© teamLab Inc. tsdownとは? そんなあなたにtsdown 10

Slide 10

Slide 10 text

© teamLab Inc. tsdownとは? ● シンプルさ と速さを重視して設計された、 TypeScript ライブラリ開発者の負担を大幅に軽減する次世代のラ イブラリバンドラ ● tsupの実質的な後継 11

Slide 11

Slide 11 text

© teamLab Inc. tsdownとは? ● シンプルさ と速さを重視して設計された、 TypeScript ライブラリ開発者の負担を大幅に軽減する次世代のラ イブラリバンドラ 12

Slide 12

Slide 12 text

© teamLab Inc. tsdownのシンプルさ シンプル is ベスト 13

Slide 13

Slide 13 text

© teamLab Inc. tsdownのシンプルさ tsupと同じくゼロコンフィグで使える デフォルトの設定が優秀なので、tsdown.configで設定しなくてもある程度使える ことが多い 14 出力形式がesm .d.ts の生成 clean設定 etc…

Slide 14

Slide 14 text

© teamLab Inc. tsdownのシンプルさ Rollupプラグイン、Rolldownプラグイン、unplugin、さらには一部のViteプラグイン をサポートしている 開発者は既存の豊富なプラグインをそのまま利用することで効率的に開発ができる 15

Slide 15

Slide 15 text

© teamLab Inc. tsdownの速さ 速度は「正義」 16

Slide 16

Slide 16 text

© teamLab Inc. tsdownの速さ tsdownはビルドの速さを強みにしている rolldownをベースにしているため、パフォーマンスに優れている 17 https://rolldown.rs/guide/introduction

Slide 17

Slide 17 text

© teamLab Inc. tsdownの速さ typescript関連のライブラリを作成する上で厄介なのが、d.tsの生成です。 d.tsがないとライブラリ利用者は型の恩恵を得ることが難しくなります。 が、 基本的にd.tsを生成するためには、tsc が必要になります 18 これが遅い

Slide 18

Slide 18 text

© teamLab Inc. tsdownの速さ tsdownでは、型生成のため rolldown-plugin-dts を利用している。 内部で、oxcを利用するかtscを利用するのかを判定してd.tsを生成する 19 { "compilerOptions": { "isolatedDeclarations": true } } tsconfig.ts

Slide 19

Slide 19 text

© teamLab Inc. tsdownの速さ 実験的機能ではありますが tsgoも利用できます!! 速度がどのくらい早くなるのかについて はこのあと 20 https://tsdown.dev/reference/api/Interface.DtsOptions#tsgo

Slide 20

Slide 20 text

© teamLab Inc. tsupからの移行と速度比較 21

Slide 21

Slide 21 text

© teamLab Inc. tsupからの移行 現在はアクティブメンテナンスは終了している。 その移行先として、tsdownが推奨されている 22 https://github.com/egoist/tsup

Slide 22

Slide 22 text

© teamLab Inc. tsupからの移行 tsupからの移行はコマンドが用意されているので比較的簡単 23 https://tsdown.dev/guide/migrate-from-tsup > npx tsdown-migrate

Slide 23

Slide 23 text

© teamLab Inc. tsupからの移行 実際に移行してみよう 24

Slide 24

Slide 24 text

© teamLab Inc. tsupからの移行 https://github.com/shadcn-ui/ui/tree/main/packages/shadcn こちらのパッケージで移行を試してみます 25 PR自体はすでに作成されています https://github.com/shadcn-ui/ui/pull/9953 差分はこれだけです✨

Slide 25

Slide 25 text

© teamLab Inc. tsupからの移行 気になる速度については、、、 26 tsup tsdown

Slide 26

Slide 26 text

© teamLab Inc. tsupからの移行 気になる速度については、、、 27 tsdown/tsgo 👑

Slide 27

Slide 27 text

© teamLab Inc. 2026年の選択肢としてのtsdown 28

Slide 28

Slide 28 text

© teamLab Inc. rolldownの1.0が公開 2026/05/07にrolldownの安定版が正式にリリースされました🎉 https://voidzero.dev/posts/announcing-rolldown-1-0 29

Slide 29

Slide 29 text

© teamLab Inc. viteとの連携 将来的には、viteのLibraryモードの基盤となるようことが明記 (すでにvite 8からはtsdownと同じくrolldownやoxcを利用するようになっている) 30 https://tsdown.dev/guide/#key-differences-between-tsdown-and-rolldown

Slide 30

Slide 30 text

© teamLab Inc. vite+へ搭載 vite+にも搭載済み 31 https://viteplus.dev/#feature-run

Slide 31

Slide 31 text

© teamLab Inc. tsdownの安定版リリースへ 現状はまだ v0.22.0 が最新版 rolldownのv1が正式リリースされた中でtsdownのv1へのリリースが高まっている (個人の感想です😊) 32

Slide 32

Slide 32 text

© teamLab Inc. まとめ 33

Slide 33

Slide 33 text

© teamLab Inc. まとめ ● 「速さ」によく注目されるが「シンプルさ」もtsdownの強み ○ rolldownやoxcによって爆速 ○ ライブラリを配布する時の難しさを隠蔽し、ライブラリ製作者への負荷を軽減 ● tsdownはあくまで選択肢の一つ ○ 選択肢はたくさんある。それぞれの好みやそれでしかできないことなどから自分のプロジェ クトにあった選択肢を取るべき ● 利用していて、ビルド速度にストレスを感じたら、tsdownに移行してみるの はかなりお勧め ○ tsupからの移行は楽なので一番お勧め 34

Slide 34

Slide 34 text

© teamlab Inc. irie チームラボ パッケージチーム 所属 10秒のビルドを1秒へ:tsdownが切り拓く2026年のTypescriptライブラリ開発 ご清聴ありがとうございました

Slide 35

Slide 35 text

© teamLab Inc We’re Hiring! サマーインターンシップ応募受付中!