structを用いたAPIの取得＜Qiita App＞

Question

前提・実現したいこと

structを用いてTableViewに記事の名前（title）,ユーザー名（Id）を表示させ、タップするとWebページに画面遷移するというものです。

TableViewCellにはtitleとIdのLabelを設定しております。

発生している問題・エラーメッセージ

TableViewに記事及びIdが表示されない。（エラーコードの表示もなし）

該当のソースコード

import UIKit
import Alamofire
import SwiftyJSON
import WebKit

struct articlesStruct {
    var title, userId, url: String
}



class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!
    var articles: [articlesStruct] = []
    let cellId = "cellId"
   

    
    override func viewDidLoad() {
        super.viewDidLoad()
       
        tableView.frame.size = view.frame.size
        tableView.delegate = self
        tableView.dataSource = self
     
        navigationItem.title = "Qiita Client"
        getQiitaApi()
    }
    
    func getQiitaApi(){
        AF.request("https://qiita.com/api/v2/items?page=1&per_page=20", method: .get).validate().responseJSON { response in
            switch response.result {
            case .success(let value):
                let json = JSON(value)
                json.forEach {(_, json) in
                    if let titleData = json["title"].string,
                        let userData = json["user"]["id"].string,
                        let urlData = json["url"].string {
                        let Data = articlesStruct(title: titleData, userId: userData, url: urlData)
                        self.articles.append(Data)
                    }
                }
                self.tableView.reloadData()
            case .failure(let error):
                print(error)
            }
        }
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return articles.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
        cell.title?.text = articles[indexPath.row].title
        cell.userName?.text = articles[indexPath.row].userId
        return cell
    }
    
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "ViewController2" {
            if let VC2 = segue.destination as? ViewController2 {
                if let url = sender as? String {
                    VC2.url = url
                }
            }
        }
    }
}

import UIKit

class TableViewCell: UITableViewCell {
    
    @IBOutlet weak var title: UILabel!
    @IBOutlet weak var userName: UILabel!  
}

試したこと

TableViewCellへのLabel設置＆Storyboardへの紐付け
title, userId, urlのstruct 作成
numberOfRowsInSectionの個数（今回はarticles.count）
cellForRowAtでのtitle&userIdの記述
cell.title?.text = articles[indexPath.row].title（useidも同様）
main.storyboadでのTableViewCellのidentifier設定
dataSource＆delegateの設定（TableViewController）

Comments

[TsukubaDepot]

コードと試されたことを拝見する限り、StoryBoard を使ってカスタムセルを作り、それを表示することと、コードベースで TableView を作り、そこにカスタムセルを登録し表示することを混同されているように感じます。
実際はどちらで実施されたいのでしょうか。

[Narikura]

確かに混同しておりました、ご指摘ありがとうございます。今回はstoryboardでの実装を行う予定でした。

[Narikura]

let tableView: UITableView = UITableView()
view.addSubview(tableView)を消去し
@IBOutlet weak var tableView: UITableView!に書き換えましたが変化はありませんでした。

[TsukubaDepot]

viewDidLoad に
tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellId)
で登録して
let cell = tableView.dequeueReusableCell(withIdentifier: "TableViewCell") as! TableViewCell
では別の identifire で登録した UITableViewCell を出力しようとしていますが、実際に行われたいのはどちらの方でしょうか。

[Narikura]

TableViewCellの方を利用したいのでそちらで統一したいです。また、質問時のregisterとはUITableViewCellと書かれていましたが、その後TableViewCellに変更しておりますが変化はありませんでした。記述が不十分でした、すみません。

[TsukubaDepot]

StoryBoard でカスタムセルを作り、identifier を設定したのであれば、register は不要ですので、削除してみてもらえますでしょうか。
ちなみに、全体的なロジックには問題ありませんので、カスタムセルがきちんと表示されないだけの問題です。

[Narikura]

ご返信ありがとうございます。registerをを消去いたしましたが変化はありませんでした。
ということになると、Main.storyboad上での接続に不備があるという認識でよろしいでしょうか。

