このチャプターの目次
第1章では、機能の少ない簡単なアプリケーションを題材に、リファクタリングを通してAngularアプリケーションのメンテナンス性を高める方法を学んでいきます。
この章を読み終わったとき、次のことを理解できるようになっています。
- 単一責任原則に基づいてコンポーネントをリファクタリングする方法
- サービスを使った横断的データ管理の実装パターン
- Observableを使ったリアクティブな状態管理とコンポーネントの実装パターン
サンプルアプリケーションの作成
まずはじめに、リファクタリングの対象となるサンプルアプリケーションを作成します。
Angular CLIを使ってローカル開発する場合は、ng newコマンドを使ってプロジェクトを作成してください。StackBlitzのテンプレートを使ってもかまいません。
アプリケーションの最初の要件は、https://reqres.in/の ユーザーAPI[1]で取得したユーザーを一覧して表示することです。最初の状態では、すべての処理を AppComponent だけでおこないます。サービスへの分割も、コンポーネントの分割もまだ何もおこなっていません。次の3つのファイルを用意しましょう。
app/user.ts
export interface User {
id: string;
first_name: string;
last_name: string;
}
app/app.component.ts
import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { User } from './user';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
users: User[] = [];
constructor(private http: HttpClient) {}
ngOnInit() {
this.http
.get<{ data: User[] }>('https://reqres.in/api/users')
.subscribe((resp) => {
this.users = resp.data;
});
}
}
app/app.component.html
<ul>
<li *ngFor="let user of users">
#{{ user.id }} {{ user.first_name }} {{ user.last_name }}
</li>
</ul>
HttpClientを使用するため、AppModule で HttpClientModuleがインポートされていなければ imports 配列に追加してください。
次の画像のようにユーザーリストが表示される状態を用意します。
次のページからは、このアプリケーションをリファクタリングしながらAngularアプリケーションの設計について学んでいきます。
脚注