React UIで人気の「Material You」がLitで実装予定　今度こそ流行って欲しいWeb Components

10年近く前に誕生したWeb Components

shibu_jp氏（以下、shibu_jp）：10分なのに、スライド30枚以上もあるので、ちょっと駆け足でいきます。

まず「お前誰？」ということですが、現在はフューチャー株式会社でコンサルタントをやっています。JavaScript、Go、Pythonをよく書いているのですが、最近はお仕事でFlutterを書いています。

フューチャーは1次請けで、2次請けにも投げないで、開発・実装・運用・設計まで全部やるコンサルタントの会社です。Vue.jsのコアメンバーがいたりもします。今日も会社のチャットで、イベントの裏でワイワイチャットしていたりもします。

ほかには『エキスパートPythonプログラミング 改訂3版』が出るので、今日のイベントを聞かれている方には関係ないかもしれませんが、買っていただけるとうれしいです。

本題に入ります。Web Componentsというのは、みなさん名前ぐらいは聞いたことあるかなと思いますが、ほぼ10年近く前に誕生しました。

Polymerというライブラリが、当時は一番有名なライブラリでした。そのあとは、AMPの独自タグとしても利用されたり、2019年には、Polyfillで動かすみたいな実装もあったのですが、基本ほぼ全部のブラウザーがネイティブで使えるようになりました。昔は仮想DOM、Reactとかとの相性が悪かったのですが、それが解決したのが2年前です。

そしてPolymerの後継の、LitElementの安定版が、安定版なのにいきなり2.0がリリースされました。

当時2年前、『WebComponents元年（2回目）！』と書いて、Jxckさんが今年『WebComponents元年 v3』みたいな発表をされていましたが、2021年、また元年かなみたいな感じで、今度こそ流行ってほしいなと思っています。

流行ったらどんないいことがあるのかですが、どんなフレームワークを使っても、かっこいいUI部品が使えるようになります。新しいフレームワークとして、例えばSvelteとかが最近出てきています。これは2年ぐらい前から出てきているんですかね。最近流行っていますが、そういう新しいフレームワークでも、かっこいいUI部品がいきなり使えるようになります。

あとは、 1つライブラリを作ると、どのフレームワークでも使える部品が作れます。個人的には、アトミックデザインのAtomの要素がWeb Componentsになるといいなと思っていて、コードのレイヤー分けとか、再利用可能性とかは上がるかなと思っています。

ただ、流行はにわとり、卵のところがあって、利用者が増えないと情報も増えないし、ライブラリやツールも増えない。それがそれぞれ循環しているかなというところですね。

実際周りでWeb Componentsを使っているよという人は、あんまり聞かないなという感じです。

React UIで人気のMaterial YouはLitで実装予定

ただ、たぶん公式発表ではないのですが「Google I/O 2021」で、マテリアルデザインの新バージョンのMaterial Youというのが発表されて「それ、Web Componentsになったらいいな」と日本語で書いたら、中の人から「それ、Litで実装しますよ」みたいな返事がいきなり来たというのがありました。

WebのフレームワークのUI部品で、Reactで人気なものをランキングの上から調べたのですが、Material-UIが人気です。

Material-UIは、マテリアルデザインを実装したものですが、発表してからサードパーティの部品が安定して人気出るまで2年とか、けっこうタイムラグがありました。僕がMaterial-UIを初めて使ったのは3年半ぐらい前ですが、途中でAPI変更とか、けっこう大幅変更があって追従が大変でした。

みんなマテリアルデザインが好きだと思うのですが、Material YouのWeb Components版が出ると、リリース直後からどのフレームワークでもMaterial Youの部品が使えるようになって、全フレームワークユーザーがうれしいんじゃないかなと思います。

4回目のWeb Components元年はきっと来ないで、2021年こそ流行ってくれのではないかなと思っています。

実質LitElement 3.0のLitがリリース

「ここに出てる『Lit』、何？」ですが、Polymerの後継のLitElementというものの、さらに後継がLitです。名前は変わりましたが、実質LitElement 3.0で、APIとかも基本はあまり変わっていないです。

ただ、Webサイトとか、Webサイトのドメインもlit.devとなって、完全にリニューアルされました。

LitElementと比べると、サイズも小さくて高速になりました。あと、先ほどlacolacoさんが、Angularのサーバーサイドレンダリングの話をされていましたが、Litでも、Web Componentsのサーバーサイドレンダリングのテスト実装が開始されています。

