Skip to main content
カスタムセルクラスにも修正が必要だったので、コード追記&修正
ソース リンク
OOPer
  • 1.9万
  • 2
  • 16
  • 33

コメント投稿画面

class ArticleViewController: UIViewController,UITextFieldDelegate, UITableViewDataSource, UITableViewDelegate {

    //...

    //### この画面で「タイムラインの記事」全部を保持する必要はない
    //var postArray: [PostData] = []

    //...

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        guard let postData = postDataReceived else {
            return
        }
        
        //### この画面でタイムライン全体を監視しても意味が無い。監視するとしたら`postData`だけを監視する
        
        //イメージ画像
        self.articleImage.image = postData.image
        //キャプションのテキスト
        self.articleLabel.text = "\(postData.caption!)"
        //いいねの数
        let likeNumber = postData.likes.count
        articleLilkeCount.text = "\(likeNumber)"
    }

    //...

    //コメントテーブルビュー
    //### コメントをtableViewに表示するのであれば、ここで「コメントの数」を返さないといけない
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //`postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        if let postData = postDataReceived {
            return postData.comments.count  //コメントの数を返す
        } else {
            return 0  //`postDataReceived`がnilなら0
        }
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // セルを取得してデータを設定する
        //### セルのIDには意味のあるわかりやすい名前をつけましょう
        let cell = tableView.dequeueReusableCell(withIdentifier: "CommentCell", for: indexPath) as! CommentTableViewCell

        //### `postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        guard let postData = postDataReceived else {
            return cell
        }
        //### コメント用セルには、コメントに関する情報を渡さないといけない、記事全体ではない
        //cell.commentSetPostData(postData)
        
        //テキストを初期化
        //### `indexPath`番目のコメントを設定
        cell.commentLabel.text = postData.comments[indexPath.row]
        
        //### セル内のUI要素にアクションを設定する場合、古いアクションをクリアしないといけない
        cell.goodButton.removeTarget(self, action: nil, for: .touchUpInside)
        // セル内のボタンのアクションをソースコードで設定する
        cell.goodButton.addTarget(self, action:#selector(handleGoodButton(_:forEvent:)), for: .touchUpInside)
        
        return cell
    }

    //...

    
    // セル内のボタンがタップされた時に呼ばれるメソッド
    @objc func handleGoodButton(_ sender: UIButton, forEvent event: UIEvent) {
        print("DEBUG_PRINT: goodボタンがタップされました。")
        
        //### ここでevent.allTouchesから位置を求めても「Goodボタンの位置」が取れるだけ
        // タップされたセルのインデックスを求める
        //let touch = event.allTouches?.first
        //let point = touch!.location(in: self.commentTableView)
        //let indexPath = commentTableView.indexPathForRow(at: point)
        
        //### この画面で表示されている記事のデータを取り出す
        guard let postData = postDataReceived else {
            return
        }
        
        //...
    }
}

カスタムセル

class CommentTableViewCell: UITableViewCell {

    @IBOutlet weak var commentLabel: UILabel!
    @IBOutlet weak var goodButton: UIButton!
    @IBOutlet weak var countLabel: UILabel!

    //### 不要
    //前画面からデータを受け取るための変数
    //var postDataReceived: PostData?

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

    }

    //### `self.commentLabel.text`内容をループ内で次々に入れ替えても意味はない
//    func commentSetPostData(_ postData: PostData) {
//        postDataReceived = postData
//
//        //postData.commentsの中から要素をひとつずつ取り出すのを繰り返す、というのがcomment
//        for comment in postData.comments{
//            //commentLabelに表示するのはcomment
//            self.commentLabel.text = comment
//        }
//    }
}
class ArticleViewController: UIViewController,UITextFieldDelegate, UITableViewDataSource, UITableViewDelegate {

    //...

    //### この画面で「タイムラインの記事」全部を保持する必要はない
    //var postArray: [PostData] = []

    //...

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        guard let postData = postDataReceived else {
            return
        }
        
        //### この画面でタイムライン全体を監視しても意味が無い。監視するとしたら`postData`だけを監視する
        
        //イメージ画像
        self.articleImage.image = postData.image
        //キャプションのテキスト
        self.articleLabel.text = "\(postData.caption!)"
        //いいねの数
        let likeNumber = postData.likes.count
        articleLilkeCount.text = "\(likeNumber)"
    }

    //...

    //コメントテーブルビュー
    //### コメントをtableViewに表示するのであれば、ここで「コメントの数」を返さないといけない
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //`postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        if let postData = postDataReceived {
            return postData.comments.count  //コメントの数を返す
        } else {
            return 0  //`postDataReceived`がnilなら0
        }
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // セルを取得してデータを設定する
        //### セルのIDには意味のあるわかりやすい名前をつけましょう
        let cell = tableView.dequeueReusableCell(withIdentifier: "CommentCell", for: indexPath) as! CommentTableViewCell

        //### `postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        guard let postData = postDataReceived else {
            return cell
        }
        cell.commentSetPostData(postData)
        
        //テキストを初期化
        //### `indexPath`番目のコメントを設定
        cell.commentLabel.text = postData.comments[indexPath.row]
        
        //### セル内のUI要素にアクションを設定する場合、古いアクションをクリアしないといけない
        cell.goodButton.removeTarget(self, action: nil, for: .touchUpInside)
        // セル内のボタンのアクションをソースコードで設定する
        cell.goodButton.addTarget(self, action:#selector(handleGoodButton(_:forEvent:)), for: .touchUpInside)
        
        return cell
    }

    //...

    
    // セル内のボタンがタップされた時に呼ばれるメソッド
    @objc func handleGoodButton(_ sender: UIButton, forEvent event: UIEvent) {
        print("DEBUG_PRINT: goodボタンがタップされました。")
        
        //### ここでevent.allTouchesから位置を求めても「Goodボタンの位置」が取れるだけ
        // タップされたセルのインデックスを求める
        //let touch = event.allTouches?.first
        //let point = touch!.location(in: self.commentTableView)
        //let indexPath = commentTableView.indexPathForRow(at: point)
        
        //### この画面で表示されている記事のデータを取り出す
        guard let postData = postDataReceived else {
            return
        }
        
        //...
    }
}

コメント投稿画面

class ArticleViewController: UIViewController,UITextFieldDelegate, UITableViewDataSource, UITableViewDelegate {

    //...

    //### この画面で「タイムラインの記事」全部を保持する必要はない
    //var postArray: [PostData] = []

    //...

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        guard let postData = postDataReceived else {
            return
        }
        
        //### この画面でタイムライン全体を監視しても意味が無い。監視するとしたら`postData`だけを監視する
        
        //イメージ画像
        self.articleImage.image = postData.image
        //キャプションのテキスト
        self.articleLabel.text = "\(postData.caption!)"
        //いいねの数
        let likeNumber = postData.likes.count
        articleLilkeCount.text = "\(likeNumber)"
    }

    //...

    //コメントテーブルビュー
    //### コメントをtableViewに表示するのであれば、ここで「コメントの数」を返さないといけない
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //`postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        if let postData = postDataReceived {
            return postData.comments.count  //コメントの数を返す
        } else {
            return 0  //`postDataReceived`がnilなら0
        }
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // セルを取得してデータを設定する
        //### セルのIDには意味のあるわかりやすい名前をつけましょう
        let cell = tableView.dequeueReusableCell(withIdentifier: "CommentCell", for: indexPath) as! CommentTableViewCell

        //### `postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        guard let postData = postDataReceived else {
            return cell
        }
        //### コメント用セルには、コメントに関する情報を渡さないといけない、記事全体ではない
        //cell.commentSetPostData(postData)
        
        //テキストを初期化
        //### `indexPath`番目のコメントを設定
        cell.commentLabel.text = postData.comments[indexPath.row]
        
        //### セル内のUI要素にアクションを設定する場合、古いアクションをクリアしないといけない
        cell.goodButton.removeTarget(self, action: nil, for: .touchUpInside)
        // セル内のボタンのアクションをソースコードで設定する
        cell.goodButton.addTarget(self, action:#selector(handleGoodButton(_:forEvent:)), for: .touchUpInside)
        
        return cell
    }

    //...

    
    // セル内のボタンがタップされた時に呼ばれるメソッド
    @objc func handleGoodButton(_ sender: UIButton, forEvent event: UIEvent) {
        print("DEBUG_PRINT: goodボタンがタップされました。")
        
        //### ここでevent.allTouchesから位置を求めても「Goodボタンの位置」が取れるだけ
        // タップされたセルのインデックスを求める
        //let touch = event.allTouches?.first
        //let point = touch!.location(in: self.commentTableView)
        //let indexPath = commentTableView.indexPathForRow(at: point)
        
        //### この画面で表示されている記事のデータを取り出す
        guard let postData = postDataReceived else {
            return
        }
        
        //...
    }
}

カスタムセル

class CommentTableViewCell: UITableViewCell {

    @IBOutlet weak var commentLabel: UILabel!
    @IBOutlet weak var goodButton: UIButton!
    @IBOutlet weak var countLabel: UILabel!

    //### 不要
    //前画面からデータを受け取るための変数
    //var postDataReceived: PostData?

    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

    }

    //### `self.commentLabel.text`内容をループ内で次々に入れ替えても意味はない
//    func commentSetPostData(_ postData: PostData) {
//        postDataReceived = postData
//
//        //postData.commentsの中から要素をひとつずつ取り出すのを繰り返す、というのがcomment
//        for comment in postData.comments{
//            //commentLabelに表示するのはcomment
//            self.commentLabel.text = comment
//        }
//    }
}
ソース リンク
OOPer
  • 1.9万
  • 2
  • 16
  • 33

さて、コメントでは少し端折って書いてしまいましたが、あなたが「コメント投稿画面」内のtableViewにコメントの一覧を表示したいのであれば、

  • tableView(_:numberOfRowsInSection:)ではコメントの数を返す
  • tableView(_:cellForRowAt:)ではindexPath番目のコメントをセットしたcellを返す

と言うことが必要です。

また「コメント投稿画面」内でタイムライン全体を保持する必要はありません。

そこら辺を踏まえてあなたのコードを書き直すと、こんな感じになります。

(削除すべきところをわかりやすくするために、コメントアウトしているだけの部分がありますが、不要ですのでさっくり削除してください。)

class ArticleViewController: UIViewController,UITextFieldDelegate, UITableViewDataSource, UITableViewDelegate {

    //...

    //### この画面で「タイムラインの記事」全部を保持する必要はない
    //var postArray: [PostData] = []

    //...

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        guard let postData = postDataReceived else {
            return
        }
        
        //### この画面でタイムライン全体を監視しても意味が無い。監視するとしたら`postData`だけを監視する
        
        //イメージ画像
        self.articleImage.image = postData.image
        //キャプションのテキスト
        self.articleLabel.text = "\(postData.caption!)"
        //いいねの数
        let likeNumber = postData.likes.count
        articleLilkeCount.text = "\(likeNumber)"
    }

    //...

    //コメントテーブルビュー
    //### コメントをtableViewに表示するのであれば、ここで「コメントの数」を返さないといけない
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        //`postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        if let postData = postDataReceived {
            return postData.comments.count  //コメントの数を返す
        } else {
            return 0  //`postDataReceived`がnilなら0
        }
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        
        // セルを取得してデータを設定する
        //### セルのIDには意味のあるわかりやすい名前をつけましょう
        let cell = tableView.dequeueReusableCell(withIdentifier: "CommentCell", for: indexPath) as! CommentTableViewCell

        //### `postDataReceived`がnilの時に呼ばれる可能性もあるので、条件付きバインディングで判定
        guard let postData = postDataReceived else {
            return cell
        }
        cell.commentSetPostData(postData)
        
        //テキストを初期化
        //### `indexPath`番目のコメントを設定
        cell.commentLabel.text = postData.comments[indexPath.row]
        
        //### セル内のUI要素にアクションを設定する場合、古いアクションをクリアしないといけない
        cell.goodButton.removeTarget(self, action: nil, for: .touchUpInside)
        // セル内のボタンのアクションをソースコードで設定する
        cell.goodButton.addTarget(self, action:#selector(handleGoodButton(_:forEvent:)), for: .touchUpInside)
        
        return cell
    }

    //...

    
    // セル内のボタンがタップされた時に呼ばれるメソッド
    @objc func handleGoodButton(_ sender: UIButton, forEvent event: UIEvent) {
        print("DEBUG_PRINT: goodボタンがタップされました。")
        
        //### ここでevent.allTouchesから位置を求めても「Goodボタンの位置」が取れるだけ
        // タップされたセルのインデックスを求める
        //let touch = event.allTouches?.first
        //let point = touch!.location(in: self.commentTableView)
        //let indexPath = commentTableView.indexPathForRow(at: point)
        
        //### この画面で表示されている記事のデータを取り出す
        guard let postData = postDataReceived else {
            return
        }
        
        //...
    }
}

Value of optional type 'PostData?' must be unwrapped ...なんてエラーをご自身で解決できない状態ということは、まだSwift言語の基本中の基本であるOptional型の扱いが全くわかっていないと言うことになります。

「いろんなサイトの記事をコピペしてつなぎ合わせて、よくわからないままコンパイルだけ通るようにする」なんてことをしているだけでは、どこにでもあるサンプルコード以上のものを作れるようにはなりません。

App Storeにあげられるようなアプリを作りたいのであれば、きちんとSwift言語の基礎から学習し直すことをお勧めします。


なお、上記のコードは「とりあえずtableViewにコメントを表示する」だけのものです。コードのコメント中に書いた「postDataだけを監視する」コードはご自身で調べて追加してみてください。