[Narikura]

修正を行なったコードを含めソースコードを現状のものに更新いたしました。

[TsukubaDepot]

接続に不備があると、おそらく実行時エラーになるかと思います。
どちらかというと、カスタムセル内に配置した UILabel の制約がおかしい、ということはないでしょうか。

[Narikura]

ご返信ありがとうございます。UILabelの制約というのはAuto layoutのエラー（警告）出ていなくてもということでしょうか。
少し変更を加えてみます。

[TsukubaDepot]

いいえ、そういう意味ではありません。
制約にエラーがなくとも、正しい制約をつけていなければ予想外の場所に表示されることがある、という意味です。

[Narikura]

理解しました。ありがとうございます。その場合は余白を余裕にとる、ラベルのフォントを小さめに設定するなどという対処方法になるのでしょうか。
ちなみにですが、現在の制約では四方向からContentViewからの距離を定義する設定をしております。
制約を左側及び上側だけにし、横方向は左からの距離で再定義しても変化はありませんでした。

[TsukubaDepot]

たとえば、ContentView の背景を透明ではなく、なんらかの色を付けてみるとどのような感じになりますでしょうか。

正常に動けば、最初は白色の tableView （表示するセルがないため）、データの取得が完了し、reloadData() が呼び出されれば色のついたセルが表示されるはずです。

[Narikura]

ご返信ありがとうございます。ContentViewに色を付けてビルドを行なって見ましたが、色のついたセルは表示されませんでした。

[TsukubaDepot]

ご提示いただいているコードほぼそのままで、かつカスタムセルを作ってやっていますが、きちんと動いています。

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath)
この delegate は間違いなく呼ばれているのでしょうか。
この delegate の中にprint() で何か適当な文字列を入れてみたら、Qiita API からデータが読み込まれたタイミングでなんらかの表示が出ると思いますが、それはどんな感じでしょうか。

[Narikura]

ご返信ありがとうございます。該当箇所にprintを記載しましたが、コンソールには出力されませんでした。ということになると、delegateの設定ということでしょうか。

[TsukubaDepot]

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return articles.count
}

こちらに print でなんらかのメッセージを表示させるようにしたらどうでしょうか。
こちらであれば、最低一回は呼び出されるはずなので、なんらかの表示があるはずです。

[Narikura]

ご返信ありがとうございます。あれから進展があり、コンソールへの出力は可能になりましたが、背景色とLabelの表示はまだできておりません。

[TsukubaDepot]

そうなると、やはりカスタムセルの設定でどこかがおかしいのだと思います。
たとえば、一度別に新しいプロジェクトを作り、コードだけ貼り付け（コードは正しく動いているのがわかっているため）、カスタムセルや TableView だけ作り直してみたらどうでしょうか。
いままでの試行錯誤で少し整理できているはずですので、作り直しといっても時間はさほどかからないと思います。

[Narikura]

ご指摘いただきありがとうございます。あれから試行錯誤の末TableViewを表示させることができました。ありがとうございました。
最後はご指摘いただいていたregisterを消去した結果出力することができました。（ご指摘いただいた直後の状態でregisterを消去しても改善されなかったのでコードを記述したままにしておりました）

手厚いご支援に感謝致します。

[TsukubaDepot]

とりあえず解決したようで良かったです。
UITableView の作成は複雑に見えても、何度かやっていくとかなり簡単に実装できることに気づかれると思います。
次回、また詰まったとしても、一度新規プロジェクトを立ち上げ、わかっている範囲から一つずつコードを書いていき、実行してたしかめてみるのも良いのではないでしょうか。

[TsukubaDepot]

このままだと質問状態で残ってしまいますので、簡単な内容で良いので自己解決していただければと思います。

Answer 1

コードベースではなくmain.Storyboardで実装する時registerの定義は消去する。また作り直してみる

Answer 2

コードベースではなくmain.Storyboardで実装する時registerの定義は消去する。また作り直してみる