tableViewからtableViewへ遷移する

#はじめに
1枚目のテーブルビューでジャンルを選択して，2枚目のテーブルビューでその要素一覧を表示したい時ってありません？そういうのなんて単語で表すのだろう．．．調べ方が分からないので，自分で書いてメモを兼ね投稿します．

#いろいろ配置

まずはストーリーボードから

<img width="892" alt="スクリーンショット 2018-02-12 3.42.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/6460c459-189c-53b8-95b1-4132856a9321.png">

黄色い四角を選択して

<img width="1440" alt="スクリーンショット 2018-02-12 3.42.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/7368eeab-78a2-c3d5-7762-d934b514c81b.png">

「Editor」→「Embed In」→「Navigation Controller」を選択すると．．．

<img width="1440" alt="スクリーンショット 2018-02-12 3.43.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/03a5e6f4-c431-dcf6-9718-182958409be6.png">

こうなる．

<img width="1440" alt="スクリーンショット 2018-02-12 3.43.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/48e92f22-5f9a-2001-be60-5656c7ef4bb5.png">

そして，黄色い四角をコントールキー（右クリック）で引っ張っると．．．

<img width="1440" alt="スクリーンショット 2018-02-12 3.44.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/d874882d-f17f-dce0-2b90-7e5aaf1671cb.png">

遷移の種類が出てくるので「Show」を選択．

<img width="1440" alt="スクリーンショット 2018-02-12 3.44.24.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/4f6b5722-db69-d231-74ac-e8833843ba80.png">

そしてこうなる．いろいろなアプリで見かけるやつです．

<img width="1440" alt="スクリーンショット 2018-02-12 3.44.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/d2dfe462-903b-e7f1-c539-5ef8519bd288.png">

TableViewと

<img width="1440" alt="スクリーンショット 2018-02-12 3.45.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/32f91f68-4f22-da47-6507-32a5e761e075.png">

TableViewCellを各画面に配置すると．．．

<img width="1440" alt="スクリーンショット 2018-02-12 3.45.25.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/f2f45491-1070-d277-1da3-a9f94c23f720.png">

こうなる．

<img width="1440" alt="スクリーンショット 2018-02-12 4.10.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/4c3ef370-c65b-6118-8cfb-db63e07777d6.png">

そして，1枚目の画面から2枚目の画面への遷移を選択してidentifierを設定する．以上で見た目の準備は完了．

#コーディング
コーディングをゴリゴリしていく前に．．．このままだとコーディングをするファイルが足らないので，ファイルを作成します．
まずは2枚目のViewControllerのファイルを作成します．（詳しい説明は省略）
次にTableViweCellのファイルを作成します．

<img width="1440" alt="スクリーンショット 2018-02-12 3.45.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/7a9af0c3-07ec-65a7-7f56-6ea247936288.png">

「File」→「New」→「File...」で「Cocoa Touch Class」を選択．

<img width="1440" alt="スクリーンショット 2018-02-12 3.47.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/2fd0281d-f3ea-ca44-4676-471b6f50f166.png">

名前は「TableViewCell」 **SubClassは「UITableViewCell」を選択．「Also create XIB file」のチェックも忘れずに**．
このファイルを各画面ごとに作成します．2枚目の画面は「secondTableViewCell」としました．


<img width="1440" alt="スクリーンショット 2018-02-12 3.55.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/df69d7bb-3e8f-030f-f5c5-702bcdbd30b8.png">

.xibファイルのセルを選択し，identifierを設定．「TableViewCell」は「cell_01」，「secondTableViewCell」は「cell_02」としました．


<img width="1440" alt="スクリーンショット 2018-02-12 3.56.21.png" src="https://qiita-image-store.s3.amazonaws.com/0/173720/7af55e94-50b4-e318-6670-eaffe4a2f46e.png">

そして.xibファイルのセルにLabelを配置．（両方の.xibファイルで）

あとは下記のコードをゴリゴリしていくだけ．


