静的サイトジェネレーターEleventy（11ty）が遂にv1.0.0に

川口敬士郎
2022.01.11
- #HTML・CSS

技術の移り変わりが激しいWeb界隈、フロントエンドといえばReact、Vue.jsなど一般的にJavaScriptフレームワークが真っ先に頭に浮かびますが、普通のホームページ制作（あくまで弊社の現場）では使わないことが多いです。（Reactは好きです）
※Reactは公式ではライブラリと表記されています

フレームワークをバリバリ使った開発もしてみたい反面、もっとシンプルに効率的にホームページを制作したい！と思い2年ほど前からEleventyを密かに追っていました。

Eleventyは日本語記事が少なく有名というよりファンの多いというイメージでご存じない方もいると思います。
Twitterでは結構盛り上がっています（自分もファンの１人だからそう感じるだけかも）

ようやくバージョン1.0.0にもなりましたので、Eleventyの紹介も兼ねて記事にしたいと思います。

※Eleventyを使った環境構築を説明する記事ではございません

Eleventyとは

Eleventyは「シンプルな静的サイトジェネレーター」で、特にWebサイトを作る（生成）するのに向いているツールです。
さまざまなテンプレート言語で開発でき、最終的にはHTMLファイルを書き出します。

Gatsby（React）やNuxt.js（Vue.js）でも静的サイトジェネレートは可能ですが、どちらかというとWebアプリケーションを作るためのツールで特殊な記述やルールが多くEleventyと比べると学習コストも高めです。

開発者に優しいEleventy

以下の点で、Eleventyは開発者に優しいツールだと思っています。

Eleventy自体の開発が活発（2022.01時点）
開発時のディレクトリ構造を保ったままビルドが可能
レイアウト機能、別ファイル化したコンポーネントの読み込み
ReactやVue.jsなどフレームワークに依存しない
開発用のサーバーを起動できる（内部的にBrowserSyncが使用されているので設定を変更できたりする）
テンプレート言語の選択肢が豊富（10種類！！）
HTML（*.html）,Markdown（*.md）,JavaScript（*.11ty.js）,Liquid（*.liquid）,Nunjucks（*.njk）,Handlebars（*.hbs）,Mustache（*.mustache）,EJS（*.ejs）,Haml（*.haml）,Pug（*.pug）
HTMLで開発できる（テンプレート言語で開発するが、jsx等は使わずHTMLライクに書けます）

無いとは思いますが、あるファイルはNunjucksで、あるファイルはPugで書くなんてこともできます。
また、ver1.0.0からカスタムテンプレート言語も利用可能で、.vueや.jsxなど任意の言語も対象に追加することができます。