ToDo リストアプリケーション開発

1. プロジェクトのセットアップ

まず、新しい Lit プロジェクトを作成し、必要な依存関係を設定します。

mkdir lit-todo-app
cd lit-todo-app
npm init -y
npm install lit vaadin-router

vaadin-routerは、シングルページアプリケーション(SPA)のルーティングに使用します。

2. タスクリストコンポーネントの作成

タスクを表示するためのコンポーネントを作成します。

// src/components/TaskList.js
import { LitElement, html, css } from 'lit';

class TaskList extends LitElement {
  static properties = {
    tasks: { type: Array },
  };

  static styles = css`
    .task {
      margin-bottom: 10px;
    }
  `;

  render() {
    return html`
      <ul>
        ${this.tasks.map((task) => html` <li class="task">${task.text}</li> `)}
      </ul>
    `;
  }
}

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

3. タスク追加フォームの作成

ユーザーが新しいタスクを追加できるフォームを作成します。

// src/components/AddTaskForm.js
import { LitElement, html } from 'lit';

class AddTaskForm extends LitElement {
  render() {
    return html`
      <form id="addTaskForm" @submit="${this._submit}">
        <input type="text" name="taskText" placeholder="Add a new task" />
        <button type="submit">Add Task</button>
      </form>
    `;
  }

  _submit(event) {
    event.preventDefault();
    const form = this.shadowRoot.querySelector('#addTaskForm');
    const formData = new FormData(form);
    const taskText = formData.get('taskText');
    this.dispatchEvent(
      new CustomEvent('add-task', { detail: { text: taskText } }),
    );
    form.reset();
  }
}

customElements.define('add-task-form', AddTaskForm);

4. アプリケーションのメインコンポーネント

メインコンポーネントでは、タスクリストとタスク追加フォームを組み合わせ、タスクの追加機能を実装します。

// src/App.js
import { LitElement, html } from 'lit';
import './components/TaskList';
import './components/AddTaskForm';

class App extends LitElement {
  static properties = {
    tasks: { type: Array },
  };

  constructor() {
    super();
    this.tasks = [];
  }

  render() {
    return html`
      <add-task-form @add-task="${this._addTask}"></add-task-form>
      <task-list .tasks="${this.tasks}"></task-list>
    `;
  }

  _addTask(event) {
    this.tasks = [...this.tasks, { text: event.detail.text }];
  }
}

customElements.define('my-app', App);

5. ルーティングと SPA のセットアップ

アプリケーションで複数のページを管理するために、vaadin-routerを設定します。

// src/index.js
import { Router } from 'vaadin-router';
import './App';

window.addEventListener('load', () => {
  const router = new Router(document.querySelector('main'));
  router.setRoutes([
    { path: '/', component: 'my-app' },
    // 他のルートもここに追加できます
  ]);
});

HTML ファイルには、ルーティングされる<main>タグが含まれている必要があります。