2024.12.24
ビジネスが急速に変化する現代は「OODAサイクル」と親和性が高い 流通卸売業界を取り巻く5つの課題と打開策
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.01.16
社内プレゼンは時間のムダ パワポ資料のプロが重視する、「ペライチ資料」で意見を通すこと
2025.01.15
若手がごろごろ辞める会社で「給料を5万円アップ」するも効果なし… 従業員のモチベーションを上げるために必要なことは何か
2025.01.09
マッキンゼーのマネージャーが「資料を作る前」に準備する すべてのアウトプットを支える論理的なフレームワーク
2025.01.14
コンサルが「理由は3つあります」と前置きする理由 マッキンゼー流、プレゼンの質を向上させる具体的Tips
2025.01.07
1月から始めたい「日記」を書く習慣 ビジネスパーソンにおすすめな3つの理由
2025.01.14
目標がなく悩む若手、育成を放棄する管理職… 社員をやる気にさせる「等級制度」を作るための第一歩
2025.01.10
プレゼンで突っ込まれそうなポイントの事前準備術 マッキンゼー流、顧客や上司の「意思決定」を加速させる工夫
2025.01.07
資料は3日前に完成 「伝え方」で差がつく、マッキンゼー流プレゼン準備術
2017.03.05
地面からつららが伸びる? 氷がもたらす不思議な現象
2025.01.08
職場にいる「嫌われた上司」がたどる末路 よくあるダメな嫌われ方・良い嫌われ方の違いとは
特別対談「伝える×伝える」 ~1on1で伝えること、伝わること~
2024.12.16 - 2024.12.16
安野たかひろ氏・AIプロジェクト「デジタル民主主義2030」立ち上げ会見
2025.01.16 - 2025.01.16
国際コーチング連盟認定のプロフェッショナルコーチ”あべき光司”先生新刊『リーダーのためのコーチングがイチからわかる本』発売記念【オンラインイベント】
2024.12.09 - 2024.12.09
NEXT Innovation Summit 2024 in Autumn特別提供コンテンツ
2024.12.24 - 2024.12.24
プレゼンが上手くなる!5つのポイント|話し方のプロ・資料のプロが解説【カエカ 千葉様】
2024.08.31 - 2024.08.31