プログラミング

AngularとFirestoreでブログ構築

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

わかりました、以下にAngularとFirestoreを使用したブログ構築についての完全かつ包括的な日本語記事を作成しました。

AngularとFirestoreを使用したブログ構築方法: 認証機能の追加

この記事では、Angular と Firestore を使ってブログを構築し、さらに認証機能（ユーザー登録、ログイン、ログアウト）を追加する方法について説明します。FirestoreはGoogleのNoSQLデータベースで、Angularは動的なウェブアプリケーションを作成するための人気のフレームワークです。この記事を通じて、シンプルながらも機能的なブログアプリケーションを作成し、ユーザー認証を実装する方法を学びましょう。

関連記事

1. 前提条件

まず、以下のツールとサービスを準備してください。

  • Node.js: Angularの開発に必要なJavaScriptランタイムです。公式サイトからインストールできます。
  • Angular CLI: Angularプロジェクトを簡単に管理できるコマンドラインツールです。
  • Firebaseアカウント: Firestoreと認証サービスを使用するためにはFirebaseアカウントが必要です。
  • Firestoreの設定: Firebaseコンソールでプロジェクトを作成し、Firestoreを有効にします。

2. Angularプロジェクトの作成

まず、Angular CLIを使って新しいAngularプロジェクトを作成します。

bash
ng new my-blog
cd my-blog

これで、my-blogという名前のプロジェクトが作成され、プロジェクトディレクトリに移動しました。

3. Firebaseのセットアップ

Firebaseプロジェクトの作成

  1. Firebaseコンソールにアクセスし、新しいプロジェクトを作成します。
  2. プロジェクトを作成したら、Firestoreと認証サービスを有効にします。

Firebase設定の取得

  1. Firebaseコンソールの「プロジェクト設定」から、Webアプリケーションの設定を追加します。
  2. 提供されるfirebaseConfigオブジェクトを控えておきます。これには、APIキーやプロジェクトIDなどの情報が含まれています。

Firebaseモジュールのインストール

AngularでFirebaseを使用するために、必要なパッケージをインストールします。

bash
npm install firebase @angular/fire

4. Firebaseの設定をAngularプロジェクトに追加

Firebaseモジュールのインポート

src/app/app.module.tsファイルを開き、Firebaseの設定をインポートします。

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AngularFireModule } from '@angular/fire';
import { AngularFireAuthModule } from '@angular/fire/auth';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AppComponent } from './app.component';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
  databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT_ID.appspot.com",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule,
    AngularFirestoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

この設定を追加することで、AngularアプリケーションがFirestoreやFirebase Authenticationサービスと連携できるようになります。

5. 認証機能の実装

サインアップ、サインイン、サインアウト機能

次に、Firebase Authenticationを利用して、ユーザー登録、ログイン、ログアウト機能を実装します。

まず、認証サービスを作成します。src/app/auth.service.tsというファイルを作成し、以下のコードを追加します。

typescript
import { Injectable } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import firebase from 'firebase/app';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private afAuth: AngularFireAuth, private router: Router) { }

  // ユーザーのサインアップ
  signUp(email: string, password: string): Promiseauth.UserCredential> {
    return this.afAuth.createUserWithEmailAndPassword(email, password);
  }

  // ユーザーのサインイン
  signIn(email: string, password: string): Promiseauth.UserCredential> {
    return this.afAuth.signInWithEmailAndPassword(email, password);
  }

  // ユーザーのサインアウト
  signOut(): void {
    this.afAuth.signOut().then(() => {
      this.router.navigate(['/login']);
    });
  }

  // 現在のユーザー情報を取得
  getUser(): ObservableUser | null> {
    return this.afAuth.authState;
  }
}

サインアップとサインインのフォーム

次に、サインアップとサインインのフォームを作成します。src/app/signup/signup.component.tsとsrc/app/signin/signin.component.tsを作成し、それぞれフォームとボタンを実装します。

サインアップコンポーネント (signup.component.ts)

typescript
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent {

  email: string = '';
  password: string = '';

  constructor(private authService: AuthService) { }

  onSignup(): void {
    this.authService.signUp(this.email, this.password).then(() => {
      alert('サインアップ成功！');
    }).catch(err => {
      alert('エラー: ' + err.message);
    });
  }
}

サインインコンポーネント (signin.component.ts)

typescript
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signin',
  templateUrl: './signin.component.html',
  styleUrls: ['./signin.component.css']
})
export class SigninComponent {

  email: string = '';
  password: string = '';

  constructor(private authService: AuthService) { }

  onSignin(): void {
    this.authService.signIn(this.email, this.password).then(() => {
      alert('サインイン成功！');
    }).catch(err => {
      alert('エラー: ' + err.message);
    });
  }
}

6. Firestoreとの統合

記事のデータをFirestoreに保存

次に、ブログ記事の作成機能を実装します。Firestoreに記事データを保存するためのサービスを作成します。

src/app/blog.service.tsに以下のコードを追加します。

typescript
import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class BlogService {

  constructor(private firestore: AngularFirestore) { }

  // 記事の保存
  savePost(title: string, content: string): Promise<void> {
    const post = {
      title: title,
      content: content,
      createdAt: new Date()
    };
    return this.firestore.collection('posts').add(post);
  }

  // 記事の取得
  getPosts(): Observable<any[]> {
    return this.firestore.collection('posts').valueChanges();
  }
}

これにより、Firestoreに記事データを保存し、取得することができるようになります。

7. 最後に

これで、Angular と Firestore を使用して、認証機能付きのシンプルなブログアプリケーションが完成しました。ユーザーはサインアップ、サインイン、サインアウトができ、Firestoreに記事を保存し表示することができます。

このプロジェクトは非常にシンプルですが、さらに多くの機能を追加することで、より複雑なブログアプリケーションへと進化させることができます。例えば、記事の編集機能や削除機能、画像のアップロード機能などを追加することができます。

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