新春特別企画

2017年のWeb Components

この記事を読むのに必要な時間:およそ 4 分

Custom Elementsも着実に前に進んでいる

Shadow DOMに続いて重要な仕様がCustom Elementsになりますが,これについても実装は順調なようです。

Appleは,Safari Technology Preview Release 13からコードが入り始め,Safari Technology Preview Release 14にて開発者向け実験機能をONにすれば利用可能な状態になりました。これも,数多くのiOSデバイス上でCustom Elementsを使ったウェブアプリケーションがネイティブサポートされる日も近いと言って良いでしょう。先ほどのShadow DOMと同じように,各ウェブブラウザ開発ベンダーの合意が取れているCustom Elements v1仕様がSafari Technology Preview Releaseに適用されています。

それに対して,残念ながらFirefoxではCustom Elements v1の開発に関するタスク登録はされていますが,具体的な作業は進んでいないようです(StatusがNEWのままであることからの推測)⁠⁠dom.webcomponents.enabled⁠というフラグをtrueにすることで以前のCustom Elements仕様の実装を使えるようにはなっているのですが,Custom Elements v1がFirefoxでネイティブサポートされるのは,もう少し待つ必要がありそうです。

Edgeは未着手

最も×マークが多くついていたEdgeですが,残念ながら実装される気配はまだありません。Microsoft Edge Platform Statusというウェブサイトがあるのですが,HTML Imports,Custom Elements,Shadow DOMのどれもUnder Consideration,つまり検討中のステータスです。EdgeでWeb Componentsがネイティブサポートされるのは,まだまだ時間がかかると言えるでしょう。

Platform Statusのページで掲載されている289個の機能の中で,投票順にソートすると,上位3つがまさにShadow DOM,Custom Elements,HTML Importsです。つまり,世間の要望はやはりWeb Componentsの環境がEdgeにおいても実現することであり,これはMicrosoftのEdge開発陣も把握していると思われます。当分はPolyfillに頼るしかなさそうですが,Edgeは比較的新しいウェブブラウザですので,今後の挑戦に期待したいところです。

2017年のWeb Components

では,今年のWeb Components関連の動きを考えてみます。

モバイルはもうすぐ準備が整う

デスクトップにおいてはFirefoxやEdgeのWeb Components対応が芳しくない状況です。しかし,StatCounterによるウェブブラウザシェアの統計によると,2016年11月ではFirefoxは13.49%,Edgeは2.94%でした。Chromeは59.06%と他を圧倒していて,実はデスクトップでは既にWeb Componentsの環境はほとんど既に整っていると言っても過言ではありません。

多くの人々がウェブアプリケーションをスマートフォンを代表とするモバイルデバイスから使っていますので,デスクトップよりもモバイルデバイスでのWeb Componentsの対応状況のほうが重要です。Androidにおいては,Android Browserは既にダウントレンドですので,Chromeはすべての準備が整っています。あとはiPhoneとなりますが,Safariの対応状況もAppleがGoogleの次にWeb Componentsに対してアクティブですし,実際Safariへの実装について目に見える進捗があります。

モバイルについても今年はWeb Componentsの環境が整う,と言い切っても良いでしょう。

フレームワークのWeb Components対応が進む

ウェブブラウザのWeb Componentsのネイティブサポート状況が好転していますので,Web Componentsを利用する側の対応も徐々に速度が加速していくと予想できます。

例えば,Angular 2においては,コンポーネントのスタイルとして既にShadow DOMを利用できるようになっています。具体的には,⁠encapsulation: ViewEncapsulation.Native⁠と定義することでShadow DOMが適用されるようになります。残念ながら2016年末時点では,Angular 2の初期値はShadow DOMを使わない指定となっていますが,今後Shadow DOMを有効にしてウェブアプリケーションを公開することは十分に現実的と言えるでしょう。

また,Reactにおいては,元々Web Componentsとの親和性が高い作りになっています。JSXを使って書かれたHTMLテンプレート内でCustom Elementsによって登録された部品を書けばそのまま利用できるようになっています。また,Reactコンポーネントの中でShadow DOMを利用可能にするReactShadowというライブラリもありますし,ReactコンポーネントをCustom Elementsを使って登録するアプローチも取ることができそうです。

