[Xcode11・Swift5]メモアプリを作る＃03

※この記事は初心者の方や初めてアプリを作る人を対象にしています。
動作環境　Xcode Version 11.4　Swift version 5.2

この記事ではTableViewの基本操作の説明をしています。

まずは準備から

メモアプリを作っていく為に、TableViewの基本をおさえておきたいと思います。

まず画面を分割しておこう！

まずはstoryboardとアシスタントエディタ（コードを書く画面）の両方を表示させます。
前回作ったMemoTableViewController.swiftを「option」を押しながらクリックしてみて下さい。
これでstoryboardとアシスタントエディタが同時に表示されたと思います。

ナビゲーターエリアとユーティリティエリアは今回使わないので②の青くなってる部分をクリックして消しておきましょう。

Xcodeの画面の名称などの詳しい説明はこちらの記事に書いているので参考にしてみて下さいね！
[Xcode]画面の見方と名称

下記画像のような感じになりましたか？

MemoTableViewController.swiftの説明

画面の分割ができたので、次はアシスタントエディタ（コードが書いてある画面）の方のMemoTableViewController.swiftに書いてあるコードの説明をざっくりしておきます。

まだ何も書いてないのに最初から難しそうなコードが書いてあると思います。
これは前回のファイル作成時の赤枠の部分でUITableViewController のサブクラスに設定したのでTableViewを使う為の設定を最初から書いておいてくれています。
難しそう、いややな〜と思わず楽できてラッキーと思いましょう(￣▽￣)

内容的にはTableViewを扱うためのdelegateの設定や、TableView独自のメソッド、よく使うメソッドが書いてあります。
もう既に書いてあるメソッドの処理の中身を書いていく感じです！

TableViewを使う練習をしてみよう

では実際にメモを表示してみましょう。
流れとしては、配列を作りそこにメモの内容を書いて、それをTableViewに表示してみます。

配列を作る

とりあえずメモの内容を配列にしておきましょう。

class MemoTableViewController: UITableViewController {
    
    var memos = ["まゆげじお", "F-chan", "D-matsuo"]//←これ追加
    
    override func viewDidLoad() {
        super.viewDidLoad()

セルの設定

次にセルの設定をしていきます。
ここでする事は、セルのセクションの数とセルの行数の設定をします。

最初から書いてくれているメソッドにちょっとコードを書くだけで大丈夫なので簡単ですよ。

では順に説明していきます。
まず1行目のNumberOfSectionsメソッドですが、これはリストがいくつのセクションに分かれているかを設定します。
今回はセクションは一つしかないので「return 1」としましょう。

次に6行目のメソッドですが、numberOfRowsと書いてる部分がありますが、「行の数」と言う意味です。
なのでここで行数の設定をします。

今回のメモの行数は先ほど書いた配列「memos」の要素数にしたいので、配列を増やした時にも対応できるように3とは書かずに「self.memos.count」としました。
「count」で要素の数を取得しています。

override func numberOfSections(in tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return 1//これ追加
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return self.memos.count//これ追加
}

セルの作成

次にセルを作成してそのセルに配列の中身を代入し、TableViewに表示します。
とりあえず下記コードを見てみましょう！
（今回編集するメソッドはコメントアウトになっているので/*これと*/を消して下さい。）

//    /* ←を消す
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MemoTableViewCell", for: indexPath)//ここ編集

    // Configure the cell...
    cell.textLabel?.text = self.memos[indexPath.row]//ここ追加
    return cell
}
//    */ ←を消す

このメソッドの中でセルを作っていきます。
しかしセルが50行あったら50行のセルを作る訳ではありません。
1行だけ作ってそれを使い回す仕組みになってます。

その仕組みを書く場所がdequeReusableCell メソッドの箇所です。

まずは作ったセルをどこに表示するかを設定します。

前回の記事でセルのIdentifier設定をしましたね？
そのセルに表示させたいのでその時つけた名前「MemoTableViewCell」を書いてあげます。
withIdentifier: “reuseIdentifier”をwithIdentifier: “MemoTableViewCell”に変更します。

次にこのセルに配列の要素を表示してもらう為のコード書きます。
6行目を見てみましょう。

セルにはデフォルトでオプショナル型のtextlabelが設定されています。
オプショナルチェイニングを使い「textプロパティ」に中身を設定しています。
ちょっと難しいですね、、、

まぁ詳しい事は置いといて、要するにセルの中に先ほど作った配列の要素（今回は文字列）を代入しています。

このように書けば配列memosの中身が1行ずつ代入されて表示されるのがわかればOKです！

シュミレータで確認してみよう

では「command + r」でシュミレーターを立ち上げてセルが表示されているか確認してみましょう！
少し時間かかると思いますが気長に待ちましょう。

下記画像のようになっていればOKです！
こんな感じで作っていきます！

今回のソース

import UIKit

class MemoTableViewController: UITableViewController {
    
    var memos = ["まゆげじお", "F-chan", "D-matsuo"]
                
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // MARK: - Table view data source

override func numberOfSections(in tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return 1//これ追加
}

override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return self.memos.count//これ追加
}

//    /* ←を消す
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "MemoTableViewCell", for: indexPath)//ここ編集

    // Configure the cell...
    cell.textLabel?.text = self.memos[indexPath.row]//ここ追加
    return cell
}
}

長くなるのでコメントアウトしてるコードは削除してたりします。

まとめ

今回はTableViewの基本的な使い方を説明しました。

セルに配列の中身を代入する部分の説明は詳しくしませんでしたね。
もし理解できなくても今後、困った時に調べたりして少しずつ理解していくと言うスタンスで良いと思います！
もし後々困る事がなかったら理解する必要すらありません(￣▽￣)

自分が作りたいアプリに必要ない知識はいらないですよね？
そう言う事です！w
細かい事は気にせずどんどん作っていきましょう！