Webフロントエンド - フレームワーク・ライブラリ

Lit りっと

Web Componentsカスタム要素Shadow DOMテンプレートリテラルGoogleLitElement

Litについて教えて

簡単に言うとこんな感じ！

Litは「ブラウザが直接理解できる部品」を作るための超軽量ライブラリだよ！ReactやVueみたいに独自のしくみに頼らず、ブラウザ標準の機能をフル活用して、どこでも使い回せるUIパーツを作れるってこと！

Litとは

Litは、Googleが開発・メンテナンスするオープンソースの軽量JavaScriptライブラリです。Web Components（ウェブコンポーネント）と呼ばれるブラウザ標準の仕組みを使って、再利用可能なUIパーツ（コンポーネント）を簡単に作るためのツールです。ファイルサイズはわずか約5KB（gzip圧縮後）と非常に軽く、ページの読み込み速度に与える影響を最小限に抑えられます。

ReactやVueといったフレームワークが「独自のランタイム（動作環境）」を必要とするのに対し、LitはブラウザにもともとあるAPIを薄くラップする（覆う）だけです。そのため特定のフレームワークに縛られず、ReactプロジェクトにもVueプロジェクントにも、あるいはフレームワークなしのHTMLページにも同じコンポーネントをそのまま組み込めます。

企業がデザインシステム（全社共通のUIパーツ集）を作るときや、複数の異なる技術スタックを持つプロジェクトに同じUIを展開したいときに特に威力を発揮します。

Litの3つのコア技術

Litは以下のブラウザ標準技術を組み合わせて動作します。

技術	役割	一言説明
カスタム要素（Custom Elements）	部品の定義	`<my-button>` のような独自HTMLタグを作れる
Shadow DOM	スタイルの隔離	部品の内部CSSが外に漏れない・外から侵入しない
HTMLテンプレートリテラル	描画の記述	JavaScript文字列でHTMLを簡潔に書ける

これら3つはすべてW3C標準であり、モダンブラウザなら追加ライブラリなしで動作します。Litはこの上に「リアクティブプロパティ（値が変わると自動で画面を更新する仕組み）」と「効率的な差分更新」を加えた薄いレイヤーです。

コードのイメージ（テンプレートリテラルの書き方）

import { LitElement, html, css } from 'lit';

class MyGreeting extends LitElement {
  static properties = { name: { type: String } };
  static styles = css`p { color: #1e3a8a; font-weight: bold; }`;

  render() {
    return html`<p>こんにちは、${this.name}さん！</p>`;
  }
}
customElements.define('my-greeting', MyGreeting);

<!-- 使う側はこれだけ。どのフレームワークでもOK -->
<my-greeting name="田中"></my-greeting>

覚え方：「Lit = Light（軽い）+ リアクティブ」

「ライター（lighter）で火をつける＝素早く軽く動く」とイメージすると覚えやすいです。実際、前身ライブラリの名前は LitElement → lit-html と変遷し、2021年に「Lit」として統合されました。

歴史と背景

2013年 — Googleが社内でPolymerプロジェクトを開始。Web Componentsの普及を牽引
2017年 — Polymerの軽量後継として lit-html ライブラリを公開。テンプレートリテラルによる高速レンダリングが注目を集める
2018年 — コンポーネントクラスの基底として LitElement を追加公開
2019年 — Polymerは非推奨（deprecated）となり、LitElement/lit-htmlへの移行が推奨される
2021年 — lit-html と LitElement を統合した Lit 2.0 を正式リリース。パッケージ名も lit に統一
2023年 — Lit 3.0リリース。IE11サポートを完全廃止しモダンブラウザに最適化、TypeScriptデコレーターの標準化対応
現在 — Google内部の製品（YouTube Studio等）やAdobe、SAP、ING銀行などが採用するエンタープライズ向けデザインシステムの基盤として広く利用

ReactやVueとの比較

Litは「フレームワーク」ではなく「Web Componentsライブラリ」という位置づけです。何を選ぶべきかは用途次第です。

比較項目	Lit	React	Vue
ファイルサイズ	約5KB	約45KB	約34KB
動作環境	ブラウザ標準のみ	独自ランタイム必要	独自ランタイム必要
他FWとの共存	◎ どこでも使える	△ React同士のみ	△ Vue同士のみ
学習コスト	低〜中（HTML/JS知識で可）	中〜高	中
エコシステム	小〜中	非常に大きい	大きい
主な用途	デザインシステム・部品配布	SPAアプリ全体	SPAアプリ全体

以下の図は「Litのコンポーネントがどのレイヤーで動くか」を示しています。

規格	内容
W3C Custom Elements	独自HTMLタグを定義するブラウザ標準仕様（WHATWG HTML Living Standard）
W3C Shadow DOM	DOMのスコープ隔離を実現するブラウザ標準仕様
TC39 Tagged Template Literals	Litのテンプレート記法の基盤となるECMAScript仕様