Eleventy(イレブンティ、11ty)は、JavaScriptで実装された軽量な静的サイトジェネレータで、Zach Leatherman氏によって2018年に公開されたオープンソースツールです。Node.jsで動作し、Markdown・Nunjucks・Liquid・Handlebars・EJSなど複数のテンプレートエンジンを自由に組み合わせて使える柔軟性が特徴です。設計思想として「シンプルでフレームワークレス、出力されるHTMLは可能な限り素直」を掲げており、ReactやVueに依存せず純粋なHTML・CSSで完結する高速サイトを作れる点が、Webパフォーマンス志向のエンジニアから高く評価されています。Gatsbyのような大型フレームワークとは対照的に、設定ファイル一つで始められる手軽さがあり、ブログ・ポートフォリオ・小規模ドキュメントなど幅広い用途で採用されています。
この記事の目次
- Eleventyが注目される三本柱
- Eleventyでサイトを作る基本ステップ
- Eleventyと他ジェネレータの比較
- Eleventy導入時の確認ポイント
- まとめ
Eleventyが注目される三本柱
Eleventyの最大の特徴は、複数のテンプレートエンジンを混在させて使える点にあります。MarkdownはMarkdown、レイアウトはNunjucks、データファイルはJavaScriptといった具合に、各ファイルに最適なエンジンを個別に選べるため、既存のテンプレート資産を活かしつつ移行することが可能です。これによりJekyllからの引っ越し組やHandlebarsに慣れた開発者など、多様な背景を持つチームでもストレスなく導入できます。複数エンジン対応はEleventy独自の強みで、他のジェネレータには見られない設計思想です。
二つ目の柱は徹底した軽量設計で、出力されるHTMLにJavaScriptフレームワークのランタイムが含まれないため、ページ読み込みが極めて高速です。これはCore Web VitalsやLighthouseスコアの観点で大きなアドバンテージとなり、SEO重視のサイトやモバイル中心の読者層を持つメディアで特に効果を発揮します。さらに最小構成では設定ファイルすら不要で、空のディレクトリにMarkdownファイルを置いてコマンドを叩くだけでサイトが生成される点も、初学者の学習コストを下げる重要な要素です。
Eleventyでサイトを作る基本ステップ
Eleventyでサイト構築を始める手順は非常にシンプルで、まずNode.js環境を用意し、プロジェクトディレクトリで「npm init」を実行してpackage.jsonを作成します。続いて「npm install @11ty/eleventy --save-dev」コマンドでEleventy本体をインストールすれば準備完了です。テンプレートエンジンの選択は不要で、用意したMarkdownファイルやNunjucksファイルを認識して自動でHTMLに変換します。設定をカスタマイズしたい場合のみ、ルートに.eleventy.jsファイルを作成して入出力ディレクトリやプラグインを指定します。
コンテンツの執筆はMarkdownファイルを任意のディレクトリ構造で配置するだけで、URLパスは自動的にファイルパスから生成されます。レイアウトはNunjucksなどのテンプレートで定義し、フロントマターからlayoutを指定すれば適用されます。開発時は「npx @11ty/eleventy --serve」コマンドでローカルサーバを起動し、ブラウザライブリロードでプレビューできます。ビルド時は単に「npx @11ty/eleventy」を実行するとデフォルトで_siteディレクトリに静的ファイルが出力されるため、それをCDNやホスティングサービスにデプロイするだけで公開完了です。煩雑な設定が不要なため、執筆と公開のサイクルを高速に回せます。
Eleventyと他ジェネレータの比較
Eleventyは同じJavaScript系ジェネレータであるGatsbyやNext.jsとよく比較されますが、設計思想は対極にあります。GatsbyやNextはReactを中核に据え、GraphQLによるデータ取得層やコンポーネント指向のUI設計を前提としているため、フロントエンドエンジニアにとっては馴染みやすい一方で、出力HTMLにJavaScriptランタイムが含まれパフォーマンスが重くなりがちです。Eleventyはこれらに対し「フレームワーク依存しない素のHTML出力」を貫いており、シンプルさと表示速度を最優先する設計です。
一方でEleventyの弱点は、リッチなインタラクティブUIや動的なクライアントサイドロジックを組み込む場合に、自分でビルドパイプラインを設計する必要がある点です。Reactコンポーネントをそのまま使いたい場合や、Vercel・Netlifyの動的機能を全面活用したい場合は、Next.jsやAstroの方が向いています。逆にコンテンツ中心のブログ・ポートフォリオ・キャンペーンサイトなど、表示速度とシンプルさを重視する用途ではEleventyが圧倒的に有利です。プロジェクトの方向性に応じて、フレームワークの重さと機能性のバランスを見極めて選ぶことが重要です。
Eleventy導入時の確認ポイント
Eleventyを実プロジェクトに導入する際にチェックしておきたい点を整理しましょう。まずNode.jsのバージョンが対応範囲内であるかを確認し、できればLTS版を使うのが安全です。次に複数のテンプレートエンジンを使える反面、チーム内で記法が混在すると保守性が下がる恐れがあるため、プロジェクト開始時にどのエンジンを主軸にするか決めておくことを推奨します。Nunjucksは表現力が高く人気の選択肢です。
プラグインの互換性も重要なポイントで、Eleventyは比較的新しいバージョンが頻繁にリリースされるため、特に画像最適化やシンタックスハイライト系のサードパーティプラグインは公式リポジトリの対応状況を確認しましょう。デプロイ先としてはNetlify・Cloudflare Pages・Vercelが定番で、いずれもEleventyの自動ビルドに対応しています。画像処理については@11ty/eleventy-img公式プラグインが優秀で、レスポンシブ画像のWebP変換やリサイズを自動化できるため、Webパフォーマンスを重視するなら導入を検討する価値があります。
まとめ
Eleventyは「シンプルで素直なHTML出力」を貫くJavaScript製静的サイトジェネレータで、フレームワークに縛られず軽量な静的サイトを最短ルートで構築できるのが最大の魅力です。複数テンプレートエンジンの併用、ゼロ設定起動、優れたパフォーマンスを兼ね備え、ブログ・ポートフォリオ・小規模ドキュメント用途で堅実な選択肢といえます。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント