プログラミング

Angular フィルタリング機能の実装

最終更新： 03/03/2025
1 分の読み

Angularアプリケーションにフィルタリング機能を追加し、その後、アプリケーションを本番環境にデプロイするプロセスについて、完全かつ包括的なガイドを提供します。以下に、ステップバイステップで進めます。

1. フィルタリング機能の実装

フィルタリング機能は、ユーザーが特定の条件に基づいてデータを絞り込むために使用されます。Angularでは、ngForディレクティブとngModelを使用してフィルタリング機能を実装するのが一般的です。次の手順で進めます。

関連記事

1.1. コンポーネントの準備

まず、Angularコンポーネントを作成します。このコンポーネントは、フィルタリング機能を含むリストを表示します。

bash
ng generate component item-list

1.2. アイテムリストのデータを準備

コンポーネントのitem-list.component.tsで、フィルタリング対象となるデータを用意します。

typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.css']
})
export class ItemListComponent {
  searchQuery: string = '';
  items = [
    { name: 'Apple', category: 'Fruit' },
    { name: 'Carrot', category: 'Vegetable' },
    { name: 'Banana', category: 'Fruit' },
    { name: 'Broccoli', category: 'Vegetable' },
    { name: 'Strawberry', category: 'Fruit' }
  ];

  get filteredItems() {
    return this.items.filter(item => 
      item.name.toLowerCase().includes(this.searchQuery.toLowerCase()) ||
      item.category.toLowerCase().includes(this.searchQuery.toLowerCase())
    );
  }
}

ここでは、searchQueryという変数を使って、ユーザーが入力した検索クエリに基づいてアイテムをフィルタリングしています。

1.3. テンプレートの作成

次に、item-list.component.htmlファイルで検索フォームとリストを作成します。

html
<div>
  <input [(ngModel)]="searchQuery" placeholder="Search for items" />
div>

<ul>
  <li *ngFor="let item of filteredItems">
    {{ item.name }} - {{ item.category }}
  li>
ul>

ここでは、ngModelを使って検索クエリを双方向バインディングし、ngForを使ってフィルタリングされたアイテムをリスト表示しています。

1.4. 必要なモジュールのインポート

ngModelを使用するためには、FormsModuleをアプリケーションのモジュールでインポートする必要があります。app.module.tsで次のようにインポートします。

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
import { ItemListComponent } from './item-list/item-list.component';

@NgModule({
  declarations: [
    AppComponent,
    ItemListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

これで、フィルタリング機能を実装する準備が整いました。

2. アプリケーションのビルドとデプロイ

フィルタリング機能が正しく動作したら、次はアプリケーションを本番環境にデプロイするための手順に進みます。

2.1. アプリケーションのビルド

本番環境用にアプリケーションをビルドするには、次のコマンドを使用します。

bash
ng build --prod

このコマンドは、アプリケーションを最適化し、dist/ディレクトリ内に本番用のビルドを生成します。このビルドには、コードの圧縮や最適化が含まれており、パフォーマンスの向上が期待できます。

2.2. ビルド成果物の確認

ビルドが完了したら、dist/ディレクトリ内に生成された成果物を確認します。例えば、dist/my-angular-appというディレクトリに出力されることが多いです。

bash
cd dist/my-angular-app

中身を確認すると、index.html、main.js、styles.cssなどのファイルがあります。

2.3. ホスティング先の選定

次に、アプリケーションをデプロイするためのホスティング先を選びます。ここでは、Firebase Hostingを例に取りますが、他のクラウドサービス（例えば、Netlify、AWS S3、Herokuなど）でも同様の手順が適用できます。

Firebaseを使用する場合、まずFirebase CLIをインストールします。

bash
npm install -g firebase-tools

Firebaseにログインします。

bash
firebase login

2.4. Firebaseプロジェクトの設定

Firebaseプロジェクトを作成し、アプリケーションをデプロイするための設定を行います。

bash
firebase init

Hostingオプションを選び、ビルド成果物が保存されているディレクトリ（dist/my-angular-app）を指定します。

2.5. アプリケーションのデプロイ

最後に、次のコマンドでアプリケーションをFirebaseにデプロイします。

bash
firebase deploy

これで、アプリケーションがインターネット上に公開され、ユーザーがアクセスできるようになります。

まとめ

このガイドでは、Angularアプリケーションにフィルタリング機能を追加し、Firebase Hostingを使ってデプロイするまでの手順を説明しました。フィルタリング機能により、ユーザーが簡単にデータを検索できるようになり、アプリケーションをデプロイすることで、世界中のユーザーにアクセス可能な状態にすることができます。

最終更新： 03/03/2025
1 分の読み
Back to top button