実践練習: ブログ投稿アプリケーション開発

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

プロジェクトディレクトリを作成し、Lit と必要な依存関係をインストールします。

mkdir lit-blog-app
cd lit-blog-app
npm init -y
npm install lit

2. コンポーネントの設計

アプリケーションの主要なコンポーネントを設計します。

  • BlogApp: アプリケーションのメインコンポーネント。
  • BlogPost: 個々のブログ投稿を表示するコンポーネント。
  • CreatePostForm: 新しいブログ投稿を作成するフォームのコンポーネント。

3. BlogPost コンポーネントの実装

ブログ投稿を表示するコンポーネントを作成します。

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

class BlogPost extends LitElement {
  static properties = {
    title: { type: String },
    content: { type: String },
  };

  static styles = css`
    .post {
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
  `;

  render() {
    return html`
      <div class="post">
        <h2>${this.title}</h2>
        <p>${this.content}</p>
      </div>
    `;
  }
}

customElements.define('blog-post', BlogPost);

4. CreatePostForm コンポーネントの実装

新しいブログ投稿を作成するフォームコンポーネントを作成します。

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

class CreatePostForm extends LitElement {
  render() {
    return html`
      <form @submit="${this._handleSubmit}">
        <input type="text" name="title" placeholder="Title" required />
        <textarea name="content" placeholder="Content" required></textarea>
        <button type="submit">Create Post</button>
      </form>
    `;
  }

  _handleSubmit(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    const title = formData.get('title');
    const content = formData.get('content');
    this.dispatchEvent(
      new CustomEvent('create-post', { detail: { title, content } }),
    );
    event.target.reset();
  }
}

customElements.define('create-post-form', CreatePostForm);

5. BlogApp コンポーネントの実装

アプリケーションのメインコンポーネントを作成し、他のコンポーネントを統合します。

// src/BlogApp.js
import { LitElement, html } from 'lit';
import './components/BlogPost';
import './components/CreatePostForm';

class BlogApp extends LitElement {
  static properties = {
    posts: { type: Array },
  };

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

  render() {
    return html`
      <create-post-form @create-post="${this._addPost}"></create-post-form>
      ${this.posts.map(
        (post) =>
          html`<blog-post
            .title="${post.title}"
            .content="${post.content}"
          ></blog-post>`,
      )}
    `;
  }

  _addPost(event) {
    this.posts = [...this.posts, event.detail];
  }
}

customElements.define('blog-app', BlogApp);

6. アプリケーションの起動とテスト

開発サーバーを使用してアプリケーションをローカルで起動し、機能が期待通りに動作するかテストします。また、@web/test-runnerを使用してコンポーネントのテストを行い、すべてが正しく動作していることを確認します。

7. デプロイ

アプリケーションが完成したら、Netlify や Vercel などのサービスを使用して公開します。これにより、インターネット上でアプリケーションにアクセスできるようになります。