Angularで検索コンポーネントを作成する方法：社員管理アプリケーションを題材に解説

Angularを用いたシングルページアプリケーション（SPA）の開発では、再利用可能なコンポーネントを設計することが成功の鍵です。本記事では、社員管理アプリケーションにおける「検索コンポーネント」の作成方法を詳しく解説します。このコンポーネントは、アプリケーション内の他のコンポーネントでも再利用可能な設計を目指します。

---

1. 検索コンポーネントとは

検索コンポーネントは、ユーザーがキーワードを入力し、データをフィルタリングするための専用UIとロジックを持つコンポーネントです。このコンポーネントは以下の機能を提供します：

• 入力ボックスを提供
• 検索キーワードを親コンポーネントに通知
• フィルタリング結果を受け取り、動的に更新

---

2. 検索コンポーネントのメリット

検索コンポーネントを分離することで、以下の利点が得られます：

• 再利用性：異なる画面やデータセットでも利用可能。
• コードの可読性向上：検索ロジックがモジュール化され、メインコンポーネントがシンプルになる。
• テストの効率化：検索機能を個別にテスト可能。

---

3. Angularで検索コンポーネントを作成する流れ

1. 新しいコンポーネントを生成
2. HTMLテンプレートを設計
3. TypeScriptファイルにロジックを実装
4. 親コンポーネントとデータ連携
5. スタイルを適用してUIを整える

---

4. 検索コンポーネントの構造設計

検索コンポーネントの基本的な構成は以下の通りです：

• 入力フォーム：検索キーワードを入力。
• データ出力：検索結果の表示（親コンポーネントが担当）。
• イベント通知：キーワードの変更を親コンポーネントに伝える。

---

5. 検索コンポーネントのHTMLテンプレート

以下は検索コンポーネントのテンプレート例です：

<!-- search.component.html -->
<div class="search-container">
  <input 
    type="text" 
    placeholder="検索キーワードを入力" 
    [(ngModel)]="searchTerm" 
    (input)="onSearch()"
    class="search-input"
  />
</div>

---

6. 検索コンポーネントのTypeScriptコード

検索ロジックをsearch.component.tsに実装します。

// search.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.css']
})
export class SearchComponent {
  searchTerm: string = '';

  @Output() searchTermChanged = new EventEmitter<string>();

  onSearch(): void {
    this.searchTermChanged.emit(this.searchTerm);
  }
}

コードのポイント

1. searchTerm：検索キーワードを格納するプロパティ。
2. @OutputとEventEmitter：親コンポーネントにイベントを通知する仕組み。

---

7. 親コンポーネントとのデータ連携

親コンポーネントは、検索コンポーネントからのイベントを受け取り、データをフィルタリングします。

親コンポーネントのHTMLテンプレート

<!-- parent.component.html -->
<app-search (searchTermChanged)="onSearch($event)"></app-search>

<div *ngFor="let employee of filteredEmployees">
  <p>{{ employee.name }} - {{ employee.department }}</p>
</div>

親コンポーネントのTypeScriptコード

// parent.component.ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
  employees = [
    { name: '佐藤太郎', department: '営業' },
    { name: '鈴木花子', department: '人事' },
    { name: '田中一郎', department: '開発' }
  ];
  filteredEmployees = this.employees;

  onSearch(searchTerm: string): void {
    this.filteredEmployees = this.employees.filter(employee =>
      employee.name.includes(searchTerm)
    );
  }
}

---

8. スタイリングとUIの最適化

検索コンポーネントの見た目を整えることで、より使いやすくなります。

/* search.component.css */
.search-container {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

---

9. 検索コンポーネントを拡張する方法

以下の機能を追加して、検索コンポーネントをさらに強化できます：

• リアルタイム検索：RxJSのdebounceTimeを使用して入力イベントを最適化。
• 検索履歴の保存：過去の検索キーワードを保存して再利用可能に。
• 高度なフィルタリング：部署や役職など複数の条件で検索。

---

10. まとめ

Angularで検索コンポーネントを実装することで、アプリケーション全体の使い勝手が向上します。本記事で紹介した方法を参考に、自身のプロジェクトで再利用可能なコンポーネント設計を実践してください。また、ユーザーのニーズに応じて機能を拡張し、さらに洗練されたアプリケーションを目指しましょう。