「SwiftUI」でニュースを表示して見た！

{
  "status": "ok",
  "totalResults": 3456,
  -"articles": [
    -{
    -"source": {
      "id": null,
      "name": "Cointelegraph.com"
    },
    "author": "Cointelegraph By Marie Huillet",
    "title": "Roger Ver Apparently Unconcerned About Coronavirus",
    "description": "Roger Ver, the prominent Bitcoin Cash advocate and former CEO of Bitcoin.com,     appears to think that the world’s reaction to the COVID-19 pandemic is disproportionate",
    "url": "https://cointelegraph.com/news/roger-ver-apparently-unconcerned-about-coronavirus",
    ...
},
...
}

struct NewsSource: Codable {
    let status: String!
    let totalResults: Int!
    var articles: [Article]
}
struct Article: Codable{
    var id: Int?
    var author: String!
    var title: String!
    var description: String!
    var publishedAt: String!
　  ・・・
}

//APIを叩いてデータを取得し、構造体に格納
class GetNewsEventFetcher: ObservableObject {
　　@Published var articles: [Article] = []
　　let url: URL = URL(string:"ここにAPIキーを含んだURLを挿入")!
　　URLSession.shared.dataTask(with: url) { data, response, error in
   　　guard let data = data else { return }
   　　let decoder: JSONDecoder = JSONDecoder()
   　　do {
        　　var searchedResult = try decoder.decode(NewsSource.self, from: data)
        　　DispatchQueue.main.async {
//         　　データを格納
           　　self.articles = searchedResult.articles
           　　print(self.articles)
        　　}
    　　} catch {
//            何かしらのエラー処理を書く        　　
    　　}
　　}.resume()
}

struct ContentView: View {
//
    @ObservedObject var store = GetNewsEventFetcher()
    var body: some View{
//      リスト表示（idはdescription（記事の内容）を使用）
        List(self.store.articles, id: \.description){ res in
            VStack(alignment: .leading){
//              記事の表示
                Text(res.author)
                Text(res.title)
                Text(res.description)
                Text(res.publishedAt)
            }
//          余白を開ける
            .padding()
        }
    }
}

「@ObservedObject var store = GetNewsEventFetcher()」の部分が、通知を受け取っています。
「@ObservedObject」をつけないと、通知を受け取れませんのでご注意を！

詰まったところ

SwiftUIの「List」で値を表示する時に、「id」を指定していなかったので、表示されるものが一種類だけになった。
よく、NewsAPIのJSON値を見てみるとidがないではないか！
でも「List」を使って表示するときは、ユニークなidが必要になるらしい。
なので、今回は記事の内容はかぶらないと思い「description」を採用させてもらいました。
まあ、IDをつけた方がいいとは思うのだけれど、今回は表示だけなので実装はしていないです。

完成！

完成するとこのようになると思います。
これは、キーワードを「気仙沼」にしたときのものです。

ちゃんと表示できてますね！
あとは、デザインのみ！

まとめ

今回はSwiftUIでニュースを表示させて見ました。
初めは、Codableを理解するのにちょっと苦しみました。
でも、慣れればなんとかなるもんですね！www
まだ理解できてない部分もあるので、これからも学習に励んでいきたいと思います！
それでは、今回はここで筆を置かせていただきます！
最後まで記事をご覧頂きありがとうございました！