応用コンポーネントの開発

Lit の応用的な使用法を示すために、ユーザーの入力を受け取り、条件に基づいて表示を切り替える簡単なタスクリストアプリケーションを作成します。

1. リアクティブなプロパティ

Lit では、プロパティの変更を監視し、変更があるたびにコンポーネントのレンダリングを自動的に更新します。以下のコードは、タスクリストを管理するコンポーネントを示しています。

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

class TaskList extends LitElement {
  @property({ type: Array }) tasks = [];

  static styles = css`
    .completed {
      text-decoration: line-through;
    }
  `;

  addTask(task) {
    this.tasks = [...this.tasks, { text: task, completed: false }];
  }

  toggleCompleted(index) {
    const tasks = [...this.tasks];
    tasks[index].completed = !tasks[index].completed;
    this.tasks = tasks;
  }

  render() {
    return html`
      <ul>
        ${this.tasks.map(
          (task, index) => html`
            <li
              class=${task.completed ? 'completed' : ''}
              @click=${() => this.toggleCompleted(index)}
            >
              ${task.text}
            </li>
          `,
        )}
      </ul>
    `;
  }
}

customElements.define('task-list', TaskList);

このコンポーネントでは、tasks配列内の各タスクの完了状態を切り替えることができます。toggleCompletedメソッドは、指定されたインデックスのタスクのcompletedプロパティを反転します。

2. スロットと Shadow DOM の活用

Lit では、スロットを使用して子コンポーネントにデフォルトのコンテンツを提供することができます。これにより、コンポーネントの柔軟性が高まります。

import { LitElement, html } from 'lit';

class CustomCard extends LitElement {
  render() {
    return html`
      <div>
        <slot name="header"></slot>
        <slot name="content"></slot>
      </div>
    `;
  }
}

customElements.define('custom-card', CustomCard);

このCustomCardコンポーネントは、ユーザーがheaderとcontentスロットに独自の HTML を挿入できるようにしています。

3. 外部ライブラリとの統合

Lit コンポーネント内で外部ライブラリを使用することも可能です。例えば、日付を扱う際にdate-fnsライブラリを使用する場合、次のようにインポートして使用できます。

import { LitElement, html } from 'lit';
import { format } from 'date-fns';

class CurrentDate extends LitElement {
  render() {
    return html`<p>Today's date is ${format(new Date(), 'yyyy-MM-dd')}</p>`;
  }
}

customElements.define('current-date', CurrentDate);

4. パフォーマンス最適化

Lit はデフォルトで高速ですが、大量のデータや複雑な更新を扱う場合には、パフォーマンスをさらに最適化することが重要です。例えば、リストのレンダリングを最適化するには、リストのアイテムごとに個別のコンポーネントを作成し、変更があったアイテムのみを更新するようにします。