2014年5月19日月曜日

なぜ Web Components はウェブ開発に革命を起こすのか

ウェブアプリケーションのフロントエンドに関わる方なら、もう Web Components という言葉を全く聴いたことがない方は少ないのではないでしょか。
すでに関連記事も数多く出回っており、実際に触り始めている方も多いと思います。しかし、なぜこれが革命的技術なのか、周囲の人に簡潔に説明できる方はどれくらいいるでしょうか？この記事では、それを試みていきたいと思います。

デジタル部品の流通革命

ソフトウェア部品の流通に今、大きな変化が起きてきています。

数年前のオープンソース環境を覚えているでしょうか？レポジトリは集中管理型の subversion、リリースは zip、テストは手動。Issue の登録もプロジェクトごとにことなるバグ管理システムが使われていたため、とっつきづらかったでしょうし、パッチを送るのも面倒でした。

そんなオープンソースを取り巻く環境が、git や GitHub の登場を皮切りに、目覚ましく発展しています。ネットワークレポジトリの環境が整い、CI (Continuous Integration) によるテストやデプロイの自動化、必要な時に最新のソースコードを手軽にダウンロードできるパッケージマネージャーの充実など、すべてが楽に、しかもスピードを早めてきています。ソフトウェア部品の開発から再利用までのサイクルが分単位まで短縮されることで、コミュニティを介したフィードバックやコントリビュート (Patch / Pull Request) も活性化し、品質を高めていくための仕組みも今までになく効率化しています。オープンソースは、ついに真のエコシステムを手に入れつつあると入っても過言ではないでしょう。

この動きは、フロントエンド開発においても大いに役立てられています。特に grunt, npm, bower 等との組み合わせは、だいぶ浸透してきたのではないでしょうか？

UI コンポーネントのエコシステム

これまでに最も大きな成功を収めたフロントエンド向けソフトウェアに jQuery があります。DOM 操作だけでなく、簡単に複雑な UI を実現できる jQuery UI のようなプラグインを活用している開発者の方は多いと思います。カレンダーのUI (Datepicker) や、タブインターフェース、ダイアログといった、素の HTML が苦手とするユーザーインターフェースを実装する敷居を大きく下げてくれたのも、jQuery UI でした。



もちろん、その対抗馬となる UI ライブラリもたくさん登場しています。Kendo UI, ExtJS, Dojo, Bootstrap など、数え上げればキリがありません。しかしひとつ言えるのは、それぞれに独自の思想や作法があるということです。そのため、実際に使うには、API よりも、まずは思想と作法を学ぶところからスタートしなければなりません。
また、選択肢が多いということは、人それぞれに得意なライブラリや好みが別れてしまうため、プロジェクトでひとつを選択する必要に迫られた場合、誰かが妥協したり、新たな学習コストがかかってしまうことも、忘れてはいけません。

Web Components

それでは、UI ライブラリが同じ思想、作法で使えるようになるとしたらどうでしょうか？別に言い方をするなら、「UI コンポーネントの思想と作法が標準化されるとしたら」。

その答えが、 Web Components です。Web Components には以下のような特徴があります。
  • ウェブ標準になる予定
  • 既存の HTML / CSS / JavaScript の知識の延長で使える
  • 独自の HTML タグが作れる
  • コンポーネントはカプセル化されるため、外部を汚染しない
  • 再利用が可能
  • 分業がしやすい
理屈で説明されるより、実際に動くものを見たほうが話は早いでしょう。簡単な例をご紹介します。



画像をクリックすると実際に動作するデモを見ることができます。このデモのソースコードはこちら。
この見た目にかっこいいノブ類ですが、Web Components (Polymer) で作られています。
ドラッグして上下に動かすことで、パラメータを増減。Shift キーを押しながらドラッグすれば、1 ずつ動かすことができます。そして、変更したパラメータは value に設定されます。
<webaudio-knob diameter="64" max="100" sprites="100" src="img/LittlePhatty.png" step="1" style="left: 128px; position: absolute; top: 76px;" tooltip="Knob2 tooltip" value="50"></webaudio-knob>
何よりも、ソースを見てみると、これらの要素には、<webaudio-knob> というタグが使われていることに気付くと思います。ノブの見た目や値の範囲は、ネイティブな HTML 要素のお作法に則り、属性を使って変更することができます。

