yo_waka's blog

418 I'm a teapot

WEB+DB PRESS Vol.76にWeb Componentsの記事を書きました

うう、発売されてからだいぶ経ってしまった。。。

WEB+DB PRESSJavaScript連載の第9回目にWeb Componentsについての記事を書かせていただきました。

WEB+DB PRESS Vol.76

WEB+DB PRESS Vol.76

  • 作者: 五十嵐啓人,伊野亘輝,近藤宇智朗,渡邊恵太,須藤耕平,中島聡,A-Listers,はまちや2,川添貴生,片山育美,池田拓司,濱崎健吾,佐藤太一,曾川景介,久保渓,門脇恒平,登尾徳誠,伊藤直也,mala,後藤秀宣,若原祥正,奥野幹也,大林源,WEB+DB PRESS編集部
  • 出版社/メーカー: 技術評論社
  • 発売日: 2013/08/24
  • メディア: 大型本
  • この商品を含むブログを見る

サービス/アプリの作り始めは特に気にする必要もないのですが(最初から検討するリソースがあるならその方がいいけど)、ページ数の多いサイト、インタラクションの多いアプリなどを作っていると、何かしらの方法でクライアントサイドのコンポーネント化を考えますよね。
サーバサイドのビューライブラリでのHTMLテンプレート化、Sassなどのmix-in、RequireJSなどを使って依存関係解決など、HTML/CSS/JavaScriptを個別にコンポーネント化していったり。

そうやってコンポーネント化が進んでくると、HTML/CSS/JavaScriptトータルで見たときの管理コストが逆に増えるケースもあると思います。
このJSであてられてるCSSクラスはどこで定義されてるんだろうとか、どの画面のどのDOMにこのJSコンポーネントは適用されているのか、とか。

大きめのクライアントサイドアプリだと、後から入ってくる人はHTMLの構造を把握するのも結構大変ですよね。
jQueryUIなんかそうですけど、UIコンポーネントを適用するために決まったDOM構造をHTMLに定義しておかないとよく分からないセレクタエラーで動いてくれない。ドキュメント通りのHTML構造にしろ、とかそういうHTMLの枠組みはUIコンポーネントの責務なのでは、、と思うこともしばしば。

そういった不便をブラウザネイティブの機能として解消してくれそうなのがWeb Componentsだと思っています。 なんせカスタムタグ一発でビデオタグみたいなリッチなUIを提供できるわけなので、ライブラリを使う人からしたらとても楽チン。

まだまだ一部の仕様しか使えないWeb Conponentsですが、GooglePolymerに続きMozillaBrickを公開してきたりと、動きが活発になってきて楽しい感じです。

実際にvideoタグやaudioタグなどは既にブラウザに実装されて普通に使われているわけなので、運用も問題なさそう。 ただ、実際に普及するにはIEが実装してくれないとですが><