Web Components を見ることが増えた 2025年

こんにちは。CARTA でフロントエンド開発をしている @hako584 です！

この記事は 2025 年のアドベントカレンダー 2日目です。

2025年は実世界でもWeb Componentsを多く見るようになった年でした。そこであらためて、 Web Components 採用 UI ライブラリ を中心にまとめてみました。

みんながよく使う「あれ」もWeb Components だよ！

さて、まずは世の中でどれぐらいWeb Componentsがあるか見てみましょう。

GitHub

GitHubのUIパーツは徐々にWeb Componentsへ置き換わっていっています

これらの要素は個々のUI要素群という感じで、ライブラリとしてまとまってないのですが、webcomponents.org上で公開されています。

YouTube

YouTubeはかなりの部分が Web Componentsでできています。 <ytd-, <ytm- 等、ほとんどが Custom Elementで作られています。 *1 こちらは、おそらく謎のGoogle社内ライブラリ Wiz と思われます（後述）

2025年の Web Components 採用 UIライブラリを見てみよう

Material Web Components (Google)

Androidスマホでも知られるデザインシステム Material(マテリアルデザインとして有名) のWeb版が、Web Components (Lit) ベースで提供されています。

…が、2024/06からメンテナンスモードに。

とはいえ継続的にアップデートは出ていますし、「Wizに発展するぞ」→ 謎の新フレームワーク Wiz がAngularと統合されたとのこと。

実際、YouTube や Google検索の実装を見ると UI部品のほとんどが Web Componentsに置き換わっています。

FAST / Fluent UI (Microsoft)

Microsoft FAST は Microsoft が提供する Web Components 向けUIの薄いラッパーフレームワーク。リリースは2020年。

FAST自体はUIライブラリじゃなくて、Web Componentsの各種技術では足りないものを補う存在。Litに近いポジションですね。

FAST で構築された UI コンポーネントの実装例として Fluent UI Web Components がMicrosoftによって提供されています。Microsoft の Fluent UI デザイン言語(React/Vue等でも実装がある)の、Web Components 版。

Spectrum Web Components (Adobe)

Adobe の Spectrum Web Components も、同社のデザインシステム「Spectrum」の Web Components 版。LitElement で作られています。

Web上で動くPhotoShopやAdobe Acrobat、また各種製品のホームページなども、このSpectrumで作られているようです。オシャレ！

Ignite UI for Web Components (Infragistics)

**Ignite UI for Web Components** も同じく、ReactやAngular、ASP.net/ASP.net Core さらにはjQueryにまで対応した。データグリッドやチャートなど高度な UI 部品を揃えたライブラリのWeb Components版です。

高性能なデータグリッドやチャート、マップなどを Web Components 形式で提供し、大規模な企業アプリでも利用されている…らしいです。（よく知らなくてすみません）

Salesforce Lightning WebComponents

Salesforceは日本でも有名なCRM/SFAです。御社専用システムみたいなのが簡単に（？）作れる感じ。それで、いくつかあるUI部品作成方法のひとつで現在の主流がLightning Web Componentsのようです。公式ヘルプとgithubありますが、Salesforce ユーザー向けという感じが強く、ちょっと読んだだけでは把握しきれませんでした…。

コンポーネント一覧ページを見ていると本当にたくさんあり、 click-to-dial (クリックすると電話をかける) など、企業向けシステムならでは！の要素もあって面白いですね。

UI5 Web Components (SAP)

UI5 Web Components …はいもう同じです！SAP も Salseforceと似て企業向け製品で、日本でも採用の多い世界的に知られるERPベンダです。

このUIライブラリもWeb Components。OSS公開してるので誰でも利用可能。やはり React/Vue/Angular/Svelte などあらゆるフレームワークで利用できる…と。

これはやはりWeb Componentsの強みですなー。公式doc見ても、このUIだけ導入というのも手軽そう。

WebAwesome

WebAwesome は先進的な万能軽量uiライブラリShoelace のちょっとおしゃれな新しい名前です。公式サイトにそう書いてある！ *2

この記事も、WebAwesomeの話をするために書きはじめました。

正式版(3.0.0) はこの11月にリリースされたばかり！ <head> タグに1行書くだけでも利用可能なのが強み。もちろんReact/Vue/Svelte/Angular 他からも使う事が可能。もちろんバニラJSも！！

・・・と、めちゃくちゃ素敵っぽいですが、Kickstarterでファンディングしてたり、有料のPro版（デザインカスタマイズや専用コンポーネント）など、マネタイズで挑戦的な感じ（またOSS儲からない問題だ）。

でも、宣伝動画はカッコイイ！！最強っぽい！ www.kickstarter.com

いまはWeb Awesomeのコンポーネント一覧を眺めて楽しみましょう。

Ionic Framework

モバイルアプリ開発でおなじみの Ionic Framework も、バージョン4(2019)から Web Components として書き直してます！

知らないヒトは居ないと思いますが、Web標準の技術を使って、モバイルのUIを作れるのがIonic Frameworkの特徴。

Angular/React/Vue/Stencil などさまざまな環境で動作するためにはやはりWeb Components…！！

すでにApp Store に並ぶ数千のアプリで使われている実績。

そのほかのWeb Components UIライブラリたち

たくさんあるので名前のみ列挙…

Vaadin UI Components：Java利用者向けらしい（よく知らない）
Nord Design System : 医療・ヘルスケアのNordhealthが提供するデザインシステム。オシャレ！このUIはWeb Componentsで作ったみたい。
PatternFly Elements (Red Hat) : RedHatからも登場だ！軽量コンポーネントをツリーシェイキングして取り込んで使う感じかな

基本的に、2020年以降あたりから徐々に、UIライブラリ/デザインシステムに、Web Componentsが採用され始めた感じ。

終わりに — 選択肢が増えた2025年これはWebComponent元年？

これまで「Web Components はまだ早い」と言われていた時期もありましたが、2025 年現在では多くの UI ライブラリやデザインシステムが 標準ベースのコンポーネント を提供し始めていましたね！

Web Components はフレームワークに依存せず再利用可能な UI 部品を作るためのWeb標準技術で、昨今はブラウザ対応が整い Declarative Shadow DOM などの新機能も実装され、「ネイティブな UI コンポーネントを共有」 が現実に。特にデザインシステムや UI ライブラリの領域では、React/Vue などの枠を超えてコンポーネントを再利用したいというニーズが強く、Web Components 採用の動きが顕著です。

Microsoft、Adobe、SAP、Red Hat、Nordhealth など大手ベンダーが本格採用し、Ionic や Vaadin のようなフレームワークも Web Components へ移行しました。これにより、プロジェクトごとにフレームワークが違っても 同一の UI コンポーネントを共有できる という理想がすでに始まってます。