Chapter 03

1. はじめてのリファクタリング

lacolaco
lacolaco
2021.09.11に更新
このチャプターの目次

第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を使用するため、AppModuleHttpClientModuleがインポートされていなければ imports 配列に追加してください。

次の画像のようにユーザーリストが表示される状態を用意します。

ユーザーリストの表示

次のページからは、このアプリケーションをリファクタリングしながらAngularアプリケーションの設計について学んでいきます。

脚注
  1. https://reqres.in/api/users ↩︎