AngularとFirebaseでシングルページアプリケーションを開発しよう！

2024-06-20

Angularにおけるルーティングとは？

ルーティングの仕組み

Angularのルーティングは、主に以下の要素で構成されています。

Router: ルーティングを管理するクラスです。URLの変化を監視し、対応するコンポーネントを表示します。
Route: どのURLがどのコンポーネントに対応するかを定義する情報です。パス、コンポーネントクラス、データなどを含みます。
RouterModule: ルーティングの設定を定義するためのモジュールです。Routeの配列などを設定します。
router-link ディレクティブ: テンプレート内でリンクを作成するために使用するディレクティブです。
router-outlet コンポーネント: ルーティング先のコンポーネントを表示するためのコンポーネントです。

ルーティングの例

以下は、Angularのルーティングの例です。

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

この例では、以下のルートが定義されています。

/: HomeComponent コンポーネントを表示します。
/products/:id: ProductDetailComponent コンポーネントを表示します。:id は製品IDを表すパラメータです。

上記の例では、router-link ディレクティブを使用して、これらのルートへのリンクを作成することができます。

<a routerLink="/">Home</a>
<a routerLink="/about">About</a>
<a routerLink="/products">Products</a>

これらのリンクをクリックすると、対応するコンポーネントが router-outlet コンポーネントに表示されます。

Firebaseと連携することで、Angularのルーティングをさらに拡張することができます。例えば、Firebase Authenticationを使用して、ユーザー認証に基づいて特定のルートへのアクセスを制限することができます。また、Firebase Realtime Databaseを使用して、ルートデータを動的に更新することもできます。

Angularのルーティングは、SPAを構築するために不可欠な機能です。この機能を理解することで、ユーザーがアプリケーション内をシームレスに移動できる、洗練されたユーザーインターフェースを作成することができます。

AngularとFirebaseを使ったサンプルコード

必要なもの

Node.js
npm
Firebaseアカウント
Angular CLI

手順

Firebaseプロジェクトを作成し、RealTime Databaseを有効にします。
以下のコマンドを実行して、Angularプロジェクトを作成します。

ng new angular-firebase-todo

プロジェクトディレクトリに移動します。

cd angular-firebase-todo

以下のコマンドを実行して、Firebaseに接続します。

firebase use <your-firebase-project-id>

npm install @angular/fire @angular/fire/database

src/app/app.module.ts ファイルを編集し、AngularFireモジュールをインポートして設定します。

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { environment } from './environments/environment';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AngularFireModule.initializeApp(environment.firebase),
    AngularFireDatabaseModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

src/app/app.component.ts ファイルを編集し、Firebase Realtime Databaseからデータを読み書きするコードを追加します。

import { Component } from '@angular/core';
import { AngularFireDatabase } from '@angular/fire/database';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: any[] = [];

  constructor(private db: AngularFireDatabase) {
    this.db.list('todos').snapshotChanges().subscribe(changes => {
      this.todos = changes.map(change => ({
        key: change.key,
        value: change.payload.val()
      }));
    });
  }

  addTodo(todo: string) {
    this.db.list('todos').push({
      text: todo,
      completed: false
    });
  }

  toggleTodo(key: string, completed: boolean) {
    this.db.object(`todos/${key}`).update({
      completed: completed
    });
  }

  deleteTodo(key: string) {
    this.db.object(`todos/${key}`).remove();
  }
}

src/app/app.component.html ファイルを編集し、ToDoリストのテンプレートを追加します。

<h1>ToDoリスト</h1>

<input type="text" [(ngModel)]="newTodo" placeholder="新しいToDoを追加">
<button (click)="addTodo(newTodo)">追加</button>

<ul>
  <li *ngFor="let todo of todos">
    <input type="checkbox" [(ngModel)]="todo.completed" (change)="toggleTodo(todo.key, todo.completed)">
    {{ todo.text }}
    <button (click)="deleteTodo(todo.key)">削除</button>
  </li>
</ul>