【Swift】【Xcode】TableViewの使い方。Part.1 準備編

#●まえがき
こんにちは。今回は初心者がよくつまずくであろう**TableView**について紹介します。
私自身もつまずき合計で**50**時間ほど理解するのに時間がかかりました。
一番つまずいた、何個もセクションやセルを追加する方法も丁寧に説明しますよ〜

この記事を見れば大幅に理解するための時間短縮になると思います！


##今回作る物
![スクリーンショット 2020-01-07 14.34.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/b823f198-51b1-11aa-fda6-efb603f09ac7.png)
**追加ボタンを押すとセクション追加画面へ。**

![スクリーンショット 2020-01-07 14.38.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/cfc07114-dc18-8cca-d0cc-f0b42c9e1468.png)
**今回はJapan,America,Franceの３つのセクションを作ってみます。**
![スクリーンショット 2020-01-07 14.40.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/1c6ac741-20df-81b0-1fbb-107c91a86c28.png)
**次にそれぞれの国の都市をセルに追加していきます。**
![スクリーンショット 2020-01-07 14.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/b2d899c6-b865-23d6-6e65-62836a39d0fc.png)
**このようになります**
![スクリーンショット 2020-01-07 14.42.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/5af2d508-f5d9-ac57-c99a-414f15d32401.png)
**セルをタップするとタップされたセルの情報を取得します**
![スクリーンショット 2020-01-07 14.42.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/c88624a2-3c25-f596-c2fc-0aa60e0bce61.png)


**これを作っていきます！！**
**それでは**Let`s Go!!**



#●解説
##目次
Part.1 
  1.プロジェクトの立ち上げ
  2.Main.Storyboardの設定
  3.各種接続
 
Part.2 
  4.TableViewの設定
  5.多次元配列について
  6.残りのコードについて
  7.起動してみよう
  8.チャレンジ


##Step.1 プロジェクトの立ち上げ
基本的な操作は理解しているものとして進めていきます。
**今回のプロジェクト名は"TableViewStudy"としました**

##Step.2 Main.Storyboardの設定
まえがきで説明した物を作るために、新しいViewControllerを(**SectionAdd,CellAdd,CellTapped**)3つ作ります。

まずは
**ViewController,NavigationBar,BarButtonItem,TextField,Button**の設置をしましょう。
<img width="339" alt="スクリーンショット 2020-01-07 13.51.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/294923b1-bddc-7421-31b6-aaa85acd63df.png">
次にTableViewとTableViewCellの設置をしましょう。
TableViewを先にView目一杯に広げ、その後にTableViewCellを設置します。

<img width="353" alt="スクリーンショット 2020-01-07 13.56.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/c7013e8d-e78e-cdb3-4863-09d3247e11e6.png">

##Step.3各種接続
###■**SectionAdd,CellAdd,CellTapped**の3つのClassを追加する。

**NewFileからCocoaTouchClassを選択、SubclassOf:はUIViewControllerにしてください。**

<img width="1280" alt="スクリーンショット 2020-01-07 14.03.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/4b950537-50fd-8ff5-4901-83126d2824e5.png">
<img width="1280" alt="スクリーンショット 2020-01-07 14.04.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/079a256e-4b9b-801d-4078-affd3c666a3f.png">
<img width="738" alt="スクリーンショット 2020-01-07 14.04.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/c84bc97b-3750-5373-3bb9-28f0468dae3e.png">

###■storyboardの接続。
下の画像の手順にしたがって、上から順にSectionAdd,CellAdd,CellTappedと実行してください。
<img width="1280" alt="スクリーンショット 2020-01-07 14.12.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/d79bb3a4-b01e-9658-8c43-39a048d87272.png">

###■画面遷移の設定。
controlキーを押しながらドラッグアンドドロップしましょう。**ActionSegueはShowにしてください。**
<img width="1280" alt="スクリーンショット 2020-01-07 14.18.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/854486cd-4129-0889-c4e6-98d84338136d.png">

ios13から画面遷移の設定が変わったそうなので（私はあまりよく知らない）
下の画像の手順にしたがって、**PresentationをFullScreenにしてください。**
<img width="1280" alt="スクリーンショット 2020-01-07 14.19.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/4e89c151-eea2-b937-7066-c35220cf3200.png">

**セル追加画面と、表示画面はのちに出てくるボタンから遷移します**
<img width="339" alt="スクリーンショット 2020-01-07 14.26.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/70b40588-50ae-deaa-caa7-5cb2ea426b3a.png">

###■**セルのIdentifierをTableCellとする。**
<img width="1011" alt="スクリーンショット 2020-01-07 16.23.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/d71420fc-ccb4-9671-4f5b-8b7608fcf351.png">

###■**ViewControllerのIdentifierをcellAdd,cellTappedとする。**
<img width="1011" alt="スクリーンショット 2020-01-07 16.39.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/a4de619c-836e-93c2-780d-aa7f6e96154f.png">
<img width="1011" alt="スクリーンショット 2020-01-07 16.42.18.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/59586899-fef1-880a-37a2-14efc79102e3.png">

###■TableViewのdataSourceとdelegateを接続する。
<img width="1280" alt="スクリーンショット 2020-01-07 19.47.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/d83643dd-fd3f-e176-abd2-6fa16e012b6e.png">

###■セルの高さを可変にするためにAutomaticにチェックを入れる。
<img width="1011" alt="スクリーンショット 2020-01-07 19.49.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/b7c243b9-08c6-6ccd-a335-16aaccd8e65f.png">
<img width="1011" alt="スクリーンショット 2020-01-07 19.49.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/517291/7f4389f6-a143-3640-f90a-faeffc6a1e78.png">


##おわりに
Part.1はここまでです！　お疲れ様でした！！
次回のPart.2からコードを書いていきます！

[【Swift】【Xcode】詳しいTableViewの使い方。Part.2 コード編](https://qiita.com/akidon0000/items/8afa303d6d3b7319c0d7)