配列の中身をUITableViewに表示 + Cellの選択解除のアニメーション実装

バージョン情報：
Swift Version 5.6
Xcode Version 13.3.1

## 概要
XcodeとSwiftを使って「配列の中身をTableViewCellに表示させる方法」を解説します。
「Cellを選択すると自動で選択が解除される機能」も併せて解説します。

本記事ではユーティリティエリアの右上にある7つのアイコン（下画像）を左から「ファイル」「時計」「はてな」「新聞」「ゲージ」「三角」「C」アイコンと呼びます。
ご承知おきください。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/173bb885-ebcf-f39e-75cf-f0490ce45b3a.png">
## 目次
[1.StoryBoardの設定](#1storyboardの設定)
[2.Cellの設定](#2cellの設定)
[3.配列を作成](#3配列を作成)
[4.TableViewにデータを反映](#4tableviewにデータを反映
)
[5.Cellの選択解除のアニメーション](#5cellの選択解除のアニメーション)

## 1.StoryBoardの設定

まず、初期設定で配置されているViewControllerを削除し、TableViewcontrollerを配置。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/6305a22b-2442-8429-aa1b-1238d08da73b.png">
TableViewControllerを選択してユーティリティの「ゲージ」アイコンをクリックし、「Is Initial View Controller」にチェックを入れる。
（これをしないと、どのViewControllerがアプリのスタート画面かを指定できない）￼
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/255f3902-2873-3c61-2214-f4799db41046.png">
##### TableViewControllerに紐付けるswiftファイルを作成。

<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/5c06865f-9c72-7a64-8d32-c4ea0d04f274.png">

<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/ee53f533-03cc-e945-0ae8-681f1905b0f4.png">

<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/0c37ef89-1dec-50b8-fd33-028d1459f46e.png">

忘れないうちに、TableViewControllerとSwiftファイルを紐付け。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/bfb12a5b-7044-fa52-02b4-93758694da58.png">
次に、Cellを選択する。
TableViewを操作するときは、TableView、cell、ContentViewなど選択しているものが変わってしまいやすいので、DocumentOutlineを開いて選択すると安心。（画面がMacのダークモードになっているので黒いです）
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/539b7288-34b2-e91e-939d-7de08727b617.png">
##### 「ゲージ」アイコンをクリックしてIdentifierに好きな名前を入力。（ここではcell）
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/eb062867-1a40-8633-e097-5a6e2e490419.png">

TableView内のCell（行）の高さを変えたい場合はTableViewを選択状態にし、「三角」アイコンをクリックしてRow Heightに好きな数値を入力。（ここでは200）
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/9c7fccdb-7eaa-d232-cefc-9ba5910f88da.png">
最後に、Cellの好きな場所にLabelを一つ配置。
<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/4e2929bc-b3ad-54b0-d0d9-e32a879d5524.png">

これで、StoryBoardでの作業はひとまず終了です！

## 2.Cellの設定

ここからはコードを書いていきます。

まず、TableViewCellのカスタムクラスを作成。
カスタムクラスとは、「あるオブジェクトに関する設定（カスタム）をまとめる箱（クラス）」のこと。
手順は、下の画面の部分以外は[swiftファイルの作成](#tableviewcontrollerに紐付けるswiftファイルを作成)と同じです。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/4d1a95e6-d801-1c14-2fd9-d1a1ee5b8d92.png">
TableViewCell.swiftの中で、先ほど設置したLabelを宣言。
下の画像の位置に``` @IBOutlet var label: UILabel! ```というコードを書く。

これは「label」という名前の「UILabel」を宣言するコード。
```@IBOutlet var```　＝　Swift上のコードとStoryBoard上のオブジェクトを紐付ける
```label```　＝　先ほど配置したUILabelの名前（好きに命名して大丈夫）
```:UILabel!```　＝ オブジェクトの型としてUILabelという型を指定

コードを翻訳すると
「labelという名前のUITLabelがStoryBoardに存在するよ！」
という感じです。

<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/b54eeb6f-4ad3-882e-39fc-cfdc827cf70e.png">

## 3.配列を作成

続いて、UITableViewに表示するデータを準備します。

まずTableViewControllerに移動。
￼<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/2201806b-36ca-903c-df04-90525d763acc.png">

TableViewに表示したいデータを配列に入れます。

配列とは複数のデータを入れる箱のようなものです。 
例えば「りんご」「ぶどう」という文字データや「1」「2」などの数字データを入れられます。

ここでは、「fruits」という名前の配列に「いちご、ぶどう、もも、みかん、マスカット、ドリアン、マンゴスチン」という7つの文字データを入れます。

下の画像のようにコードを書きます。

<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/969f16e8-c61f-2c58-416a-38d144a7247a.png">

``` let fruits ``` ＝ 「fruits」という名前の配列を作成
 ``` : [String] ``` ＝ 配列の中に入れるデータの型を指定（ここではString型）
 ```  ["いちご", ... ,"マンゴスチン"] ``` ＝ 配列に入れるデータを指定

コードを翻訳すると 「fruitsという名前の配列に、"いちご", ... ,"マンゴスチン"というString型のデータを入れるよ！」 という感じです。

これで、TableViewに表示するデータは整いました。ここからは、データをTableViewに反映させていきます。

## 4.TableViewにデータを反映

まず、TableViewにおけるセクションの数を指定します。
セクションとは、TableView内の項目のまとまりのことです。
下の画像では、赤い線で示された範囲が一つのセクションになっています。
<img width="200" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/ac5ae0b5-e1dc-f8a9-6b32-d84d4c78e505.jpeg">
```  override func numberOfSections … ```と書いてある部分を探しましょう。

2行下に``` return 0  ```という部分があるので、``` return 1 ```に変更します。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/ede4889e-287f-164a-8ab4-47b1593cf217.png">
コードの中の主要な部分の説明です。

〜〜〜
``` numberOfSections ``` = 直訳すると「SectionsのNumber」です。つまり、TableViewにおけるSectionのNumber（数）を指定しています。
``` return 1 ``` = Sectionの数を1と指定
〜〜〜

次に、TableViewにおけるCellの数を指定します。

``` override func tableView(_ tableView: UITableView, numberOfRowsInSection … ```と書いてある部分を探しましょう。
2行下に``` return 0  ```という部分があるので、``` return 配列の名前.count  ```に変更します。（ここでは``` return fruits.count  ```）
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/22e22dd9-cd60-72cf-c994-7041e45d2956.png">
コードの中の主要な部分の説明です。

〜〜〜

``` numberOfRowsInSection ``` = 直訳すると「Sectionの中のRowのNumber」です。つまり、TableViewにおけるRow（行）のNumber（数）を指定しています。
``` return fruis.count ``` = fruitsという名の配列の要素をCountする（数える）

〜〜〜

次に、Cellに表示するデータを指定します。

``` override func tableView(_ tableView: UITableView, cellForRowAt … ```と書いてある部分を探しましょう。

以下のようにコードを書きかえます。
（赤枠が書き換える部分）
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/bb678835-1dff-407b-001a-f4cca2883e34.png">
コードの中の主要な部分の説明です。
どこの話かが分かりにくいので番号を振りました。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/74206662-2b4a-7dac-8e72-738a8c00651b.png">
〜〜〜
①
``` cellForRowAt indexPath``` = indexPathで指定されたCellを生成
補足
indexPathとは一つ一つのCellの[セクション](#4tableviewにデータを反映)と「インデックス」（＝全部のCellの中での並び順）の情報が入った箱のこと。
②
``` : IndexPath``` = ``` cellForRowAt indexPath```で生成されるデータの型としてIndexPathという型を指定
③
``` dequeueReusableCell ``` = 再利用可能なCellがあれば、先に作られたCellから順番に再利用していく
（Cellの再利用については以下の記事がおすすめです。
https://qiita.com/Tatsuya_ss0121/items/1c0df20dc738fddfd1fb ）

④
``` withIdentifier: Cellの名前 ``` = CellのIdentifier（名前）を指定（ここでは、[StoryBoardで設定した](#ゲージアイコンをクリックしてidentifierに好きな名前を入力ここではcell)cellという名前を指定）
⑤
``` for: indexPath ``` = indexPathの数だけ繰り返す
⑥
``` as! TableViewCell ``` = Cellの総称としてTableViewCellという名前を指定

〜〜〜
最後に、コードとStoryBoard間で、オブジェクトを関連付けします。

まずLabelを関連付けします。
DocumentOutlineを開いてcellを選択し、画像の通りにlabelを紐付ける。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/f0632d2b-361b-3488-d293-53d468d1802e.png">
次にCellを関連付けします。
DocumentOutlineを開いてcellを選択し、「新聞」アイコンをクリックして「Class」にTableViewCellと入力。
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/73a481d8-8d1a-4abc-33e8-3793a28d2368.png">
これで、配列をTableViewに反映させることができました。

## 5.Cellの選択解除のアニメーション

ここでは最後の仕上げとして、下の動画のような、Cellの選択解除のアニメーションをつけます。
アニメーションが無いと、Cellを選択したら、他のCellを選択するまではずっとそのCellがハイライトされた状態になります。

![Simulator Screen Recording - iPod touch (7th generation) - 2022-06-22 at 21.16.01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/ac83f63e-b31a-f9b4-15ae-a9277e8e80a4.gif)

``` override func tableView(_ tableView: UITableView, cellForRowAt … ```と書いた部分の下に、以下のようにコードを書きます。
（赤枠が追加する部分）
<img width="300" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2713259/49c63419-5b43-51e5-6d72-90b9eeacf6b8.png">
主要なコードの説明です。

〜〜〜
``` didSelectRowAt``` = Cellが選択された時に呼ばれる、ということ
``` deselectRow``` = Row（行）をdeselect（選択解除）する
``` at: indexPath ``` = 選択されたCellのindexPathに該当するCellを指定
〜〜〜

翻訳すると、
「Cellがselectされたら、選択されたCellのindexPathを取得して、Cellの選択状態を解除するよ！」
という感じ。

以上が、配列の中身をUITableViewに表示し、Cellの選択解除のアニメーションを実装する方法です。
￼