
2025.02.06
ポンコツ期、孤独期、成果独り占め期を経て… サイボウズのプロマネが振り返る、マネージャーの成長の「4フェーズ」
N回目のWebComponents元年: Lit 2.0(全1記事)
リンクをコピー
記事をブックマーク
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を使っているよという人は、あんまり聞かないなという感じです。
ただ、たぶん公式発表ではないのですが「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年こそ流行ってくれのではないかなと思っています。
「ここに出てる『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の部品を作る人が増えるといいなあいうところで、それの作り方をこれから軽く紹介します。
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周があるのかなという感じはしますけどね。どうやって使うと効率的なのかとか、デザインとどう混ぜるのかとか。いろいろな話はあるのかなと思います。
関連タグ:
2025.02.06
すかいらーく創業者が、社長を辞めて75歳で再起業したわけ “あえて長居させるコーヒー店”の経営に込めるこだわり
2025.02.03
「昔は富豪的プログラミングなんてできなかった」 21歳で「2ちゃんねる」を生んだひろゆき氏が語る開発の裏側
2025.02.03
手帳に書くだけで心が整うメンタルケアのコツ イライラ、モヤモヤ、落ち込んだ時の手帳の使い方
2025.02.04
日本企業にありがちな「生産性の低さ」の原因 メーカーの「ちょっとした改善」で勝負が決まる仕組みの落とし穴
PR | 2025.02.07
プロジェクトマネージャーは「無理ゲーを攻略するプレイヤー」 仕事を任せられない管理職のためのマネジメントの秘訣
2025.02.05
「納得しないと動けない部下」を変える3つのステップとは マネージャーの悩みを解消する会話のテクニック
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.01.30
2月の立春までにやっておきたい手帳術 「スケジュール管理」を超えた、理想や夢を現実にする手帳の使い方
2025.02.06
落合陽一氏や松尾豊氏の研究は社会に届いているか? ひろゆき氏が語るアカデミアの課題と展望
2025.02.05
エンジニアとして成功するための秘訣とは? ひろゆき氏が語る、自由な働き方を叶えるアプリ開発とキャリア戦略