Web Awesome によるフレームワーク非依存の UI コンポーネント

現代のフロントエンド開発は、不快な選択を強いられます。Material UI(React)や Vuetify(Vue)のようなフレームワーク固有のコンポーネントライブラリにコミットし、ベンダーロックインと移行の困難さを受け入れるか、カスタムコンポーネントをゼロから構築し、開発速度と一貫性を犠牲にするかのどちらかです。

本記事では、この誤った二者択一を解消する、ネイティブ Web Components 上に構築されたフレームワーク非依存の UI ライブラリである Web Awesome について探求します。Shoelace の後継として、HTML が動作するあらゆる場所で機能する本番環境対応のコンポーネントを提供し、フレームワーク固有のソリューションに匹敵する強力なテーマ API を備えています。

Web Awesome が異なる理由

コアとなるネイティブ Web Components

Web Awesome は、ブラウザネイティブのカスタム要素、Shadow DOM、CSS カスタムプロパティを活用しています。React や Vue のコンポーネントとは異なり、これらはトランスパイルなしでブラウザ内で直接動作します:

<!-- Works in any HTML file, no build step required -->
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/components/button/button.js"></script>

<wa-button variant="brand">Click me</wa-button>

これは単なる別の抽象化レイヤーではなく、プラットフォーム自体を使用しています。<wa-button> は <button> と同じくらいネイティブで、完全なカプセル化とブラウザ最適化を備えています。

真のフレームワーク非依存性

他のライブラリがアダプターを通じてフレームワーク互換性を主張する一方で、Web Awesome のコンポーネントは真にフレームワーク非依存です。React、Vue、Angular、Svelte、またはバニラ JavaScript で同じように動作します:

// React 19+
import '@awesome.me/webawesome/dist/components/input/input.js';

function Form() {
  return <wa-input label="Email" type="email" required />;
}

<!-- Vue 3 -->
<template>
  <wa-input label="Email" type="email" required />
</template>

<script setup>
import '@awesome.me/webawesome/dist/components/input/input.js';
</script>

ラッパーもアダプターも不要です。カスタムであるだけの HTML 要素です。

Shoelace からの進化

Web Awesome は Shoelace の基盤の上に、重要な改善を加えて構築されています:

• 完全な CSS フレームワーク: コンポーネントを超えて、Web Awesome にはタイポグラフィ、レイアウト、ユーティリティクラスが含まれています
• 強化されたテーマ API: 3層のカスタマイズシステム(グローバルプロパティ、コンポーネントプロパティ、CSS パーツ)
• より大きなコンポーネントライブラリ: Shoelace のベースから拡張され、追加のフォームコントロール、レイアウト、パターンを含む
• Font Awesome 統合: キットコードを通じたオプションのプレミアムアイコンパック

Shoelace からの移行パスは簡単です。ほとんどのコンポーネントは sl- プレフィックスが wa- になる類似した API を共有しています。

ビルドツール不要のテーマ設定

3層のカスタマイズ

Web Awesome のテーマシステムは3つのレベルで動作し、すべて標準 CSS を使用します:

/* 1. Global design tokens */
:root {
  --wa-color-primary-500: #0ea5e9;
  --wa-border-radius-medium: 0.5rem;
  --wa-font-size-base: 16px;
}

/* 2. Component-scoped properties */
wa-button {
  --wa-button-height-medium: 3rem;
  --wa-button-font-weight: 600;
}

/* 3. CSS parts for deep customization */
wa-button::part(label) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

このアプローチは、プリプロセッサやビルドステップなしで Bootstrap のようなテーマの柔軟性を提供します。変更はコンポーネントツリーを通じて自然にカスケードします。

パフォーマンスとアクセシビリティの利点

デフォルトでのレイジーローディング

Web Components は、コンポーネントレベルでの真のレイジーローディングを可能にします。Web Awesome のオートローダーを使用すると、コンポーネントは使用時にのみ読み込まれます:

<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

<!-- Component loads only when <wa-dialog> appears in DOM -->
<wa-dialog label="Settings">...</wa-dialog>

組み込みのアクセシビリティ

すべての Web Awesome コンポーネントには、適切な ARIA 属性、キーボードナビゲーション、フォーカス管理が含まれています。Shadow DOM により、これらの実装が誤って上書きされることはありません:

<!-- Automatically includes role="button", tabindex, keyboard handlers -->
<wa-button disabled>
  Screen readers announce this correctly
</wa-button>

はじめに

ほとんどのプロジェクトでは、CDN アプローチにはわずか2行が必要です:

<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/styles/themes/default.css">
<script type="module" src="https://early.webawesome.com/webawesome@3.0.0-beta.6/dist/webawesome.loader.js"></script>

npm を使用する本番アプリケーションの場合:

npm install @awesome.me/webawesome

その後、必要なものだけをインポートします:

import '@awesome.me/webawesome/dist/styles/themes/default.css';
import '@awesome.me/webawesome/dist/components/card/card.js';
import '@awesome.me/webawesome/dist/components/button/button.js';

標準ベースの UI が重要な理由

Web 標準上に構築されたフレームワーク非依存のコンポーネントは、独自の長期的な利点を提供します。UI コンポーネントは技術スタック間で移植可能なままであり、フレームワークが変更されたときの書き直しコストを削減します。チームは、UI の一貫性を犠牲にすることなく、アプリケーションの異なる部分に異なるフレームワークを選択できます。

最も重要なことは、単一の企業やコミュニティではなく、Web プラットフォーム自体に賭けていることです。Web Components は現在すべてのモダンブラウザでサポートされており、後方互換性を破る可能性が低い仕様となっています。

結論

フレームワークの移行ごとに UI を書き直すことに疲れたチームにとって、Web Awesome は持続可能な代替手段を提供します。あらゆる場所で動作し、CSS だけでカスタマイズ可能で、あらゆるフレームワークトレンドよりも長持ちする標準上に構築されたコンポーネントです。フレームワーク固有のソリューションよりも Web Components を選択することで、明日の環境でどのフレームワークが支配的であっても価値を保持するコードに投資することになります。

よくある質問

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.