ここ最近、複数ページあるWebサイトを構築するときに11tyを使う機会が多いです。
SSGすらほとんど使ったことのなかった私ですが、実際に11tyを使った感想をつらつら書いていきます。
そもそも11tyとは
11tyとはSSG（静的サイトジェネレーター）のひとつで、同じレイアウトのページを複数作る際などにとっても便利です。
土台となるテンプレートをひとつ用意し、それを各ページで読み込んで生成します。
ヘッダーやフッターなど共通で使う部分はコンポーネント化し、テンプレート側で読み込んでおくと、各ページごとのファイルがとてもすっきりして管理がしやすくなります。
私の場合、HTMLは11tyと相性の良いとされるNunjucksで記述しています。
Pug等も使えるようですが、試したことがないので機会があればやってみます。。
感想① jsonでのデータ管理が便利
metaの内容だったり、サイトマップの情報だったりをjson化することで、HTMLにベタ書きせずにページ固有のものを反映することもでき、とても使いやすいなと思いました。
下記の繰り返し処理と繋がってきますが、「記事一覧」などを作る際にも役立ちました。
11ty使い始めのときは、これが便利すぎてなんでもjson化していました。。笑
[
{
"title": "記事ページ1",
"txt": "記事ページ1のテキスト",
"image": "thumb_01.png"
},
{
"title": "記事ページ2",
"txt": "記事ページ2のテキスト",
"image": "thumb_02.png"
},
]
HTMLに直接書いてしまうと、要素が増えたり減ったりする際の修正が少々面倒ですが、jsonにまとめてあると手間も少ないかなと思います。
感想② 繰り返し処理が使いやすい
<ul class="list">
{%- for list in lists %}
<li class="list__item">
<h2 class="list__item__title">{{ list.title }}</h2>
<p class="list__item__text">{{ list.txt }}</p>
<div class="m_present_list__item__image"><img src="images/{{ list.image }}" alt="{{ list.title }}"></div>
</li>
{%- endfor %}
</ul>
これはjsonと組み合わせて使うことがほとんどでしたが、for文を書けるのはすごい楽でした。
「記事一覧」のように、サムネイル画像とタイトル・キーワードを記事ページ分表示するレイアウトなども、上記のjsonに中身の情報をまとめ、それをfor文を使ったテンプレートで処理することでスッキリスッキリです。
一覧のうちいくつかだけ特殊なデザインやマークをつけたい等も、jsonでフラグを立てておけばifを使って分岐ができるので、結構柔軟に制作ができました。
感想③ 学習コストが低い
NunjucksがHTMLの書き方に近いので、新しく覚えなきゃいけないことが少なくとっつきやすい印象です。
11ty自体の導入も簡単にできますし、私個人としてはめちゃくちゃ行き詰まることはそんなにありませんでした。
11tyの機能でfilterを作ったりできるので、カスタマイズをしようとすると少々難しいですが、特に処理を作らず使うのであればとても導入しやすいのではないかと思います。
まとめ
他にたくさんのSSGを使ってきたわけではないので、他との比較はできませんが
個人的にはとても使いやすくて好きなSSGです。
開発環境を作るときも、悩んだら11ty入れがちです。笑
今後カスタマイズも挑戦してみたいので、そのときはまた記事にして投稿したいと思います。