preactのToDoアプリをTypescriptで実装するサンプル

TypeScript ✕ preact のToDoアプリサンプル

環境の構築手順

preact-cliのインストール

コマンドプロンプトまたはターミナルを開いて、以下のコマンドを実行し、Preact CLIをインストールする

npm install -g preact-cli

プロジェクトの作成

Preact CLIを使用して、TypeScriptでのプロジェクトを作成するため、以下のコマンドを実行する

preact create typescript my-todo-app
cd my-todo-app

パッケージのインストール

作成されたプロジェクトディレクトリに移動し、必要な依存関係をインストールする。

yarn install

ToDoアプリの実装

src/components/app.tsxを以下のように編集する

import { h, FunctionComponent } from 'preact';
import { useState } from 'preact/hooks';

type Todo = {
  id: number;
  text: string;
  completed: boolean;
};

const App: FunctionComponent = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [input, setInput] = useState<string>('');

  const addTodo = () => {
    if (input.trim() !== '') {
      setTodos([
        ...todos,
        { id: Date.now(), text: input.trim(), completed: false },
      ]);
      setInput('');
    }
  };

  const toggleTodo = (id: number) => {
    setTodos(
      todos.map((todo) =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  };

  const deleteTodo = (id: number) => {
    setTodos(todos.filter((todo) => todo.id !== id));
  };

  return (
    <div>
      <h1>Todoアプリ</h1>
      <input
        type="text"
        value={input}
        onInput={(e) => setInput((e.target as HTMLInputElement).value)}
      />
      <button onClick={addTodo}>追加</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id} style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
            <input
              type="checkbox"
              checked={todo.completed}
              onChange={() => toggleTodo(todo.id)}
            />
            {todo.text}
            <button onClick={() => deleteTodo(todo.id)}>削除</button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

実行

以下のコマンドを実行し、ローカルサーバ上でWebアプリを表示する

yarn dev