日本語だと「Zenn」の記事で、すごく詳しいのがあるので、こちらを見るといいかなと思います。すでに、LitとLitElementを使ったUI部品もたくさん実装されています。

流行するための3ステップということで紹介したのですが、Material Youが出ると、きっとユーザーは増えるのではないかなと思っています。Web Components製の部品を使うための情報は、すでに2年前に僕が「Qiita」で書いたのがあります。

Web Components製の部品の作り方

あとは、Web Componentsの部品を作る人が増えるといいなあいうところで、それの作り方をこれから軽く紹介します。

Parcelは、僕の最近お気に入りなのですが、さっき発表があったようにRust製になったらしく、高速性もアップしているらしいです。

ちょっとこのへんは、説明する時間がないのですが、会社の技術ブログで環境構築とかを紹介しているので、あとで見てもらえるといいかなと思います。

どういうのを作ってみようかなと思ったのですが、いろいろなフォームでよくあるような、郵便番号を入れて押すと、住所を入れてくれるボタンを作ってみようと思います。

このフォームに、data属性でdata-postal-codeとかを付けておくと、そこから情報を取ってきて、アドレスのフォームのところに入れます。バックエンドは、みんなが大好きな、話題のSaaSの「ケンオール」を使いました。なので、kenall-buttonというのを作ってみます。

ケンオールのいいところは、APIのキーをフロントエンドに置いても大丈夫な設計になっていて、ドメインの指定ができるところです。

そうすると、CORS（Cross-Origin Resource Sharing）の仕組みで保護されます。なので、Web Componentsのボタンだけ置くと、サーバーを使わずに、そのWebサイトにAPIキーを入れて動かせます。20年以上前の、CGIでアクセスカウンターとかを使っていたおじさんたちは、たぶん懐かしくなるんじゃないかなという感じです。

こんな感じで使えます。

scriptタグはParcelで実装したので、scriptタグに.tsがそのまま入っていますが、kenall-buttonを置いて、それぞれpostal-codeとかのdataタグを付けたinputタグを置きます。

実装としては、デコレーターでボタンの名前、コンポーネントの名前、タグの名前を付けて、あとはLitElementを継承したクラスを作ります。あとプロパティとかを使ったり。このへんは名前や書き方が違うだけで、Vue.jsとかReactとかAngularとかも考え方は、基本一緒です。

中の実装は、普通にDOMの操作をしているだけですね。

これが、実際に作った例です。コードは先ほど公開したので、見てもらえれば動かせるかなと思います。

ちょっとサボっているのですが、ネイティブのinputイベントや、changeイベントを投げれば、仮想DOMとかとも相性よく動く部品になるのではないかなと思います。ちょっと実験はしていないのですが、そう思っています。

まとめ

というわけで、だいぶ駆け足ですが、2021年は3回目のWeb Components元年ですが、Lit 2.0が出ました。Web Componentsはすごく簡単に実装できます。

あと、Material YouのWeb Components版が出れば、もっと人気が出るかなと思います。今日聞かれている中にはSaaSサービス作っている方もけっこう多いと思うのですが、Web Components版のインターフェイスを出すといいのではないかなと思います。

という感じで、ケンオールやParcelも最近おもしろいなというところで、今年こそはWeb Componentsの元年になって、4回目の元年は来ないと信じています。

最後に、技術ブログの宣伝です。今『フロントエンド連載』というのをやっていて、ちょうど今日あったES2021の話も紹介している記事があるので、ぜひご覧いただければと思います。以上になります。

司会者：そうですね（笑）。Web Componentsの話が出始めて数年ですよね。本当にずっと、今年こそはという（笑）。「今年こそは、今年こそは」と言われ続けて、今、もうパーツは揃ったという感じがありますよね。今までは、ブラウザーの実装が足りてないとか、各ブラウザーで実装詳細が違ったりもあったし、今度はAPIがそこまで流行らなかったとか、そういうのもいろいろあったかと思うのですが、今年こそはという感じですよね。

AMPとかを使っていると、実は知らず知らずのうちに使われているとかもあったりするんですけど。

shibu_jp：自動車のBMWのサイトが、AMPを高速化目的ではなくて、普通にPC向けのページでも使ってたりしますね。

司会者：あー、それうちでもやっていますよ。だから、あれをけっこう普通のコンポーネントのタグとしての使い道は、わりかし使える感じはあるんですよね。

そのあともう1周があるのかなという感じはしますけどね。どうやって使うと効率的なのかとか、デザインとどう混ぜるのかとか。いろいろな話はあるのかなと思います。