プログラミング

Angular タスク管理アプリの作成

最終更新： 03/03/2025
1 分の読み

Angularを使用して、シンプルな「タスク管理アプリ」を作成する方法を完全かつ包括的に説明します。このアプリケーションでは、ユーザーがタスクを追加、削除、完了としてマークすることができます。また、コードと共にアプリケーションの各部分を説明していきます。

必要なツールとセットアップ

  1. Node.jsのインストール
    AngularはNode.jsの上で動作するため、最初にNode.jsの公式サイトから最新のLTSバージョンをインストールします。

    関連記事

  2. Angular CLIのインストール
    Node.jsをインストールしたら、次にAngular CLIをインストールします。CLIはAngularのプロジェクト作成を簡単にするためのツールです。以下のコマンドをターミナルで実行します。

    bash
    npm install -g @angular/cli

  3. 新しいAngularプロジェクトの作成
    新しいAngularプロジェクトを作成するには、次のコマンドを使用します。

    bash
    ng new task-manager

  4. プロジェクトディレクトリに移動
    作成したプロジェクトのディレクトリに移動します。

    bash
    cd task-manager

  5. 開発サーバーの起動
    アプリケーションが正しく動作するかを確認するため、開発サーバーを起動します。

    bash
    ng serve

    これで、ブラウザに http://localhost:4200 にアクセスすると、デフォルトのAngularアプリが表示されます。

タスク管理アプリの実装

1. コンポーネントの作成

タスク管理アプリでは、以下のコンポーネントを作成します。

  • TaskListComponent: タスクのリストを表示
  • TaskInputComponent: 新しいタスクを追加するための入力フォーム
  • TaskService: タスクのデータを管理するサービス

まず、TaskListComponent と TaskInputComponent を作成します。

bash
ng generate component task-list
ng generate component task-input

次に、TaskService を作成します。

bash
ng generate service task

2. TaskServiceの実装

task.service.tsファイルを開いて、以下のコードを追加します。これは、タスクの管理を行うサービスです。

typescript
import { Injectable } from '@angular/core';

export interface Task {
  id: number;
  name: string;
  completed: boolean;
}

@Injectable({
  providedIn: 'root'
})
export class TaskService {
  private tasks: Task[] = [];

  constructor() { }

  // タスクを取得
  getTasks(): Task[] {
    return this.tasks;
  }

  // 新しいタスクを追加
  addTask(name: string): void {
    const newTask: Task = {
      id: this.tasks.length + 1,
      name,
      completed: false
    };
    this.tasks.push(newTask);
  }

  // タスクを削除
  deleteTask(id: number): void {
    this.tasks = this.tasks.filter(task => task.id !== id);
  }

  // タスクを完了としてマーク
  toggleTaskCompletion(id: number): void {
    const task = this.tasks.find(task => task.id === id);
    if (task) {
      task.completed = !task.completed;
    }
  }
}

3. TaskInputComponentの実装

task-input.component.tsを開き、タスクを追加するフォームを作成します。

typescript
import { Component } from '@angular/core';
import { TaskService } from '../task.service';

@Component({
  selector: 'app-task-input',
  templateUrl: './task-input.component.html',
  styleUrls: ['./task-input.component.css']
})
export class TaskInputComponent {
  taskName: string = '';

  constructor(private taskService: TaskService) {}

  addTask(): void {
    if (this.taskName.trim()) {
      this.taskService.addTask(this.taskName);
      this.taskName = '';  // 入力欄をリセット
    }
  }
}

task-input.component.htmlの内容を次のように設定します。

html
<div>
  <input [(ngModel)]="taskName" placeholder="新しいタスクを入力" />
  <button (click)="addTask()">追加button>
div>

4. TaskListComponentの実装

次に、タスクのリストを表示するためのコンポーネントを実装します。task-list.component.tsを次のように編集します。

typescript
import { Component, OnInit } from '@angular/core';
import { TaskService, Task } from '../task.service';

@Component({
  selector: 'app-task-list',
  templateUrl: './task-list.component.html',
  styleUrls: ['./task-list.component.css']
})
export class TaskListComponent implements OnInit {
  tasks: Task[] = [];

  constructor(private taskService: TaskService) {}

  ngOnInit(): void {
    this.tasks = this.taskService.getTasks();
  }

  deleteTask(id: number): void {
    this.taskService.deleteTask(id);
    this.tasks = this.taskService.getTasks();  // 更新
  }

  toggleCompletion(id: number): void {
    this.taskService.toggleTaskCompletion(id);
    this.tasks = this.taskService.getTasks();  // 更新
  }
}

task-list.component.htmlの内容は次のようにします。

html
<div *ngFor="let task of tasks">
  <span [class.completed]="task.completed">{{ task.name }}span>
  <button (click)="toggleCompletion(task.id)">
    {{ task.completed ? '未完了' : '完了' }}
  button>
  <button (click)="deleteTask(task.id)">削除button>
div>

5. スタイルの追加

タスクが完了した場合に文字が打ち消し線で表示されるように、task-list.component.cssに以下のスタイルを追加します。

css
.completed {
  text-decoration: line-through;
  color: gray;
}

6. AppComponentの編集

最後に、app.component.htmlを編集して、TaskListComponent と TaskInputComponent を表示します。

html
<app-task-input>app-task-input>
<app-task-list>app-task-list>

7. 実行と確認

すべてのコードを作成した後、再度開発サーバーを実行して、ブラウザでアプリケーションを確認します。タスクの追加、削除、完了状態の切り替えができることを確認してください。

bash
ng serve

ブラウザで http://localhost:4200 にアクセスすると、シンプルなタスク管理アプリが表示され、タスクを管理することができるようになります。

結論

このようにして、Angularを使ったシンプルなタスク管理アプリを作成することができました。タスクの追加、削除、完了の切り替えができる機能を持つアプリが完成しました。さらに機能を追加することで、アプリをより高度に拡張できます。

最終更新： 03/03/2025
1 分の読み
Back to top button