拡張メタ言語を使用して静的ホームページを簡単に作成する
ちょっとしたホームページやブログを作成するとき、どのように作成しているでしょうか？
最初はhtmlやcssをそのままテキストエディタなどで書いて作成していたが、ページ数が多くなるにつれ管理が大変になり、ワードプレスといったような支援システムを使って作成するようになったという人もいるかと思います。
phpなどを使いたいが、レンタルサーバー代を抑えたり、サーバーにはhtmlファイルだけおいて管理を簡単にしたい、という人には拡張メタ言語やテンプレートエンジンを使用するのをおすすめします。
拡張メタ言語とは
プログラミングに馴染みのない方には聞きなれない言葉かもしれません。メタというのは置いといて、cssやhtmlなどの言語にいろいろな便利な機能を拡張した言語のことです。
たとえばcssに変数を使用したり、htmlのヘッダ部分やフッタ部分を共通化したりすることができます。
gulp
拡張メタ言語で書いたファイルをサーバーに置いてアクセスしても、ブラウザ（コンピューター）は認識できません。
拡張メタ言語で書いたファイルはcssやhtmlなどのブラウザが理解できる言語に変換する必要があります。
gulpというツールを使用すれば拡張メタ言語からcss,htmlなどの言語への変換が簡単にできるようになります。詳しい使い方はgulp|gulpの基本的な使い方でしています。
LESS
cssの拡張メタ言語には、LESSがあります。詳しい紹介はless|cssに変数を使い実装を効率化する方法でしています。
Nunjucks
htmlの拡張メタ言語にはejs,swig,Nunjucksなどがあります。
htmlの場合は拡張メタ言語よりもテンプレートエンジンという呼び方をすることが多いようです。swig|htmlのヘッダ・フッタの共通化などで実装を効率化するでswigの基本的な使い方について説明しています。
私は今までswigを使用することが多かったのですが、ホームページの規模が大きくなってくると、もっといろいろな便利な機能が使いたくなり、ネットでいろいろと調べてみたところ、Nunjucksというテンプレートエンジンが評判がよかったので使ってみました。
いろんな便利な機能があるのでとてもお勧めなのですが、日本語のページがほとんどどなかったので、nunjucks/basicで基本的な使い方を紹介します。