注目していただきたいのは、head タグ内にある
<link href="webcomponents/webaudio-controls.html" rel="import"></link>
の部分です。この一行が、<webaudio-knob> の利用を可能にしています (実際には Polyfill の platform.js も読み込んでいます)。JavaScript 一切なしで、HTML タグだけでこれが実現できるとしたら、お手軽だと思いませんか？

Web Components が主流になれば、ユーザーは UI コンポーネントを、思想や作法を気にせず、ネイティブの DOM 要素と同様に扱うことができるのです。

もう少し具体例が見たい

分かりやすい一例としては、Twitter Button なんていかがでしょうか？<twitter-button></twitter-button> として、必要な情報は属性として与えれば、Twitter ボタンを表示することができます。Twitter ボタンを実装したことがある方であれば、これがいかに楽な作業かわかると思います。



また、customelements.io というサイトでは、これも含めて、公開されている Web Components でできた UI コンポーネントを探すことができます。

うってつけのビデオもあります。先日 Google で開催された All About Polymer というイベントで Rob Dodson が Google Map を使ったアプリのライブコーディングを披露しました。ほとんどタグを追加するだけで派手なアプリが作り上げられていく様は圧巻です。ちなみに英語ですが字幕付きですので、英語の勉強も兼ねて、ぜひ見てみて下さい。


Web Components の構成要素

少し技術的な解説をします。Web Components は、大きく 4 つのテクノロジーで構成されています。
  • Custom Elements
  • HTML Imports
  • Template
  • Shadow DOM
各テクノロジーについて、簡単に説明してみましょう。

Custom Elements

独自タグをブラウザに認識させます。
このタグはプロパティやメソッド、イベントを持つことができるため、ネイティブな DOM 要素と同様な使い勝手を実現することができます。
上記 <webaudio-knob></webaudio-knob> の例で言えば
var knob = document.querySelectorAll('webaudio-knob')[0];
knob.setValue(100);
とすることで、JavaScript から 命令的 (declarative - 宣言的 の反対である imperative 的) に、value を変更することができます。
knob.value = 100;
とすることもできます。

実は Custom Elements は GitHub で既に使われてたりします。


DevTools で見てみると
  • time タグを拡張 (is="relative-time") して、タグ中に表示される時間を相対的にしている
  • title-format 属性を使って、ツールチップ表示の日時にフォーマットを指定している
なんて使い方をしているようです。

未対応ブラウザ向けには、Polymer の Custom Elements の Polyfill も使っているようです。なんか見てたらホレボレしてきました。

Template

標準のテンプレート機能を提供します。
template のコンセプトは長らく検討されてきました。最近では Handlebar.js や Backbone.js (Underscore), AngularJS のテンプレートが人気ですが、それのウェブ標準版と思って下さい。既存のハックと比べると
  • どこに置いても template 内は DOM と認識されないので、それだけでは中の script を実行したり、画像を取りに行ったりといったことが起きない
  • 取り込む際は文字列ではなく DOM として認識できるので、扱いやすい
など、できそうでできなかった機能が提供されています。なお、プレースホルダーやバインディングの機能はこれ自体提供していない点に注意してください。

HTML Imports

ひとつのタグで複数のリソースを読み込むことができます。
jQuery UI にしろ Bootstrap にしろ、JavaScript、CSS などを、それぞれ別々に取り込む必要がありました。import タグを使えば、これひとつで UI コンポーネントと、それに必要なリソースを取り込むことができるようになります。

Shadow DOM

カプセル化した HTML 要素を追加できます。
パッと見の効果は、見えないマークアップを追加できることですが、もっと大きな役割はカプセル化できることです。UI ライブラリでありがちな落とし穴は
  • 同じクラス名を使って意図しない要素にスタイルが当てられてしまう
  • 別の要素に当てたスタイルが意図しない箇所に影響を与えてしまう
ですが、Shadow DOM は外の世界と中の世界を分断することで、カプセル化を可能にします。

