ブログ

8-2.DartPadを使った小規模プロジェクトの実装: Todoリストアプリケーション

1. プロジェクトの概要

このプロジェクトでは、DartPadを使用して簡単なTodoリストアプリケーションを作成します。このアプリケーションは、ユーザーがタスクを追加、表示、削除できる機能を提供します。

2. プロジェクトの構成

DartPadを開き、以下のコードを入力して実行します。DartPadは、ブラウザで dartpad.dev にアクセスして使用します。

1. Todoリストアプリケーションの基本構造

まず、基本的なHTMLとCSSを設定して、アプリケーションの構造を作成します。

Dart
import 'dart:html';

void main() {
  querySelector('#output')?.appendHtml('''
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f5f5f5;
      }

      #todo-list {
        margin-top: 20px;
        width: 300px;
      }

      .todo-item {
        display: flex;
        justify-content: space-between;
        background: white;
        padding: 10px;
        margin-bottom: 5px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .todo-item button {
        background: #ff6b6b;
        border: none;
        padding: 5px 10px;
        color: white;
        border-radius: 3px;
        cursor: pointer;
      }

      input {
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
        width: calc(100% - 24px);
        margin-bottom: 10px;
      }

      button {
        padding: 10px;
        border-radius: 4px;
        border: none;
        background-color: #4caf50;
        color: white;
        cursor: pointer;
        width: calc(100% - 24px);
      }
    </style>
    <div>
      <h1>Todo List App</h1>
      <input type="text" id="task-input" placeholder="Enter a task">
      <button id="add-task">Add Task</button>
      <div id="todo-list"></div>
    </div>
  ''', treeSanitizer: NodeTreeSanitizer.trusted);
}

このコードは、HTMLとCSSを設定し、#output要素に追加します。

2. Todoリストの機能の実装

次に、タスクの追加、表示、削除の機能を実装します。ユーザーが入力したタスクをリストに追加し、リストからタスクを削除できるようにします。

Dart
import 'dart:html';

void main() {
  querySelector('#output')?.appendHtml('''
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f5f5f5;
      }

      #todo-list {
        margin-top: 20px;
        width: 300px;
      }

      .todo-item {
        display: flex;
        justify-content: space-between;
        background: white;
        padding: 10px;
        margin-bottom: 5px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .todo-item button {
        background: #ff6b6b;
        border: none;
        padding: 5px 10px;
        color: white;
        border-radius: 3px;
        cursor: pointer;
      }

      input {
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
        width: calc(100% - 24px);
        margin-bottom: 10px;
      }

      button {
        padding: 10px;
        border-radius: 4px;
        border: none;
        background-color: #4caf50;
        color: white;
        cursor: pointer;
        width: calc(100% - 24px);
      }
    </style>
    <div>
      <h1>Todo List App</h1>
      <input type="text" id="task-input" placeholder="Enter a task">
      <button id="add-task">Add Task</button>
      <div id="todo-list"></div>
    </div>
  ''', treeSanitizer: NodeTreeSanitizer.trusted);

  List<String> tasks = [];

  querySelector('#add-task')?.onClick.listen((_) {
    InputElement? taskInput = querySelector('#task-input') as InputElement?;
    String task = taskInput?.value ?? '';

    if (task.isNotEmpty) {
      tasks.add(task);
      taskInput?.value = '';
      renderTasks(tasks);
    }
  });
}

void renderTasks(List<String> tasks) {
  Element? todoList = querySelector('#todo-list');
  todoList?.children.clear();

  for (String task in tasks) {
    Element taskItem = DivElement()
      ..className = 'todo-item'
      ..innerHtml = '''
        <span>$task</span>
        <button>Delete</button>
      ''';

    taskItem.querySelector('button')?.onClick.listen((_) {
      tasks.remove(task);
      renderTasks(tasks);
    });

    todoList?.append(taskItem);
  }
}

このコードでは、以下の機能を実装しています：

  1. タスクの追加：ユーザーが入力したタスクをリストに追加します。
  2. タスクの表示：追加されたタスクを表示します。
  3. タスクの削除：ユーザーがタスクを削除できるようにします。

3. 完成したTodoリストアプリケーション

上記のコードをすべてDartPadに入力し、実行します。完成したTodoリストアプリケーションは、ユーザーがタスクを追加、表示、削除できるようになります。

Dart
import 'dart:html';

void main() {
  querySelector('#output')?.appendHtml('''
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
        margin: 0;
        background-color: #f5f5f5;
      }

      #todo-list {
        margin-top: 20px;
        width: 300px;
      }

      .todo-item {
        display: flex;
        justify-content: space-between;
        background: white;
        padding: 10px;
        margin-bottom: 5px;
        border-radius: 4px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .todo-item button {
        background: #ff6b6b;
        border: none;
        padding: 5px 10px;
        color: white;
        border-radius: 3px;
        cursor: pointer;
      }

      input {
        padding: 10px;
        border-radius: 4px;
        border: 1px solid #ddd;
        width: calc(100% - 24px);
        margin-bottom: 10px;
      }

      button {
        padding: 10px;
        border-radius: 4px;
        border: none;
        background-color: #4caf50;
        color: white;
        cursor: pointer;
        width: calc(100% - 24px);
      }
    </style>
    <div>
      <h1>Todo List App</h1>
      <input type="text" id="task-input" placeholder="Enter a task">
      <button id="add-task">Add Task</button>
      <div id="todo-list"></div>
    </div>
  ''', treeSanitizer: NodeTreeSanitizer.trusted);

  List<String> tasks = [];

  querySelector('#add-task')?.onClick.listen((_) {
    InputElement? taskInput = querySelector('#task-input') as InputElement?;
    String task = taskInput?.value ?? '';

    if (task.isNotEmpty) {
      tasks.add(task);
      taskInput?.value = '';
      renderTasks(tasks);
    }
  });
}

void renderTasks(List<String> tasks) {
  Element? todoList = querySelector('#todo-list');
  todoList?.children.clear();

  for (String task in tasks) {
    Element taskItem = DivElement()
      ..className = 'todo-item'
      ..innerHtml = '''
        <span>$task</span>
        <button>Delete</button>
      ''';

    taskItem.querySelector('button')?.onClick.listen((_) {
      tasks.remove(task);
      renderTasks(tasks);
    });

    todoList?.append(taskItem);
  }
}

このコードは以下の機能を実現しています：

  1. タスクの追加：ユーザーが入力したタスクをリストに追加します。
  2. タスクの表示：追加されたタスクを表示します。
  3. タスクの削除：ユーザーがタスクを削除できるようにします。

3. 完成したTodoリストアプリケーション

上記のコードをすべてDartPadに入力し、実行します。完成したTodoリストアプリケーションは、ユーザーがタスクを追加、表示、削除できるようになります。

4. まとめ

この教科書では、DartPadを使用して簡単なTodoリストアプリケーションを作成する方法を学びました。基本的なHTMLとCSSの設定、イベントハンドリング、スタイリングの追加などを行いました。DartPadを使うことで、ローカル環境を構築することなく、簡単にDartのプログラミングを学習し、プロジェクトを実装することができます。

コメントを残す