Tweet
Tweet

Slide 1

Slide 1 text

Eleventy3.0 で始める爆速個人ブログ開発！ 大木尊紀 - BuriKaigi2025 LT

Slide 2

Slide 2 text

大木 尊紀 デザインエンジニア デザインとエンジニアリングが交わるところが最近の主戦場。 プロダクト開発の他にデザインシステムの開発・運用や アクセシビリティ改善にも取り組んでいる。 自己紹介

Slide 3

Slide 3 text

Eleventy概説

Slide 4

Slide 4 text

Eleventy Eleventy is a simpler static site generator シンプルなJavaScript製静的サイトジェネレーター わりと前からある（v0.1.0リリースは8年前！） https://github.com/11ty/eleventy/blob/v0.1.0/ README.md

Slide 5

Slide 5 text

Eleventyの良いところ：1 めちゃくちゃ 手軽に始められる ビルドも早い 薄い

Slide 6

Slide 6 text

Eleventyの良いところ：2 いろいろなテンプレートに対応

Slide 7

Slide 7 text

Eleventyの良いところ：3 プラグインが書きやすい https://www.11ty.dev/docs/plugins/#creating-a-plugin

Slide 8

Slide 8 text

Eleventy3.0で できるようになったこと

Slide 9

Slide 9 text

Eleventy3.0 https://www.11ty.dev/blog/eleventy-v3/

Slide 10

Slide 10 text

Full support for ESM https://www.11ty.dev/docs/cjs-esm/

Slide 11

Slide 11 text

TypeScript / JSX / MDX Templates JSX, TSX, MDXがテンプレート として使えるようになった！ 今まではViteなどを使って自前でビルドする必要があったが、標準でJSX、TSXが使える ※ Reactが動くわけではない！

Slide 12

Slide 12 text

Full support for ESM → TypeScript 設定ファイルをTypeScriptで 書けるようになった！ 詳細はこちらのブログにあるよ https://bennypowers.dev/posts/typescript-11ty-config/

Slide 13

Slide 13 text

Eleventy 3.0 馴染みのある書き方ができるように なったので、より使いやすく！ Nunjucksから開放されるの嬉しくて嬉しくてたまらないと思ってたけど 少しさみしい気もする

Slide 14

Slide 14 text

Full support for ESM → TypeScript FrontMatter内でJSが使えるように

Slide 15

Slide 15 text

Astroとどう違う？

Slide 16

Slide 16 text

2年前… https://speakerdeck.com/takanorip/astroteshi-merubao-su-ge-ren-saitokai-fa

Slide 17

Slide 17 text

Astroとの比較 Eleventy ) 薄く余計な機能がなV ) カスタマイズ性が高い、自分でいろいろやる必要があE ) 本当に静的なウェブサイト向き（ブログとか） Astro ) ReactやVueなどのコンポーネントが動作する、動的なサイトを作ることを意識していE ) 全部いい感じに面倒見てくれるリッチなフレームワーク

Slide 18

Slide 18 text

Eleventy3.0を よろしくお願いします！