ブラウザベンダーのスタンス

標準化を目指していると言いましたが、ブラウザベンダーの足並みが揃わなければ標準化することはできません。しかし、各ブラウザベンダーは、いずれも Web Components に注目し、実装と仕様策定を同時並行で進めています。

Google

Google は Web Components で最も大きな役割を担っています。仕様作成者はいずれも Google エンジニアで、Google Chrome では既にほとんどの機能を実装しており、バージョン 36 では HTML Imports も取り込まれ、すべての機能が about:flags のフラグ無しで動く状態になる見込みです。
また、まだアルファ版ではありますが、Web Components をベースにした Polymer というフレームワークを開発しており、完成すれば、その上で様々なコンポーネントを動かせるよう準備を進めています。同時に、Polymer の開発に当たり、Web Components 未対応ブラウザでの動作が行えるよう platform.js という Polyfill (JavaScript で機能をエミュレートするライブラリ) の開発も進められています。

Mozilla

Google の次に積極的に Web Components に取り組んでいるのは、間違いなく Mozilla です。x-tag というフレームワークを開発しており、UI コンポーネント集 Brick も公開されています。

Apple

Blink が WebKit から fork された時点で Shadow DOM が削除されるなど、一時は Web Components への対応に否定的と見られましたが、先日別ブランチ上で開発を進めることが発表され、様子を伺いつつも興味を示しています。

Microsoft

Microsoft の Web Components 対応は、status.modern.ie を見る限り、いずれの機能も Under Consideration の状態ですが、HTML Templates の仕様に関わるなど、興味を示しています。

ユースケース

どのような場面で Web Components を使うことができるでしょうか？いくつか例を挙げてみます。

プロダクト専用の UI コンポーネントを作る

サービスを開発するに当たり、UI のコンポーネント化を想定して設計します。そうすることで、UI コンポーネントを作るチームは、その機能に集中することができますし、使うチームは、想定通りにインターフェースが使える前提で開発を進めることができます。分業が楽になるのも Web Components の利点のひとつです。

複数サービスで共有の UI コンポーネントを作る

ポータルサイトや、複数のサービスが統合されたサイトを運営している企業の場合、テーマや UI を統一したいケースが多いと思います。それこそ Web Components が威力を発揮するチャンスです。共通サーバーから CSS や画像を配信するインフラは既に整っているところが多いでしょうから、それを Web Components のものに差し替えることで実現できるでしょう。

公開されている UI コンポーネントを使う

ちょっとしたサービスを個人で作りたい場合、開発者がデザインまで手がけるのはなかなか大変です。Bootstrap のように、お手軽にできあいのデザインで UI が組めるのはありがたいですが、Web Components を使えば、もう少し複雑なことも比較的簡単に実現できます。公開されている Web Components のライブラリを customelements.io などで探し、再利用することで、開発の工数を大幅に減らすことができるようになるでしょう。まだまだ数は少ないですが、Web Components が広まれば、むしろ自分が必要なものを探す方が大変になるかもしれません。

どこで学べばいいのか

ここまで読んで、ぜひ Web Components を使いたい！と思った方は、どこで使い方を学べばいいのでしょう？仕様を読んで下さい…というと大変ですよね。仕様は仕様なので、使い方が書いてあるわけではありません。幸いなことに、HTML5Rocks にはすでにたくさんの記事が上がっています。これらの記事はメンテされていますので、最新の仕様 (実装) に則っていると思って大丈夫です。

でも HTML5Rocks の記事は英語だから読むのが大変・・・そんな方のために、日本語訳しておきました。

その他日本語資料

質問はどこに？

日本語なら、html5j のメーリングリストで聞けば、誰かしら答えてくれると思います。英語であれば、StackOverflow で polymer タグを使うと良いと思います。

まとめ

僕なら、誰かに Web Components は何がそんなに素晴らしいのか？と聞かれたら、こう答えます：

Web Components はウェブの UI コンポーネントを標準化し、エコシステムに乗ることで、開発効率を飛躍的に向上する技術 だからであると。

 みなさんが素敵な UI コンポーネントを公開してくださるのを楽しみにしています。
時刻: