Main Storyboardへの接続

Question

前提・実現したいこと

Alamofire,SwiftyJSONを利用しapiを叩き、Qiitaの記事一覧をtableViewに表示、WebViewに記事を表示するアプリを作成したい。

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

Main Storyboardへの接続がおかしい

Thread 1: signal SIGABRT

該当のソースコード

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    
    var articles: [[String:String?]] = []
    
        
    let cellId = "cellId"
    let tableView: UITableView = {
        let t = UITableView()
        return t
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.addSubview(tableView)
        tableView.frame.size = view.frame.size
        tableView.delegate = self
        tableView.dataSource = self
        tableView.register(UITableViewCell.self, forCellReuseIdentifier: cellId)
        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
                    let article: [String: String?] = [
                        "title": json["title"].string,
                        "userId": json["user"]["id"].string,
                        "url": json["url"].string
                    ]
                    self.articles.append(article)
                }
                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: cellId, for: indexPath)
        cell.backgroundColor = .white
        let article = articles[indexPath.row]
        
        let ViewController2 = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
        self.present(ViewController2, animated: true, completion: nil)
        
        cell.textLabel?.text = article["title"]!
        cell.detailTextLabel?.text = article["userId"]!
        
        return cell
    }
    
    
    
}

試したこと

tableViewを@IBOutlet weak var Tableview: UITableView!と定義してTableViewとViewControllerを接続してみたが、今度はsubViewに関するエラーが出てしまった。（よくわかっていません）

補足情報

接続がおかしい、定義されていないのが真ん中のviewcontrollerです。

Comments

[TsukubaDepot]

具体的なエラーはどの行ででていますでしょうか。
また、Xcode の一番上を見ると、警告が3つ（⚠️3）となっていますが、これらの内容はどんな感じでしょうか。

[Narikura]

let ViewController2 = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2") as! ViewController2 エラーはこの行に対して行われています。
また、エラーはViewControllerの識別子に関するエラーと、よく理解していないので分かりませんが以下のようなエラーです。
Capabilities for Signing & Capabilities may not function correctly because its entitlements use a placeholder team ID. To resolve this, select a development team in the qiitaApp editor.

[TsukubaDepot]

後半のエラーですが、一回 Xcode のプロジェクト（ここのプロジェクトではなくて、開発者設定など）を行えばこのエラーが出ることはほとんどないので、私自身このエラーについてよく知っているわけではありませんが、エラーメッセージで検索すると例えば次のような事例がありますので、確認していただけますでしょうか。
https://pikucha.sakura.ne.jp/blog/2019/11/25/2019%E5%B9%B4%E4%BB%8A%E6%97%A5%E3%81%AE%E3%83%93%E3%83%AB%E3%83%89%E3%82%A8%E3%83%A9%E3%83%BC%E3%80%81%E3%83%AF%E3%83%BC%E3%83%8B%E3%83%B3%E3%82%B0capabilities-for-signing-capabilities-may-not-func/

[Narikura]

後半のエラーについては解消しました。ありがとうございます。また、識別子の警告に関しても解消しました。

Answer 1

ご提示いただいたコードですが、ほぼ概ね大丈夫なのですが、根本的な間違いが一箇所あります。

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // 中略
        let ViewController2 = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
        self.present(ViewController2, animated: true, completion: nil)

　　　　　// 中略

        return cell
    }

とありますが、この状態だとセルを表示するごとに画面遷移を行なってしまいます。

また、StoryBoard の設定を見る限り、NavigationController を使って遷移しているように見受けられますので、自分で次の画面をインスタンス化（instantiateViewController）し、表示（present）する必要はありません。

いずれにせよ、tableView(_:cellForRowAt:)で行わなければいけないのは、Cell にデータを表示させることだけです。

セルをタップしたときに行う処理は、tableView(_:didSelectRowAt:) で行うことになります。

とりあえず、上記の関数内の余計な部分を消せば、それだけでも一応動くのですが、画面遷移まで反映させたコードはこんな感じになります。

import UIKit
import Alamofire
import SwiftyJSON

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
    // 略
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        //let cell = tableView.dequeueReusableCell(withIdentifier: cellId, for: indexPath)
        
        // MARK: - detail を表示するのであれば、dequeue は次の方法で行う
        let cell = UITableViewCell(style: .subtitle, reuseIdentifier: cellId)
        
        cell.backgroundColor = .white
        let article = articles[indexPath.row]

        // MARK: - ここの行は不要
//        let ViewController2 = self.storyboard?.instantiateViewController(withIdentifier: "ViewController2") as! ViewController2
//        self.present(ViewController2, animated: true, completion: nil)

        cell.textLabel?.text = article["title"]!
        cell.detailTextLabel?.text = article["userId"]!

        return cell
    }

    // MARK: - Cell をタップしたときの処理
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 選択状態を解除する
        tableView.deselectRow(at: indexPath, animated: true)
     
        // 表示させたい URL を抽出する
        let article = articles[indexPath.row]
        let url = article["url"]!
        
        // Segue を実行する。
        // url を sender の引数として渡すことで、prepare() で受け取られるようになる。
        performSegue(withIdentifier: "toViewController2", sender: url)
    }
    
    //　MARK: - 画面遷移の実行
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        // Segue の識別子（identifier）が "toViewController2" の場合
        if segue.identifier == "toViewController2" {
            // 遷移先のクラスが　ViewController2 の場合
            if let nextVC = segue.destination as? ViewController2 {
                // sender を String 型としてダウンキャストする。
                if let url = sender as? String {
                    // 成功したら、nextVC（== ViewController2 のインスタンス）の url に代入
                    nextVC.url = url
                }
            }
        }
    }
}

遷移先の雛形は次のような感じです。
あとは、url に代入された url を基に WkWebView を操作することになります。

import UIKit

class ViewController2: UIViewController {
    var url: String?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        // MARK: - URL を表示する。
        print("表示させたい URL は :", url ?? "不明です。")
    }
}

Comments

[Narikura]

ありがとうございます。確認しましたh。no segue with identifier 'toViewController2というエラーが出てしまい画面遷移がうまくいきませんでした。ViewController２はMainStoryboardとどのように接続されるのが正しいのでしょうか

[TsukubaDepot]

ちなみに、TavleView についてはコード上で直接作っているため、StoryBoard に配置した上 Outlet を接続する必要はございません。
StoryBoard では、ViewControllerにNavigationController をセットし、ViewController2 と Segue で
接続するだけで大丈夫です。

[Narikura]

こちらの勘違いでした。すみません。segueのIdentifierに"to"が抜けておりました。遷移先の画面（Qiitaの記事）が表示される場所が真っ黒になりました。調べてみると画面遷移に関することが出てきて模索していたのですが解決方法がいまいち分かりません。どうしたらいいでしょうか。度々すみません。

[TsukubaDepot]

一つ前のコメントは入れ違いになってしまったようで、話が噛み合っていなかったですね。

さて、遷移先の画面が真っ黒になってしまったということですが、StoryBoard上での遷移先の ViewController にはカスタムクラス（ViewController2）は設定されましたでしょうか（設定されてない場合にはNavigationBar以外に何も表示されない白い画面なので違うと思いますが）。

[Narikura]

失礼いたしました。
画面遷移についてですが、ViewControllerのcustom classの設定はしており、確認しましたが確認後も変化はありませんでした。

[TsukubaDepot]

ViewController2では、print()を使ってURLを表示させていますが、それは表示されますでしょうか。

[Narikura]

補足情報と致しましては、遷移先の画面（Qiitaの記事）は真っ暗な状態ではありますが、エラーコードなどは出ておらず、動作します。また、真っ黒ではありますがtableViewの記事一覧の画面まで戻るボタンで戻ることができます。

[Narikura]

コメントの入れ違いとなってしまいすみません。コンソールの方にはURLも含め出力されております。

[TsukubaDepot]

（削除）

[TsukubaDepot]

とすると、どこかの設定が足りないか間違っている可能性が高いと思います。
いちど、新規にプロジェクトを作り、StoryBoard は新規に作り直し、コードだけ流用してみてはいかがでしょうか。
もし、それで遷移先が「白い画面」であれば現時点では正常ですし、そうでなければ　StoryBoard の設定がおかしいということになります。

[TsukubaDepot]

ちなみに、「真っ暗な画面」ということですが、実機やシミュレータを「ダークモード」にしているということはありませんでしょうか。
遷移先の画面には何も表示させていないので、遷移しても真っ白（ダークモードだと真っ黒）になります。

[Narikura]

新規プロジェクトで試してみます。ありがとうございます。また、シュミレーターはダークモードではありませんでした

[Narikura]

新規プロジェクトで試しました。黒い画面ではなく次は白い画面に白い画面になりました。URLもコンソールに表示されるようになりました。ありがとうございます。ちなみにですがWebページを表示させるにはViewController2にWKWebViewを設置するという認識でいいでしょうか。

[TsukubaDepot]

そうですね。次の画面に WkWebView を配置して、アウトレットを引っ張り、操作することになるかと思います。

余計なひとこととは思いますが、まずは WkWebView だけで任意のページを表示する例題を作ってみて、それが思い通りに動いてから、今回のプロジェクトと組み合わせると、仮に WkWebView でつまづいても原因の判別がやりやすいかと思います。

[Narikura]

多くの助言、解決策を提示していただきありがとうございました。無事WebViewにも出力できました。