Web ページの制作において、 JavaScript と CSS は欠かすことができません。 jQuery / AngularJS などのライブラリや Bootstrap などの CSS フレームワークなしで Web ページを作ることはほとんどないはずです。

ライブラリなどを使う場合問題になるのが依存関係の解決です。これまで HTML にはそのような問題に対処できませんでした。

最近、その問題を解決するための仕様として HTML Imports というものができました。これを使えば HTML で依存関係を記述でき Web ブラウザがそれを解決してくれます。

ここでは HTML Imports の使い方を簡単に解説していきます。

必要な知識

  • npm の使い方
  • bower の使い方
  • HTML
  • JavaScript

下準備をする

HTML Imports は最近できた仕様で対応しているのは Chrome と Opera だけです。 webcomponents.js というポリフィルがあるので、それを使って他のブラウザでも動くようにします。

webcomponents.js は bower でインストールできます。

$ bower install webcomponents.js

HTML でそれを読み込みます。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML Imports のテスト</title>
  <script src="bower_components/webcomponents.js/webcomponents.js"></script>
</head>
<body>
  <div></div>
</body>
</html>

モジュールを作る

さっき作った HTML から読み込むモジュールを作ります。例としてアラートを表示するだけの showAlert() 関数を作って見ます。

<script>
  function showAlert() {
    alert('警告!!', 'これは警告です');
  }
</script>

これを show-alert.html として保存します。

モジュールを読み込む

モジュールを読み込むには <link> タグを使います。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML Imports のテスト</title>
  <script src="bower_components/webcomponents.js/webcomponents.js"></script>
  <link rel="import" href="show-alert.html">
</head>
<body>
  <div>
    <button onclick="showAlert()">警告する</button>
  </div>
</body>
</html>

rel="import" が重要です。これを書くとモジュールを読み込んでくれます。実際に Web サーバを立てて、ページ上のボタンをクリックすると showAlert() 関数が呼ばれることがわかるはずです。

今回 show-alert.html は <script> タグのなかに直接 JavaScript を書き込みましたが <script src="XXX"></script> のようにファイルを読み込むように指定しても同様に読み込まれます。

さらに <style> タグや <link rel="stylesheet" href="XXX"> を使って CSS も読み込むことができます。 JavaScript と CSS の両方が必要な場合でも <link rel="import" href="XXX"> を1行書くだけで読み込むことができます。

さらにさらに、インポートされたモジュールの中に <link rel="import" href="XXX"> を記述してモジュールをさらに他のモジュールに依存させることができます。

HTML Imports を使う利点

今回の例だと構造が単純すぎてわざわざ HTML Imports を使う利点はわかりづらいかもしれません。 HTML Imports は依存関係がもっと複雑になった時に重要になってきます。

これまではモジュールを使う側がモジュール同士の依存関係を気にして <script> タグを書く順番を調整する必要がありました。

<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
<script src="d.js"></script>
<!-- d.js は c.js に、 c.js は b.js に、 b.js は a.js に依存している -->

HTML Imports を使うと モジュール側が 何に依存しているかを指定でき、 Web ブラウザがそれをうまく読み込んでくれるので簡単にモジュールを使うことができます。

<link rel="import" href="d.html">
<!-- d.html のなかで c.html と b.html と a.html を読み込んでいる -->

ちなみに、同じ HTML が複数回依存されても、読み込まれるのは1度だけです。

ファイルを1つにまとめる

HTML Imports のおかげで依存の解決が簡単にできるようになりました。これで終わりでもいいですが、通信量を抑えるためにファイルを1つにまとめてみます。

そのためのコマンドが vulcanize です。 npm でインストールできます。

$ npm install -g vulcanize

vulcanize コマンドを叩けば HTML からインポートしているファイルを1つにまとめてくれます。

$ vulcanize ${HTMLファイル}

vulcanized.html というファイルができているはずです。中を見れば複数のファイルに書かれた内容が1つにまとめられているのがわかります。ここから更にminifyなどしてもいいでしょう。

まとめ

  • webcomponents.js
  • <link rel="import" href="XXX"> で他のHTMLを読み込む
  • 他のHTMLからさらに他の HTML を読み込むことができる
  • vulcanize コマンドで複数の HTML を1つにまとめる