ここまでで学んだAngularの基礎知識を活用し、実際にアプリケーションを構築してみましょう。
本章では、ToDoアプリやブログアプリのようなシンプルなアプリケーションの作成を通じて、コンポーネント設計、フォーム、サービス、ルーティング、API連携などを実践的に体得します。
1. 実践：簡単なToDoアプリの作成
ToDoアプリは、Angular学習者にとって最もベーシックな題材です。
以下の機能を盛り込みながら構築します。
- タスクの追加・削除・完了切り替え
- フォームによるタスク入力
*ngForによるリスト表示ngModelによる双方向バインディング
構成イメージ
- app.component.ts：メインロジック
- app.component.html：テンプレート
- todo.model.ts：ToDo型定義（interface）
ToDoモデル
export interface Todo {
id: number;
title: string;
completed: boolean;
}
タスクの追加・削除
フォームの入力値を受け取り、todos配列に追加。削除はfilterで実装。
2. 実践：APIと連携したCRUD操作
外部API（例：JSONPlaceholder）を使用し、HTTP通信による基本的なCRUD機能を実装します。
- Create：POSTで新しいデータ追加
- Read：GETでデータ一覧取得
- Update：PUTで編集
- Delete：DELETEで削除
APIサービスの作成
ng generate service api
HttpClientModuleをimport済みであることを確認。
CRUDメソッド例（api.service.ts）
getPosts(): Observable<any[]> {
return this.http.get<any[]>(this.baseUrl);
}
addPost(post: any): Observable<any> {
return this.http.post(this.baseUrl, post);
}
updatePost(id: number, post: any): Observable<any> {
return this.http.put(${this.baseUrl}/${id}, post);
}
deletePost(id: number): Observable<any> {
return this.http.delete(${this.baseUrl}/${id});
}
3. 実践：検索フィルターやページネーションの実装
大量データを扱うときに便利な機能として、検索フィルターやページネーションを加えます。これにより、UIが格段に使いやすくなります。
検索フィルター
検索入力に対して、表示リストをfilter()で絞り込みます。
<input [(ngModel)]="keyword" placeholder="検索">
<li *ngFor="let item of items | filter:keyword">{{ item.name }}</li>
※ filterパイプはカスタムパイプとして作成が必要です。
ページネーション
表示件数を制限し、現在のページ位置を管理するロジックを実装します。
または、ngx-pagination などの外部ライブラリも利用可能です。
<ul>
<li *ngFor="let item of items | paginate: { itemsPerPage: 5, currentPage: page }">
{{ item.name }}
</li>
</ul>
<pagination-controls (pageChange)="page = $event"></pagination-controls>
まとめ
この章では、実践的なアプリ構築を通じて、Angularの基礎要素を統合的に活用する方法を学びました。フォーム、バインディング、ルーティング、サービス、HTTP通信、UI機能（検索・ページング）など、現場で求められる開発スキルを体験できたはずです。
