AngularFireを使用したFirebaseとAngularの統合

まず、AngularFireをプロジェクトに追加する必要があります。Angular CLIを使用している場合は、次のコマンドを実行します:

ng add @angular/fire

これにより、必要な依存関係と設定が自動的に追加されます。

Angularの環境ファイル（environment.ts）にFirebaseの設定を追加します。例えば、以下のようになります:

export const environment = {
  production: false,
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID"
  }
};

これでFirebaseとAngularの統合の準備が整いました。

Firebaseの各機能を使用するためのコード例をいくつか紹介します。

Firebaseデータベースの読み取りと書き込み:

import { AngularFireDatabase } from '@angular/fire/database';
// コンストラクタでAngularFireDatabaseを注入する
constructor(private db: AngularFireDatabase) {}
// データの読み取り
this.db.object('path/to/data').valueChanges().subscribe(data => {
  console.log(data);
});
// データの書き込み
this.db.object('path/to/data').set({ key: 'value' });

Firebase認証の使用:

import { AngularFireAuth } from '@angular/fire/auth';
// コンストラクタでAngularFireAuthを注入する
constructor(private auth: AngularFireAuth) {}
// ログイン
this.auth.signInWithEmailAndPassword('email', 'password')
  .then(userCredential => {
    console.log(userCredential.user);
  });
// ログアウト
this.auth.signOut();

Firebaseストレージの使用:

import { AngularFireStorage } from '@angular/fire/storage';
// コンストラクタでAngularFireStorageを注入する
constructor(private storage: AngularFireStorage) {}
// 画像のアップロード
const file = ...; // アップロードするファイル
const path = 'path/to/file.jpg'; // アップロードするパス
const task = this.storage.upload(path, file);
// アップロードの進捗状況を監視
task.percentageChanges().subscribe(percentage => {
  console.log(`Upload progress: ${percentage}%`);
});
// アップロードが完了したら、ダウンロードURLを取得
task.snapshotChanges().pipe(
  finalize(() => {
    this.storage.ref(path).getDownloadURL().subscribe(downloadURL => {
      console.log('Download URL:', downloadURL);
    });
  })
).subscribe();

これらはいくつかの一般的なFirebaseの機能の例です。AngularFireには他にも多くの機能がありますので、公式ドキュメントを参照してさらに学習することをおすすめします。