見出し画像

【Firebase×Swift】データ取得とTableView表示（後編）〜取得データの変換とセル表示〜

shion_note

こんにちはシオンです。

今回は後編ということで、前編の続きになります！

前編でデータを取得してきたので、後編はそのデータをセルに当てはめてあげれば完了です。
ではやっていきましょう。


■手順を確認

データを当てはめるためには

＜データ取得から表示までの手順＞
①データを取得する　→　前編
↓
②TableViewのセルに表示するためのデータ型（クラス）を作る
↓
③取ってきたデータを、作ったデータ型に変換する
↓
④TableViewの各セルにデータを当てはめる

この②〜④をやっていく必要があります。
こう見ると「前編の三倍か〜、やめよ」となりそうですが、（実際僕は数度なりました）②はFirebaseはあまり関係なく、③の実装は数行で、④に関しては一度TableViewを扱ったことがあればすぐに理解できると思います。

ではやっていきましょう。


■手順２：TableViewのセルに表示するためのデータ型（クラス）を作る

これは割と他の場面でも多用することがあるので覚えておくと便利です。
知ってるよ！っていう人はスルーしてください。

すごく簡単にいうと、クッキーを作る時にプラスチックの型で星型とかハート型とかにするじゃないですか？あれと同じような感じです！（クッキー作ったことない人はクッキーを作ってきてください）

要は
「見やすいようにみんな同じ形にしたいね」
「じゃあまずはどんな形にするか決めて、その型を作ろうね」
という考えです。

以下コードと解説です。

//今回はtestDataという型を作ります。
//NSObjectについては解説置いています。

class testData: NSObject {
    var uid: String?
    var data1: String?
    var data2: Int?

    
    //init()について解説置いています。

    init(document: QueryDocumentSnapshot) {
       self.uid = document.documentID
       let Dic = document.data()
       self.data1 = Dic["data1"] as? String
       self.data2 = Dic["data2"] as? Int
   }
}

＜解説＞
・NSObjectとは？：　Swiftの全てのクラスの元になっているもの。UIViewControllerとかもこれの派生。あまり深く考えない方が身のため。

・init(document: QueryDocumentSnapshot)とは？（重要）
これがクッキーの形を決めるためのものです。
今testDataという型を作りました。そしたら次にその型に取得してきたデータを当てはめていくのですが、それがこれです。
使い方としては

testData(document :getDocumentsで取得してきたデータ　）

こうなります。これで取得してきたデータがtestData型になります。
データが単体ならこれで終わり。ですが今回はデータが複数あります。

それをどうするかが手順３です。


■手順３：取ってきたデータを、作ったデータ型に変換する

手順２でデータ型を作り、単体での変換は可能になりました。
ではここでは何をやるのか？ずばり

「配列の全要素をデータ型に当てはめる方法」

となります。早速やってみましょう。

以下コードと解説です。

//前編のコードに付け足していきます。
//testDataに変換したデータを入れる箱を準備
var testDataArray:[testData] = []

func getData() {

    //データがあるコレクションを指定
    let Ref = Firestore.firestore().collection("コレクション名")

    //getDocumentsでデータを取得
    Ref.getDocuments() { (querySnapshot, error) in
           if let error = error {
               print(error)
               return
           }

           //querySnapshotにドキュメントデータが配列になって入っている。
           <ここから先が後編>
           self.testDataArray = querySnapshot!.documents.map { document in
           let data = testData(document: document)
           return data
           }

}

＜解説＞
・まず、querySnapshotとは？
ここにはドキュメントデータが配列で入っています。
前編であったこれです。

//getDocumentsで取ってきたデータのイメージ　(array = 取ってきたデータ)

let array = [ドキュメント１,ドキュメント2,ドキュメント3,ドキュメント4,・・・・・]

・では、querySnapshot!.documentsとは何か？
これはQueryDocumentSnapshotという形のものです。
何かというとquerySnapshotの中の一つ一つのドキュメントデータを実際に持っているのがコイツになります。イメージ的にはquerySnapshotのドキュメントデータを一個ずつ取り出してきています。

・では、querySnapshot!.documents.map { ... }　とは何か？
map{ }というのは
「配列の全ての要素に同じ処理を施したい！」
という時に使います。

今回は
「配列の全てのドキュメントデータをtestData型にしたい！」
のでこれに合致します。
だからドキュメントデータを配列で持っているquerySnapshot!.documentsにmapをつけています。
（初見という人は、こちらを参考にしてみてください！）

map{ document in ...}

このdocumentが各要素のドキュメントデータです。
だからこれを手順２の方法

testData(document :getDocumentsで取得してきたデータ　）

これに入れて変換しています！そしてreturnで配列に戻して次のドキュメントデータを変換....
これでtestData型に変換されたデータが取得できました！

あとはTableViewに表示するだけなので簡単です。

■手順４：TableViewの各セルにデータを当てはめる

表題の通りです。

以下解説とコードです。

//セルの数を決める
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
       return self.testDataArray.count
   }
   
//セルの中身を決める
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
       let cell = tableView.dequeueReusableCell(withIdentifier: "セルの名前")
       cell.testData = self.testDataArray[indexPath.row]
       return cell
   }

＜解説＞
・セルの数はtestDataArray（コレクションにあったデータ）の数です。
・cellにデータを受け取る変数testDataを用意しておいてそこにtestDataArrayの各要素（上から順番に）を当てはめる。
cellに用意しておく変数は以下のように書きます。

var testData:testData?

これで完了です！
お疲れ様でした。

■まとめ

上手くできたでしょうか？
もしも上手くいかないとか、わかりにくかった場合はコメントで言っていただけると幸いです。

mapだけ少し説明が足りなかったかなと思うので、もう少しmapについて知りたいという方は以下を参考にしてみてください！


いいなと思ったら応援しよう！