```swift:ViewController.swift
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // テーブルビュー
    @IBOutlet var tableView: UITableView!
    
    // セルの要素をあらかじめ決めうち
    let someArray: [String] = ["果物", "スポーツ", "アニメ", "野菜", "映画", "飲み物"]
    
    // 選択されたセルを覚える変数
    var chosenCell: Int!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        
        // テーブルビューにTableViewCellを登録
        tableView.register(UINib(nibName: "TableViewCell", bundle: nil),forCellReuseIdentifier: "cell_01")
        
        tableView.delegate = self
        tableView.dataSource = self
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    
    // セルの数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // someArrayの中身の数だけセルを表示
        return someArray.count
    }
    
    // 各セルの要素を指定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // UITableViewCellのインスタンスを生成
        let cell = tableView.dequeueReusableCell(withIdentifier: "cell_01", for: indexPath) as! TableViewCell
        
        // セルのUILabelに配列の中身を順に表示
        cell.label.text = someArray[indexPath.row]
        
        return cell
    }

    // セルが選択された時に呼ばれる
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        // 選択されたcellの番号を記憶
        chosenCell = indexPath.row
        // 画面遷移の準備
        performSegue(withIdentifier: "toSecondViewController",sender: nil)
    }
    
    // Segue 準備
    override func prepare(for segue: UIStoryboardSegue, sender: Any!) {
        // 遷移先のViecControllerのインスタンスを生成
        let secVC: secondViewController = (segue.destination as? secondViewController)!
        // secondViewControllerのgetCellに選択された画像を設定する
        secVC.getCell = chosenCell
        
    }
    
}

```

```swift:TableViewCell.swift
class TableViewCell: UITableViewCell {
    
    @IBOutlet var label: UILabel!

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

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

        // Configure the view for the selected state
    }
    
}

```


```swift:secondViewController.swift
class secondViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // テーブルビュー
    @IBOutlet var secondTableView: UITableView!
    
    // ViewControllerから選択されたCell番号を受け取る変数
    var getCell: Int!

    // セルの要素をあらかじめ決めうち
    // 果物
    let fruitArray: [String] = ["リンゴ", "ブドウ", "バナナ", "オレンジ", "レモン", "ピーチ"]
    // スポーツ
    let sportArray: [String] = ["サッカー", "野球", "ラグビー", "卓球"]
    // アニメ
    let animeArray: [String] = ["ポ", "プ", "テ", "ピ", "ピ", "ッ", "ク"]
    // 野菜
    let vegetableArray: [String] = ["スイカ", "トマト", "キャベツ", "キュウリ", "大豆", "レタス", "サニーレタス"]
    // 映画
    let movieArray: [String] = ["ハリーポッター", "スターウォーズ", "アイアンマン", "スパイダーマン", "ゴーストバスターズ", "ブラックホークダウン", "タイタニック", "バックトゥーザフューチャー", "ジュラシックパーク"]
    // 飲み物
    let drinkArray: [String] = ["コーラ", "烏龍茶"]
    
    // 選択されたジャンルの配列の長さ変数
    var arrayLength: Int!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // テーブルビューにTableViewCellを登録
        secondTableView.register(UINib(nibName: "secondTableViewCell", bundle: nil),forCellReuseIdentifier: "cell_02")
        
        secondTableView.delegate = self
        secondTableView.dataSource = self
        
        // 選択されたジャンルによってセルの数を変える
        // getCellの中身が・・・
        switch getCell {
            // 0のとき
        case 0:
            arrayLength = fruitArray.count
            // 1のとき
        case 1:
            arrayLength = sportArray.count
            // 2のとき
        case 2:
            arrayLength = animeArray.count
            // 3のとき
        case 3:
            arrayLength = vegetableArray.count
            // 4のとき
        case 4:
            arrayLength = movieArray.count
            // 5のとき
        case 5:
            arrayLength = drinkArray.count
        default:
            break
        }
        
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    

    // セルの数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        // someArrayの中身の数だけセルを表示
        return arrayLength
    }
    
    // 各セルの要素を指定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        // UITableViewCellのインスタンスを生成
        let cell = secondTableView.dequeueReusableCell(withIdentifier: "cell_02", for: indexPath) as! secondTableViewCell
        
        // 選択されたジャンルによってセルの中身を変える
        // getCellの中身が・・・
        switch getCell {
        // 0のとき
        case 0:
            // セルのUILabelに配列の中身を順に表示
            cell.secondLabel.text = fruitArray[indexPath.row]
        // 1のとき
        case 1:
            cell.secondLabel.text = sportArray[indexPath.row]
        // 2のとき
        case 2:
            cell.secondLabel.text = animeArray[indexPath.row]
        // 3のとき
        case 3:
            cell.secondLabel.text = vegetableArray[indexPath.row]
        // 4のとき
        case 4:
           cell.secondLabel.text = movieArray[indexPath.row]
        // 5のとき
        case 5:
            cell.secondLabel.text = drinkArray[indexPath.row]
        default:
            break
        }
        
        return cell
    }
   
}
```

```swift:secondTableViewCell.swift
class secondTableViewCell: UITableViewCell {
    
    @IBOutlet var secondLabel: UILabel!

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

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

        // Configure the view for the selected state
    }
    
}
```

はい．以上になります．
**各部品の関連付けを忘れないように**

今回作成したサンプルのリンクを以下に貼っておきます．
[Github](https://github.com/tomoyukiHAYAKAWA/tableViewsSample)