Slide 1

Slide 1 text

Denoでフロントエンド開発 2025年春版 fukuoka.ts #3 pixiv Inc. 森内建太 petamoriken 2025.3.21

Slide 2

Slide 2 text

2 自己紹介 ● Web  エンジニア ● Deno コントリビューター ● ECMAScript  や  Web 標準 を追うのが好き petamoriken カスタマーオペレーション &セーフティ本部 オペレーション開発部 Stage 4 

Slide 3

Slide 3 text

3 ● 権限機能(secure by default) ○ npm 依存にマルウェアが混入した場合への防衛 ● 開発者体験(DX)の向上 ○ TypeScript 型チェック、Lint、Formatterが付属 ● まだ 100% Node.js 互換を達成しているとは言えない ○ 所見  Deno v2.2 で結構動作するようにはなった Node.js の代わりに Deno を使う

Slide 4

Slide 4 text

4 ● 特に新規プロジェクトで Deno を採用するのがおすすめ ○ ただし Next.js は(サポートしているが)厳しい ● 弊部署では社内ツールのビルドなどに Deno を使っている Vite + React + TanStack Router フロントエンド開発に Deno を使う

Slide 5

Slide 5 text

5 https://kt3k.github.io/talk_deno_frontend

Slide 6

Slide 6 text

6 ここからライブコーディング

Slide 7

Slide 7 text

7 (VS Code で公式の拡張を使う場合)

Slide 8

Slide 8 text

8

Slide 9

Slide 9 text

9

Slide 10

Slide 10 text

10

Slide 11

Slide 11 text

11

Slide 12

Slide 12 text

12 🎉

Slide 13

Slide 13 text

13 https://docs.deno.com/deploy/tutorials/vite/

Slide 14

Slide 14 text

14 ● 権限機能(secure by default) ○ npm 依存にマルウェアが混入した場合への防衛 ● 開発者体験(DX)の向上 ○ TypeScript 型チェック、Lint、Formatterが付属 ● まだ 100% Node.js 互換を達成しているとは言えない ○ 所見  Deno v2.2 で結構動作するようにはなった Node.js の代わりに Deno を使う(再掲)