Angular９とFirebaseでブログを作ってみる５（Firestoreからデータを取得して表示してみる）

[前回](https://qiita.com/teracy55/items/231bf2cb472d077e03f0)、ブログ一覧／詳細画面のガワだけ作りました。

今回は、実際にFirestoreからデータを取得して表示してみたいと思います。


# Firebase側の準備

## Firestoreの開始

コンソールから「Database」を選択します。

なんかGCP上で設定してくださいと出ました。。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/255d2568-6654-8bc0-6f2d-916f4e31e427.png)

エンティティ画面に飛ぶので「ネイティブモードに切り替える」を選択します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/a479dd30-4043-ae79-8fb2-bf4e8c13e131.png)

ネイティブモードに切り替えます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/cf58d3db-f9e1-1944-b441-23498bb9e9fa.png)

切り替え完了後、Firebase側に戻ると、Firestoreが見れるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/12dcedd4-1457-930f-7f0d-0dc9e427ec4f.png)

## データの投入

[前回のサービスの作成](https://qiita.com/teracy55/items/231bf2cb472d077e03f0#%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9%E3%81%AE%E4%BD%9C%E6%88%90)で作成したインターフェースと同じ型でデータを投入します

試しに「Blogs」コレクションを作成し、以下のようなドキュメントを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/f495cb3c-53ec-a42d-b869-d3dd2660193d.png)



# セキュリティルールの設定

いまのところ、Firebase Storageと同様に読み取り専用にしておきます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/c268a9a7-9eed-433b-54de-f406be934791.png)

管理画面作ったり、見えちゃまずいデータを登録する必要が出たときにルールを再検討したいと思います。


# Angular側の設定

※AngularFireの設定自体は[こちら](https://qiita.com/teracy55/items/ac9f83c1fcac589b876b#angular%E5%81%B4%E3%81%AE%E5%AF%BE%E5%BF%9C)で実施済みです。

## AngularFirestoreの設定

[手順](https://github.com/angular/angularfire/blob/master/docs/install-and-setup.md#6-setup-individual-ngmodules)に書いてある通りに設定します


```src/app/app.module.ts
・・・
import { AngularFirestoreModule  } from '@angular/fire/firestore';

@NgModule({
  ・・・
  imports: [
    ・・・
    AngularFirestoreModule ,
```

## サービスからFirestoreにアクセス

- `this.firestore.collection<Blog>('blogs').get()`でblogsコレクション内のドキュメントを取得します
- `this.firestore.collection<Blog>('blogs').doc(docId).get()`でblogsコレクション内の指定IDのドキュメントを取得します
- 今回は一覧／詳細ともに画面表示時に1発で読み込めればよいので、subscribeせず`toPromise()`で呼びます

```src/app/blogs/blogs.service.ts
import { Injectable } from '@angular/core';
import { Blog } from 'src/types/blog.interface';
import { AngularFirestore, QueryDocumentSnapshot, DocumentData } from '@angular/fire/firestore';

@Injectable()
export class BlogsService {
  constructor(private firestore: AngularFirestore) { }

  async getBlogs(): Promise<Blog[]> {
    const data = await this.firestore.collection<Blog>('blogs').get().toPromise();
    return data.docs.map<Blog>(doc => this.toBlog(doc));
  }

  async getBlog(docId: string): Promise<Blog> {
    if (docId) {
      const doc = await this.firestore.collection<Blog>('blogs').doc(docId).get().toPromise();
      return this.toBlog(doc);
    } else {
      return null
    }
  }

  private toBlog(doc: QueryDocumentSnapshot<DocumentData>) {
    // ドキュメントフィールドにIDがないため、ドキュメントIDを付与したデータに変換して返却
    return Object.assign({ id: doc.id }, doc.data()) as Blog;
  }
}
```

- コンポーネント側の修正
    - 一覧は[前回](https://qiita.com/teracy55/items/231bf2cb472d077e03f0#%E3%83%96%E3%83%AD%E3%82%B0%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2)のままでOK
    - 詳細は[前回](https://qiita.com/teracy55/items/231bf2cb472d077e03f0#%E8%A9%B3%E7%B4%B0%E7%94%BB%E9%9D%A2%E3%81%AE%E8%BF%BD%E5%8A%A0)から微妙に修正します
        - getBlogの引数を`Number(id)`としてましたが、IDは文字列なのでNumber消します

```src/app/blogs/detail/detail.component.ts
  ・・・
  this.detail = await this.blogsService.getBlog(id);
  ・・・
```


# こんな感じになりました

## ブログ一覧

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/2d128f7a-d7a9-90c3-8169-93414f0f169b.png)

## ブログ詳細

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325108/77a96504-3aad-05be-366c-12bc97da9a3c.png)


# まとめ

これでFirestoreからデータをとれるようになりました！
次回はブログ詳細をもっとリッチに表示できるようにしていこうかなと思います！

（追記）
[Angular９とFirebaseでブログを作ってみる６（ngx-markdownでブログ内容をリッチに表示できるようにする）](https://qiita.com/teracy55/items/6167cf1dea9225d8bd09)