assembleで作る小規模サイト 第1回 assembleの特徴
短期集中連載の第1回目は、静的なサイトを作るのに便利な、assembleというGruntプラグインを紹介します。大きなサイトには向きませんが、そこまでページ数のないサイトを作る場合、手軽に利用できて便利なツールです。
- カテゴリー
- Jamstack >
- 静的サイトジェネレーター
発行
assembleは開発がストップしているツールです。公式サイトはありますが、このシリーズの情報は古いバージョンに基づいて書かれているため、そのまま適用することはできません。
assembleとは
今回紹介するのは、assemble（アセンブル）というツールです。これは、小規模なサイトを作るとき、手軽に利用できるツールで、Gruntプラグインとして動作します。
このassembleというもの、これは以前にCodeGridでも紹介したJekyll*と、ほとんど同じようなことをしてくれるツールです。所定のファイルをコンパイルすることで、HTMLを生成してくれます。
*注：Jekyll
CodeGridでは「Jekyllで作るシンプルWebサイト」シリーズで、Jekyllを紹介しています。
assembleを使うと、データベースやサーバーサイドのプログラムを準備しなくても、手元にあるHTMLファイルを部分的にインクルードしたり、JSONやYAMLからデータを読んでページ内にそれを反映したりすることができます。assembleは静的なサイトを作るのを、手助けしてくれるツールなのです。このあたりの機能は、Jekyllとまったく同じです。ご存じない方は、以下のJekyllの記事で確認してみてもらえればと思います。
このassemble、はっきり言うと、やれることはJekyllとたいして変わりないのですが、筆者としてはJekyllよりも手軽に使えると感じました。
もしちょっとしたしたサイト、たとえば、なにか自分でJavaScriptのライブラリなどを作ったときに、その紹介のために用意するような簡単なサイト、つまりHTML数枚からなるようなサイトを作る場合には、assembleがぴったりです。assembleの方が手軽に使え、のちのちも便利に使えそうなので、今回、assembleを紹介しようと考えました。
お手軽ポイント：Gruntのプラグイン
まずassembleのよいポイントとして、これがGruntプラグインであるという点が挙げられます。最近、フロントエンド界隈では、Gruntはかなり流行したため、スタンダードな存在となってきているように感じます。Gruntが使えるのであれば、assembleも手軽に使えるという点が、まずひとつめのポイントであると筆者は感じました。
筆者は、自身のブログをJekyllで作ったことがあります。ですが、ブログ記事を書き、しばらくぶりに更新しようと思っても、普段からJekyllを使っていないと、スッとコマンドが思い出せないことがありました。
これに対し、Gruntは毎日のように使っています。なので、assembleでサイトをコンパイルするのであれば、使い方をすぐに忘れてしまうような事態は、あまりなさそうに思います。
まぁ、しかしこれは、筆者が年中Gruntを使っているからというだけのことではないか？ と言われれば、その通りなのですが、同じようにGruntだったら使ってるよという人は多いのではないでしょうか。ほかのプラグインと同じくnpm install assemble --save-devでインストール完了です。
Gruntについては、CodeGrideにも解説がありますので、よろしければご覧ください。
ちなみにJekyllをGruntで使いたい！ というだけであれば、GruntからJekyllの種々のコマンドを叩いてくれる、grunt-jekyllというプラグインも存在します。
お手軽ポイント：Handlebarsを使える
もうひとつ、私がassembleを気に入った理由は、これがHandlebarsというテンプレートエンジンを利用していたためです。Handlebarsは、JavaScript製のテンプレートエンジンです。これもCodeGridで以前解説したことがありますので、ご興味ありましたらご覧ください。
一方、Jekyllは、Liquidというテンプレートエンジンを使っています。
このLiquidというテンプレートエンジンが、イケていないなどと言うつもりはさらさらありません。ただ、たまにJekyllを使おうと思っていざテンプレートを書こうとすると、このLiquidを使う機会が、自分にとってはほぼ皆無であるため、逐一調べながら書くこととなります。結果、それなりに時間がかかってしまうのです……。
これに対し、HandlebarsはWebアプリ的な設計を行う際、業務でも使うことがよくあるものなのです（これもまた、お前の場合はな……という感じではありますが）。テンプレートエンジンはさまざまものがありまして、どれがスタンダードか？ というのは、なんともはっきりしない感じです。ただその中でも、Handlebarsはなかなか広く使われている印象があります。
Ember.jsというフレームワークにも採用されていたり、Gruntの公式プラグインとして、Handlebarsをプリコンパイル*するものを見かけます。海外のスクリーンキャストで、Rails＋Backbone.jsでWebアプリの作り方を解説しているのを見たことがあるのですが、そこでもHandlebarsが採用されていたりなどといったことがありました。
*注：プリコンパイル
Handlebarsはそれなりに高機能なのですが、そのぶん、比較的処理負荷がかかるという弱点があるようです。ブラウザの処理負荷を減らすため、Handlebarsのテンプレート処理を、非常に単純なJavaScriptの文字列結合処理に置き換えてくれるのが、プリコンパイルという処理であり、これを行ってくれるのがgrunt-contrib-handlebarsというGruntプラグインです。
テンプレートエンジンは、最近、JavaScriptを書く人の間では、ちょこちょこ利用する機会が増えてきたのではないかと感じます。どれもそこまで劇的な違いがあるわけではないテンプレートエンジンではありますが、その記法を覚えるのには、やはり、多少の学習時間が必要でしょう。
そんなわけで、フロントエンド周りの開発者であれば、それなりに触る機会のあるHandlebarsでテンプレートが書けるのは、ひとつ、嬉しい点であると考えてよいのではないかと思います。assembleを使っていれば、Handlebarsの使い方も頭に入ってきます。ちなみにassembleでは、Handlebars以外のテンプレートエンジンを選択することもできるようです*。
*注：テンプレートエンジンの設定
assembleのドキュメントによれば、Handlebars以外のテンプレートエンジンもinit関数に指定することで、使えるようになるとのことです。
お手軽ポイント：YAMLを使える
これはそれほど強調するポイントでもないのですが、データの形式にYAMLが使える点が、便利な点でした。ちょっとしたテンプレートエンジンを使って、Gruntで、ごく数枚のHTMLを生成するということは、そこそこJavaScriptを触っている人であれば、少し時間をかければできそうなことではあります。ただ、「ああ、JSON手書きするの面倒だな……」と思ったらYAMLでやるかなどと思ってくるわけです。そういったちょっとしたものを作るにも、やはり、多少の時間はかかってしまうわけです。
そんなとき、そんなちょっとしたことを、手軽にチョイチョイとやってくれて、なおかつ学習コストがそんなに高くないというのが、このassembleのいいところかなと思います。
assembleが有効なケース
assembleが有効なケースというのは、そこまで多くないかもしれません。開発者だけがサイトをいじるのであればよいのですが、そうでない人もコンテンツを管理したいとなったら、CMSなりブログなりといった仕組みが必要です。
また、動的な仕組みが必要であれば、RailsなりPHPなりでサイトを構築する必要が出てきます。このほか、とても多くのページがあるサイトも、assembleが最適とは言いがたいです。結局のところassembleがやってくれるのは、単純なテンプレート処理です。ページ数が増えれば、その処理もかなり増えてくるわけで、コンパイルに時間がかかってしまうことになるでしょう。
しかしながら、サーバーにSSIなりPHPなりを設定しなくても、簡単なインクルードや、データを元にしたテンプレート処理が行えるのは、ページ数の少ないサイトにとっては重宝する機能です。そして、その学習コストが低いとなれば、このassembleが活躍する機会も、それなりにあるかと思います。
実際、ピクセルグリッドでも、小規模なサイトに、このassembleを導入してみましたが、手軽で便利に利用できました。同じようなケースが思い当たる方は、この機会にGruntやHandlebarsの学習がてら、assembleを試してみるのもよいのではないでしょうか。
まとめ
今回はassembleの概要、利点を紹介し、どのようなケースで有効に使えそうかを解説しました。次回は、assembleの基本的な機能を解説します。