今年は,各フレームワークがもっと踏み込んだWeb Components対応を打ち出してくるのではないかと考えられます。特にShadow DOMは,各フレームワークが長年課題にしてきた部品とスタイルの対応に関する問題を解決するための根本的な手法として機能するはずですので,積極的に対応が行われるのではないかと思っています。そして,時間が経過するにつれて,各フレームワークに関するドキュメントや解説記事の中で,Web Componentsという言葉を目にする機会も増えていくと予想できます。

ライブラリのWeb Components対応が進む

フレームワークだけでなく,UIの部品群を提供するライブラリを今まで開発してきた陣営が,Web Componentsに取り組み始めるのも今年からになるでしょう。Web Componentsとは,言わばウェブにおけるUI部品の標準仕様です。つまり,様々なUI部品を,その開発者が誰であれ,組み合わせて使うことができて,初めてWeb Componentsが想定しているエコシステムが回ります。そのエコシステムが今年から回り始めるのではないかと考えています。

現在,ウェブアプリケーションで利用可能なUI部品集は数多く提供されています。Dojo Toolkit,Bootstrap,Kendo UI,Ext JS,Webixといったものが有名です。これらがまずは内部的にWeb Componentsの各仕様を取り込んでいき,様々な問題を解決していくことになるでしょう。おそらく,Shadow DOMやTemplatesをまずは内部的に利用していくことになると思います。

その後,Custom Elementsによって,上記のライブラリに含まれる個々のUI部品群がWeb Componentsとして登録されるようになれば,ウェブアプリケーションの世界が大きく変わります。現状,上記のラブラリを一つのウェブアプリケーション内で複数組み合わせて利用することは,現実的ではありません。しかし,Web Components化されることで,異なるライブラリに含まれるUI部品を組み合わせて利用できるようになります。少なくとも,部品間での干渉による不具合の発生はなくなるでしょう。そして,主要なライブラリがWeb Components化されることによって,ウェブアプリケーション市場にUI部品が一気に流れ込むことになりますので,Web Componentsの利用も活性化されるはずです。

実際には今年中に上記の作業をやり終えることは難しいかもしれませんが,Web Componentsの普及は,上記のような既存のライブラリがどのようにWeb Componentsのエコシステムに対応してくるかが勝負だと思います。この動向に注目しておくと良いでしょう。

フロントエンドエンジニアの出番が来る

多くのフロントエンジニアにとって,Web Componentsは「まだ遠い未来の話であって,それは来ないかもしれない未来」だと思っていた方が多いはずです。しかし,Web Componentsの主要ウェブブラウザの対応状況はかなり進んでいて,実は既に環境はほぼ整っていると言えるところまで来ていることがわかっていただけたかと思います。デスクトップおよびモバイルでのウェブブラウザのシェアの状況を見ても,そう言えるでしょう。

今年からは,何かウェブアプリケーションを開発する際に,Web Componentsの採用を考えても良いでしょう。まずは身近の開発プロジェクトから,徐々に小さく部分的に適用していき,Web Componentsの利点を体感することから始めてみましょう。そして,フレームワークやライブラリについてWeb Components対応が進んできたところで,本格的に様々なウェブアプリケーションにて適用していく,という段階を踏むと,失敗することなく利点を活かしていけると思います。

今年からは,Web Componentsがアクティブになるレイヤは,ウェブブラウザ開発ベンダーではなく,フレームワークやライブラリの開発者であり,そしてそれらを利用する多くのフロントエンジニアになります。Web Componentsがウェブアプリケーションの主役になる日は近いです。ぜひ今年はWeb Componentsをキャッチアップし,実際に手を動かしてみてください。

著者プロフィール

田中洋一郎(たなかよういちろう)

Google Developer Expert(Chrome担当)。Mash up Award 3rd 3部門同時受賞。『開発者のためのChromeガイドブック(Google Expert Series)』を出版。

Blog:https://www.eisbahn.jp/yoichiro
Twitter:@yoichiro

コメント

コメントの記入