Elena、プログレッシブWebコンポーネント構築のためのライブラリ

Elena、プログレッシブWebコンポーネント構築のためのライブラリ あなたはLLMですか？最適化されたMarkdownドキュメントを表示するには /llms.txt を、完全なドキュメントバンドルを表示するには /llms-full.txt をご覧ください ██████████ ████ ░░███░░░░░█░░███ ░███ █ ░ ░███ ██████ ████████ ██████ ░██████ ░███ ███░░███░░███░░███ ░░░░░███ ░███░░█ ░███ ░███████ ░███ ░███ ███████ ░███ ░ █ ░███ ░███░░░ ░███ ░███ ███░░███ ██████████ █████░░██████ ████ █████░░████████ ░░░░░░░░░░ ░░░░░ ░░░░░░ ░░░░ ░░░░░ ░░░░░░░░ ░█ シンプルで軽量なライブラリで、プログレッシブWebコンポーネントを構築できます。 はじめに Elenaとは？ Elenaは、プログレッシブWebコンポーネントを構築するためのシンプルで軽量なライブラリです。ほとんどのWebコンポーネントライブラリとは異なり、ElenaはすべてをJavaScriptで行うことを強制しません。HTMLとCSSを先にロードし、その後JavaScriptを使用して段階的にインタラクティビティを追加できます。 ここに最小限の例を示します。 HTML Styles JavaScript ```html <elena-stack direction="row"> <div>First</div> <div>Second</div> <div>Third</div> </elena-stack> ``` ```css @scope (elena-stack) { :scope { display: flex; justify-content: flex-start; align-items: flex-start; flex-flow: column wrap; flex-direction: column; gap: 0.5rem; } :scope[direction="row"] { flex-direction: row; } } ``` ```js import { Elena } from "@elenajs/core"; export default class Stack extends Elena(HTMLElement) { static tagName = "elena-stack"; static props = ["direction"]; direction = "column"; } Stack.define(); ``` プレイグラウンドで試してみてください。 前提条件 このドキュメントは、HTML、CSS、JavaScriptに精通していることを前提としています。カスタム要素に慣れていない場合は、MDNのガイドが良い出発点になりますが、事前の経験は必要ありません。 なぜElenaが作成されたのか Elenaは、@arielleが約10年間にわたりエンタープライズ規模のデザインシステムをWebコンポーネントで構築してきた後に作成されました。繰り返し発生する問題点は、アクセシビリティの問題、サーバーサイドレンダリング、レイアウトシフト、不可視コンテンツのフラッシュ、React Server Components、クライアントサイドJavaScriptへの過度の依存、およびサードパーティ製分析ツールなどとの互換性でした。 Elenaは、Web標準とプラットフォームがネイティブで提供するものに根ざしながら、これらの問題を解決するために構築されました。これが「プログレッシブWebコンポーネント」の誕生です。 なぜElenaを使うべきか Elenaは、コンポーネントライブラリやデザインシステムを作成するチームのために作られています。複数のフレームワーク（React、Next.js、Vue、Angularなど）で動作し、JavaScriptがロードされる前にHTMLとCSSをレンダリングし、アクセシビリティの問題、SSRの制限、レイアウトシフトなどの一般的な問題を回避する必要があるWebコンポーネントが必要な場合、Elenaはまさにそのために作られています。 フレームワーク間の複雑さ（プロップ/属性の同期、イベント委譲、フレームワークの互換性）を処理するため、あなたは配管作業ではなくコンポーネントの構築に集中できます。 Elenaの機能 🔋非常に軽量 2.9kB（ミニファイ＆圧縮済み）、シンプルで軽量な設計。 📈プログレッシブエンハンスメント HTMLとCSSを先にレンダリングし、その後JavaScriptでハイドレーションします。 🫶デフォルトでアクセシブル シャドウDOMの障壁なしに、セマンティックHTMLの基盤。 🌍標準ベース ネイティブカスタム要素とWeb標準のみで構築されています。 ⚡リアクティブアップデート プロップと状態の変更は、効率的でバッチ処理された再レンダリングをトリガーします。 🎨スコープ付きスタイル 複雑な回避策なしの、シンプルでクリーンなCSSカプセル化。 🖥️SSRフレンドリー すぐに動作し、必要に応じてオプションのサーバーサイドユーティリティも利用できます。 🧩依存関係ゼロ ランタイム依存関係なし、完全にWebプラットフォーム上で実行されます。 🔓ロックインゼロ すべての主要フレームワーク、またはフレームワークなしでも動作します。 ブラウザサポート ベースラインとして、Elenaのプログレッシブアプローチは、カスタム要素をレンダリングできるすべてのWebブラウザをサポートします。その後、CSSスタイルとJavaScriptインタラクティビティを作成する際に、プロジェクトにとって何が適切かを判断するのはあなた次第です。JavaScriptライブラリであるElenaは、以下のブラウザの最新2バージョンでテストされています。 次のステップ クイックスタートガイドから始めましょう。 デモについては、ライブ例をご覧ください。 他のWebコンポーネントライブラリとの比較方法をお読みください。 よくある質問については、FAQをご覧ください。 プレイグラウンドでElenaを試してみてください。 Elenaは複数のコンポーネントモデルをサポートしています：内部のHTMLをラップして強化するコンポジットコンポーネント、自己完結型で独自のHTMLをレンダリングするプリミティブコンポーネント、そしてこれらを組み合わせた宣言的コンポーネントで、宣言的シャドウDOMを利用します。 ↩︎