実践練習: タスク管理アプリケーション

Qwik フレームワークを用いた実践練習の作成について学びます。ここでは、基本的なタスク管理アプリケーションを例に、アプリケーションの設計、機能の実装、そしてそれらを組み合わせて動作する完全なアプリケーションの作成方法を説明します。

アプリケーションの概要

このタスク管理アプリケーションでは、ユーザーは以下の操作を行うことができます：

  • タスクの作成
  • タスクのリスト表示
  • タスクの完了マーク
  • タスクの削除

アプリケーションのコンポーネント設計

1. タスク入力フォームコンポーネント

  • 目的: 新しいタスクを入力して追加するためのフォーム。
  • 機能: テキスト入力と「追加」ボタンを含む。

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

  • 目的: 追加されたタスクをリスト表示する。
  • 機能: 各タスクに対して、完了チェックボックスと削除ボタンを含む。

3. タスクアイテムコンポーネント

  • 目的: 個々のタスクを表示する。
  • 機能: タスクの内容、完了状態のチェックボックス、削除ボタンを含む。

実装ステップ

ステップ 1: タスク入力フォームの実装

// src/components/TaskInput.tsx
import { component$, useStore } from '@builder.io/qwik';

export const TaskInput = component$((props) => {
  const state = useStore({
    task: '',
  });

  return (
    <form
      onSubmit$={(event) => {
        event.preventDefault();
        props.onAddTask(state.task);
        state.task = ''; // 入力フィールドをクリア
      }}
    >
      <input
        type='text'
        value={state.task}
        onInput$={(event) => (state.task = event.target.value)}
        placeholder='新しいタスクを入力'
      />
      <button type='submit'>追加</button>
    </form>
  );
});

ステップ 2: タスクリストの実装

// src/components/TaskList.tsx
import { component$, useStore } from '@builder.io/qwik';
import { TaskItem } from './TaskItem';

export const TaskList = component$(() => {
  const state = useStore({
    tasks: [],
  });

  return (
    <div>
      {state.tasks.map((task, index) => (
        <TaskItem key={index} task={task} />
      ))}
    </div>
  );
});

ステップ 3: タスクアイテムの実装

// src/components/TaskItem.tsx
import { component$, useStore } from '@builder.io/qwik';

export const TaskItem = component$((props) => {
  const state = useStore({
    isCompleted: props.task.isCompleted,
  });

  return (
    <div>
      <input
        type='checkbox'
        checked={state.isCompleted}
        onChange$={() => (state.isCompleted = !state.isCompleted)}
      />
      <span>{props.task.content}</span>
      <button onClick$={() => props.onDeleteTask(props.task.id)}>削除</button>
    </div>
  );
});