入門
第1回 assembleの特徴

短期集中連載の第1回目は、静的なサイトを作るのに便利な、assembleというGruntプラグインを紹介します。大きなサイトには向きませんが、そこまでページ数のないサイトを作る場合、手軽に利用できて便利なツールです。

2013年09月12日発行

目次

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の基本的な機能を解説します。

高津戸 壮
高津戸 壮
フロントエンド・エンジニア

Web制作会社、フリーランスを経て、株式会社ピクセルグリッドに入社。数多くのWebサイト、WebアプリケーションのHTML、CSS、JavaScript実装に携わってきた。受託案件を中心にフロント周りの実装、設計、テクニカルディレクションを行う。スケーラビリティを考慮したHTMLテンプレート設計・実装、JavaScriptを使った込み入ったUIの設計・実装を得意分野とする。 著書に『改訂版 Webデザイナーのための jQuery入門』(技術評論社、2014年11月14日)がある。 CSS Nite 2011ベストセッションにおいて、全170セッションの中から、ベスト10セッションに、CSS Nite 2013ベストセッションでは、全278セッション中、ベスト20セッションに選出。