Lit とは？
Lit は、高速で軽量な Web コンポーネントを構築するためのシンプルなライブラリです。
Lit のコアは、リアクティブな状態、スコープされたスタイル、そして小さく、高速で表現力豊かな宣言型テンプレートシステムを提供する、ボイラープレートを排除したコンポーネント基底クラスです。
Lit で何が作れるか？
「Lit で何が作れるか？」へのパーマリンクLit を使えば、あらゆる種類の Web UI を構築できます！
Lit について最初に知っておくべきことは、**すべての Lit コンポーネントは標準の Web コンポーネント である**ということです。Web コンポーネントは相互運用性のスーパーパワーを持っています。ブラウザでネイティブにサポートされている Web コンポーネントは、あらゆる HTML 環境で、あらゆるフレームワーク、あるいはフレームワークなしで使用できます。
これは、**共有可能なコンポーネントやデザインシステム**を開発する際に Lit を理想的な選択肢にします。Lit コンポーネントは、複数のアプリやサイトで使用できます。たとえそれらのアプリやサイトがさまざまなフロントエンドスタック上に構築されていてもです。Lit コンポーネントを使用するサイト開発者は、Lit コードを記述したり、見たりする必要さえありません。組み込みの HTML 要素と同じようにコンポーネントを使用するだけです。
Lit は、**基本的な HTML サイトを段階的に拡張する**のにも最適です。ブラウザはマークアップ内の Lit コンポーネントを認識し、自動的に初期化します。サイトが手作業で作成されたものでも、CMS で管理されたものでも、サーバーサイドフレームワークで構築されたものでも、Jekyll や eleventy などのツールで生成されたものでもです。
もちろん、React や Vue などのフレームワークと同じように、Lit コンポーネントから**高度にインタラクティブで機能豊富なアプリ**を構築することもできます。Lit の機能と開発エクスペリエンスは、これらの一般的な代替手段に匹敵しますが、Lit はブラウザのネイティブコンポーネントモデルを採用することで、ロックインを最小限に抑え、柔軟性を最大限に高め、保守性を向上させます。
Lit でアプリを構築する場合、「バニラ」Web コンポーネント、または他のライブラリで構築された Web コンポーネントを簡単に追加できます。製品開発を中断することなく、主要な新しいバージョンの Lit に更新したり、別のライブラリに移行したりすることさえ、コンポーネントごとに可能です。
Lit での開発はどのようなものか？
「Lit での開発はどのようなものか？」へのパーマリンク最新のコンポーネントベースの Web 開発を行ったことがあるなら、Lit にすぐに慣れるはずです。コンポーネントを使った開発をしたことがなくても、Lit は非常に親しみやすいと感じるでしょう。
各 Lit コンポーネントは、標準 HTML 要素や他の Web コンポーネントなどの小さな構成要素から組み立てられた、自己完結型の UI ユニットです。そして、各 Lit コンポーネントは、HTML ドキュメント、別の Web コンポーネント、またはフレームワークコンポーネント内で使用して、より大きく複雑なインターフェースを構築できる構成要素となります。
Lit コードがどのように見えるか、そしていくつかの主要な機能を強調した、小さくて重要なコンポーネント（カウントダウンタイマー）を以下に示します。
注意すべき点
- Lit の主な機能は、ネイティブの `HTMLElement` を便利で汎用性の高い拡張した `LitElement` 基底クラスです。これを拡張して独自のコンポーネントを定義します。
- Lit の 表現力豊かで宣言型のテンプレート（JavaScript のタグ付きテンプレートリテラルを使用）により、コンポーネントのレンダリング方法を簡単に記述できます。
- リアクティブプロパティ は、コンポーネントのパブリック API や内部状態を表します。リアクティブプロパティが変更されるたびに、コンポーネントは自動的に再レンダリングされます。
- スタイル はデフォルトでスコープされ、CSS セレクターをシンプルに保ち、コンポーネントのスタイリングが周囲のコンテキストを汚染したり、汚染されたりしないようにします。
- Lit はバニラ JavaScript でうまく機能しますが、デコレータと型宣言を使用して TypeScript を使用することで、さらに優れたエルゴノミクスを実現できます。
Lit は開発中にコンパイルやビルドを必要としないため、必要に応じて事実上ツールなしで使用できます。ファーストクラスの IDE サポート（コード補完、リンティングなど）と 本番環境向けのツール（ローカライズ、テンプレートの縮小など）がすぐに利用できます。
なぜ Lit を選ぶべきか？
「なぜ Lit を選ぶべきか？」へのパーマリンクすでに述べたように、Lit はあらゆる種類の Web UI を構築するための優れた選択肢であり、Web コンポーネントの相互運用性に基づく利点と、最新のエルゴノミクスな開発エクスペリエンスを組み合わせています。
Lit はまた、
- **シンプルです。** Web コンポーネント標準の上に構築された Lit は、満足し生産性を高めるために必要なものだけを追加します。リアクティビティ、宣言型テンプレート、そしてボイラープレートを削減し、作業を容易にするための思慮深い機能です。
- **高速です。** 更新は高速です。なぜなら、Lit は UI の動的部分を追跡し、基になる状態が変化したときにのみそれらを更新するからです。仮想ツリー全体を再構築して DOM の現在の状態と比較する必要はありません。
- **軽量です。** 約 5 KB（縮小および圧縮済み）の Lit は、バンドルサイズを小さくし、読み込み時間を短縮するのに役立ちます。
Lit の背後にあるチームは、Web コンポーネントの黎明期から関わってきました。Google が数万のコンポーネントを保守するのを支援し、包括的な Web コンポーネントポリフィルセットを提供し、標準とコミュニティの活動に深く関わっています。
すべての Lit の機能は、Web プラットフォームの進化を念頭に置いて慎重に設計されています。プラットフォームが今日提供するものを最大限に活用しながら、将来の拡張機能の恩恵を受ける準備ができたコードを記述できるよう支援することを目指しています。