lit-best-practices

Lit Web Components のベストプラクティス

AI によるコード生成とレビューに最適化された、Lit Web Components の構築に関するベストプラクティスです。

使用するタイミング

次の場合に、これらのガイドラインを参照してください。

• 新しい Lit Web Components を作成するとき
• リアクティブなプロパティと状態を実装するとき
• パフォーマンスやアクセシビリティの問題についてコードをレビューするとき
• 既存の Lit コンポーネントをリファクタリングするとき
• レンダリングと更新サイクルを最適化するとき

ルールのカテゴリ

カテゴリ	ルール	主な内容
1. コンポーネント構造	4 ルール	プロパティ、状態、TypeScript
2. レンダリング	5 ルール	テンプレート、ディレクティブ、派生状態
3. スタイリング	4 ルール	静的スタイル、テーマ設定、CSS パーツ
4. イベント	3 ルール	カスタムイベント、命名、クリーンアップ
5. ライフサイクル	4 ルール	コールバック、タイミング、非同期処理
6. アクセシビリティ	4 ルール	ARIA、フォーカス、フォーム、ElementInternals
7. パフォーマンス	4 ルール	更新、キャッシュ、遅延読み込み
8. コンポジションとデータ	3 ルール	コントローラー、非同期タスク、コンテキスト
9. セキュリティ	1 ルール	信頼できないマークアップ

優先度レベル

優先度	説明	対応
CRITICAL	重大な正確性またはアクセシビリティの問題	直ちに修正します
HIGH	保守性またはパフォーマンスに大きな影響があります	現在の PR で対応します
MEDIUM	ベストプラクティスに違反しています	関連コードを変更するときに対応します
LOW	スタイル上の好み、マイクロ最適化	リファクタリング時に検討します

ルール一覧

1. コンポーネント構造

• rules/1-1-use-decorators.md - TypeScript Decorators を使用する（HIGH）
• rules/1-2-separate-state.md - パブリックプロパティと内部状態を分離する（HIGH）
• rules/1-3-reflect-sparingly.md - プロパティの反映は必要最小限にする（MEDIUM）
• rules/1-4-default-values.md - 必ずデフォルト値を指定する（HIGH）
• rules/1-5-standard-decorators.md - 標準デコレーターには accessor が必要（HIGH）

2. レンダリング

• rules/2-1-pure-render.md - render() は純粋に保つ（CRITICAL）
• rules/2-2-use-nothing.md - 空のコンテンツには nothing を使用する（MEDIUM）
• rules/2-3-use-repeat.md - キー付きリストには repeat() を使用する（HIGH）
• rules/2-4-use-cache.md - 条件付きサブツリーには cache() を使用する（MEDIUM）
• rules/2-5-derived-state.md - 派生状態は willUpdate() で計算する（HIGH）
• rules/2-6-class-style-map.md - classMap と styleMap を使用する（MEDIUM）

3. スタイリング

• rules/3-1-static-styles.md - 必ず静的スタイルを使用する（CRITICAL）
• rules/3-2-host-styling.md - ホスト要素を適切にスタイリングする（HIGH）
• rules/3-3-css-custom-properties.md - テーマ設定には CSS カスタムプロパティを使用する（MEDIUM）
• rules/3-4-css-parts.md - 詳細なスタイリングには CSS Parts を使用する（MEDIUM）

4. イベント

• rules/4-1-composed-events.md - composed イベントをディスパッチする（CRITICAL）
• rules/4-2-event-naming.md - イベントの命名規則に従う（MEDIUM）
• rules/4-3-cleanup-listeners.md - イベントリスナーをクリーンアップする（HIGH）

5. ライフサイクル

• rules/5-1-super-call-order.md - super() の呼び出し順序を正しくする（CRITICAL）
• rules/5-2-first-updated.md - DOM 操作には firstUpdated を使用する（HIGH）
• rules/5-3-will-update.md - 派生状態には willUpdate を使用する（HIGH）
• rules/5-4-update-complete.md - updateComplete を使用して非同期処理を行う（MEDIUM）

6. アクセシビリティ

• rules/6-1-delegates-focus.md - インタラクティブなコンポーネントには delegatesFocus を使用する（HIGH）
• rules/6-2-aria-attributes.md - カスタムのインタラクティブなコンポーネントには ARIA を使用する（CRITICAL）
• rules/6-3-form-associated.md - フォーム関連のカスタム要素（HIGH）
• rules/6-4-element-internals.md - ElementInternals を介してセマンティクスを提供する（MEDIUM）

7. パフォーマンス

• rules/7-1-has-changed.md - 複雑な型にはカスタムの hasChanged を使用する（HIGH）
• rules/7-2-batch-updates.md - プロパティの更新をまとめる（MEDIUM）
• rules/7-3-lazy-loading.md - 重い依存関係を遅延読み込みする（HIGH）
• rules/7-4-memoization.md - コストの高い計算結果をメモ化する（MEDIUM）

8. 構成とデータ

• rules/8-1-reactive-controllers.md - 共有ロジックをリアクティブコントローラーに切り出す（高）
• rules/8-2-async-task.md - 非同期データには Task を使用する（高）
• rules/8-3-context.md - Props のバケツリレーではなく @lit/context を使用する（中）

9. セキュリティ

• rules/9-1-unsafe-html.md - 信頼できないデータを unsafeHTML に渡さない（重大）

クイックリファレンス

必須のインポート

// Core
import { LitElement, html, css, nothing } from 'lit';
import { customElement, property, state, query } from 'lit/decorators.js';

// Common Directives
import { repeat } from 'lit/directives/repeat.js';
import { cache } from 'lit/directives/cache.js';
import { classMap } from 'lit/directives/class-map.js';
import { styleMap } from 'lit/directives/style-map.js';
import { until } from 'lit/directives/until.js';

// Official packages
import { Task } from '@lit/task';
import { createContext, provide, consume } from '@lit/context';

コンポーネントのスケルトン

@customElement('my-component')
export class MyComponent extends LitElement {
  static styles = css`
    :host { display: block; }
    :host([hidden]) { display: none; }
  `;

  @property({ type: String }) value = '';
  @property({ type: Boolean, reflect: true }) disabled = false;
  @state() private _internal = '';

  render() {
    return html`<slot></slot>`;
  }
}

リソース

• Lit のドキュメント
• Open Web Components
• Lion Web Components
• web.dev カスタム要素のベストプラクティス