Zenn
🔰

Angular v19 で学ぶ！初心者向けタスク管理アプリの作成チュートリアル

に公開
Angular
JavaScript
TypeScript
初心者
tutorial
tech

概要

このチュートリアルでは、Angular v19 を使ってシンプルなタスク管理アプリを作成 します。
フォームを使ったデータ入力や、リストを表示・削除する機能を通じて、Angular の基本を実践的に学ぶことができます！
✅ このチュートリアルで学べること

  • Angularの基本的なディレクティブ（@for）
  • 双方向データバインディング（[(ngModel)]）
  • コンポーネントの作成と管理
  • イベントバインディング（(click) など）

前提条件

このチュートリアルを進めるために、以下の環境と基本知識が必要です。

1. 環境

  • Node.js（v18 以上推奨）
  • Angular CLI（最新バージョン）
  • エディター（VSCodeなど）

2. 必要な基本知識

  • HTML / CSS の基礎
  • JavaScript / TypeScript の基本構文
  • ターミナル（コマンドライン）の操作

今回作るもの

このチュートリアルでは、以下のようなタスク管理アプリ を作成します。

📌 タスク管理アプリの機能

✅ タスクの追加：フォームに入力してタスクをリストに追加
✅ タスクの削除：リストから不要なタスクを削除
✅ リアルタイム更新：タスクを追加・削除したら即座に反映
画面イメージ

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

まずはAngularのプロジェクトを作成し、開発環境を整えます。

1.1 Angular CLI のインストール

Angular CLI（コマンドラインツール）をインストールします。
（すでにインストール済みの場合は ng version で確認）

npm install -g @angular/cli

✅ インストール確認

ng version

Angular CLI: 19.x.x と表示されていれば OK！

1.2 新しい Angular プロジェクトの作成

ng new <project-name>

<project-name>に任意のプロジェクト名を入力します。
今回はプロジェクト名をtask-managerとします。

プロジェクトを作成したら、ディレクトリへ移動しましょう。

cd task-manager

1.3 開発サーバーの起動

npm start

✅ http://localhost:4200 にアクセスし、初期画面が表示されれば成功！

2. タスク管理アプリの基本UIを作成

次に、タスクの追加・一覧表示のUIを作ります。

2.1 TaskComponent を作成

ng generate component Task

✅ src/app/task/task.component.ts が作成されます。
このファイルは、これから実装するタスク管理の機能を持つコンポーネントのTypeScriptファイルです。
Angularでは、コンポーネントごとに*.component.tsというファイルを持ち、ビュー（HTML）とロジック（TypeScript）を分離しています。
task.component.tsと同じディレクトリにtask.component.html,task.component.cssまたはtask.component.scssが生成されています。

プロジェクトの構造については以下公式ドキュメントを参考にしてください。
ワークスペース構成ファイル

2.2 TaskComponent の編集

task.component.tsを以下のように編集します。

task.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-task', // HTML内でどのように使うかを決める識別子
  imports: [FormsModule], // コンポーネントで使用するモジュールを指定する
  templateUrl: './task.component.html', // このコンポーネントのテンプレート（HTML）を指定
  styleUrl: './task.component.css' // このコンポーネントに適用するスタイル（CSS / SCSS）を指定
})
export class TaskComponent {
  tasks: string[] = []; // 追加されたタスクのリスト
  newTask: string = ''; // フォームに入力された値を格納する

  // タスクを追加する
  addTask() {
    if(this.newTask.trim()) {
      this.tasks.push(this.newTask.trim());
      this.newTask = '';
    }
  }

  // タスクを削除する
  removeTask(index: number) {
    this.tasks.splice(index, 1);
  }
}

✅ 解説

  • @Component
    @Componentをつけると、そのクラスは(TaskComponent)Angularのコンポーネントになります。

@Componentの構造

プロパティ 説明
selector コンポーネントのタグ名(<app-task>で使用)
import コンポーネントで使用するモジュールを指定
templateUrl コンポーネントの HTML ファイルを指定
styleUrls コンポーネントの CSS/SCSS ファイルを指定

FormsModuleは、Angular のフォームを簡単に扱えるようにする機能です。
詳細は以下の公式ドキュメントを参照してください。
[フォーム]https://angular.jp/tutorials/learn-angular/15-forms

  • export class TaskComponent
    TaskComponentは、@Componentに対応するコンポーネントのロジックを記述するクラスで今回は、タスクの追加や削除といったロジックを記載しています。
    このクラスにはデータ（変数）や関数（メソッド）を書いて、コンポーネントの動作を定義します。

2.3 TaskComponentのテンプレート作成

task.component.tsを以下のように編集します。

task.component.html
<div class="task-container">
    <h2>タスク管理</h2>

    <input [(ngModel)]="newTask" placeholder="タスクを入力" />
    <button (click)="addTask()">追加</button>

    <ul>
        @for (task of tasks; track $index) {
            <li>
               {{ task }}
               <button (click)="removeTask($index)">削除</button> 
            </li>
        }
    </ul>
</div>

✅ 解説
Angularでは、データを効率的に管理し、イベントを処理するための構文が用意されています。

  • [(ngModel)]
    「テンプレート（HTML）」と「TypeScriptの変数（プロパティ）」をリアルタイムで同期する機能です。
    今回のタスク管理アプリでは、inputに入力された値がtodo.component.tsのnewTaskにリアルタイムに格納されます。
    この機能のことを双方向データバインディングといいます。
  • (click)="関数名()"
    クリックイベントを受け取り、todo.component.tsのaddtask()を実行します。
    この機能のことをイベントバインディングといいます。
  • @for (task of tasks; track $index)
    Angular 17で導入された新しい構文で、tasks 配列をループしリストを表示しています。
    tasks の内容が <li> に表示され、track $index で、各要素のインデックスを追跡し削除を実行することができます。

2.4 スタイルを追加

task.component.cssを以下のように編集します。

task.component.css
.task-container {
  max-width: 400px;
  margin: auto;
  text-align: center;
}

input {
  padding: 8px;
  width: 70%;
  margin-right: 10px;
}

button {
  padding: 8px;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  background: #f4f4f4;
  padding: 10px;
  margin-top: 5px;
  display: flex;
  justify-content: space-between;
}

スタイルはプロジェクト作成時に、scssなどいくつかの選択肢から選びます。

2.5 TaskComponent を AppComponent に追加

task.component.cssを以下のように編集します。

app.component.ts
import { Component } from '@angular/core';
import { TaskComponent } from './task/task.component';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<app-task></app-task>`,
  imports: [TaskComponent]
})
export class AppComponent {}

✅ 解説
app.component.ts
はAngularアプリケーションのメインコンポーネント（ルートコンポーネント） です。すべてのコンポーネントの親となるコンポーネントで、アプリのエントリーポイントとして機能します。

  • templete
    HTML を TypeScript 内で直接記述（インラインテンプレート）するためのプロパティです。短い時間HTML（1~3行）や簡単なUIの場合に使用します。

おわりに

いかがでしたでしょうか。
私も、最近Angularを使った業務に携わる機会がありAngularを学び始め、アウトプットとしてこういったチュートリアルを作成してみました。
実際に手を動かして何か作ってみることで言語理解へのハードルも下がりますよね。
最近のドキュメントもチュートリアルが充実しているので、助かります。
是非、初学の一助となれば幸いです。
最後までお読みいただき、ありがとうございました！

Discussion