【初心者日記#2】画面遷移したい！NavigationView触ってみた！

iPadのplaygroundsにて、swiftUIの勉強をしている初心者です。

:::note warn
NavigationViewについて触れていますが、
解釈や内容に不備があると思われます。
:::


## 前回のおさらい
- 勉強日記をQiitaにぽちぽち書いていくことにしたよ！
- swift…か…。……おもしれーやつ。(`WithAnimation`への感想)
- 簡素なカウンターが3の倍数を教えてくれるアプリが出来上がったよ
- Markdown記法…知らない子…ですね…？

## Markdown記法について
Markdown記法について、ちょっとずつ調べて書き方がわかってきたので試しながら日記を書いていく。

### 参考にした記事

https://qiita.com/maimai0727/items/8c8d2fafa35e8444ea3c

記事にとっても優しいコメントがついてましたね。
>Qiitaでしたら、投稿欄やコメント欄の右上にある「？」をクリックするとマークダウンの書き方が表示されます。

…いや、違うんですわ、あるのは知ってるんですわ。
今読むには情報量が…いささか多すぎて…えぇ…。
なんかもうちょっとシンプルなやつ…が、ほしいなって…。

https://qiita.com/RyosukeOK/items/b39d84704805fda8e02c

こちらもシンプルでとても助かる…
日記という名の備忘録を兼ねているので、こういうのをちまちま書き足していく…


## 初めて触ってみるNavigationView
前回仕上げたのは、簡素なカウンターが3の倍数を教えてくれるアプリでした。
とりあえず簡単なコントロールを配置して
数字を1つ増やす計算をさせる
これだけの機能。

### 画面の数を増やしたい(画面遷移)
1画面のみで完結するデザインのもの…は世の中に多くなく、
いろいろなものを作れるようになるには画面遷移ができることは必須。たぶん。

「swiftUI 画面遷移」で検索…

#### キーワードを拾うために目にした記事

https://qiita.com/SNQ-2001/items/2fe23cd5fa8670d5c827

今よく見たら3つ紹介されてるやん…全文読んで無いやん…

https://qiita.com/magukappu/items/7b93af2e77edf82a1386



はい。
今読んでもよく分からない点だらけではあります。
とりあえず必要なパーツがどれかを探すのに複数記事を斜め読みして共通したキーワードを探すなどしています。


<details><summary>初心者うんこポエム(僕の勉強の進め方について)</summary>

※ポエムが書き連ねられており、あとから読み返して気持ち悪かったので畳んでおきました。

慣れてきて、知の引き出しが増えたらもう少し効率の良い学習手順でいけるんでしょうけど、
まだほら、はじめたばっかりなので。

算数の勉強を始めた小学1年生の頃に「1+1は本当に2なの？」というところを突き詰めたりしなかったと思います。
掘り下げるのは、掘り下げられるようになったタイミングで頑張るのがよさそうです。

独学するならやっぱりまずは、ハローワールドとLチカからやってみるべきだと思っています。

始めたばかりの僕の心構えとしては、こんな感じです。
これが僕にとって正解だったかの答え合わせはいずれ結果として出るでしょう。

はい、ポエムおわり。

</details>


いずれ理解して読めるようになるといいな。と思いつつ、今回は記事を流し読み…

### NavigationViewで画面遷移ができる(っぽい)

画面遷移するために必要なパーツは`NavigationView`と`NavigationLink`らしい。
この2点がセットで使われるものということだけわかった。
掘り下げてさらに調べてみる…

#### 参考にしたもの

https://qiita.com/komkom2/items/0bf992f6dc20e2408a1c

他にも何個か記事を見たけどオプション(というか、プロパティ)が少なめでシンプルに作られていたので、基本の構造がわかりやすかった。


### 記事を読んでなんとなく理解した、必要そうなこと

- 必要なものは`NavigationView`と`NavigationLink`
- 遷移元のページ(「遷移元の`View`」と呼ぶのが正しそうだ)の内部に`NavigationView`を配置する
- 「遷移先の`View`」を、別途書き上げる
- `View`の中の`NavigationView`の中に、`NavigationLink`を配置することでページ遷移が実現する
もちろん`NavigationLink`には「遷移先の`View`」を紐付ける
- `NavigationLink`そのものの見た目を整える

### 作ってみた。

と、いうことで、`NavigationView`と`NavigationLink`を配置してみた。
今あった3の倍数を教えてくれる`View`とは別に、7の倍数を教えてくれる`View`を作成して、2つのビューを行き来できるようにしたかったのだ。


![IMG_0075.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/d9f2c5a3-5289-473f-bda1-4c479277475f.png)

プレビュー君、動いた…！！これよこれ〜
…おや？
![IMG_0075.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/e63e2140-71cc-4f5b-99eb-a57899495001.jpeg)

自動で戻るボタンが配置されるのか…？戻るの機能の実装について考えなくてよくなった。ラッキーw(この後地獄に落ちます)


### アプリとして開いてみた

動作確認はプレビューでもできるが、一旦アプリとして開いてみるか……

![IMG_0076.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/04a79285-5bde-4684-bd0a-bd9c06fcbcd0.png)

な！なんじゃこりゃーー！！！！
なんかなんか思ったんと違うーー！！！
えっ？なんで左側に3の倍数君おるん？？えっ？ナニコレ？？？


##### なんか見覚えある気がするアイコンとレイアウト

ってあれ？このアイコン…割と見かけることのあるやつだな…？

こいつ。
![IMG_0076.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/0e5eaadf-cb20-41b2-88b9-82a51ba3acb9.jpeg)

自動で配置される戻るボタン…
見覚えのあるアイコン…

あっ！もしかしてNavigationViewって、こういうやつ……なんてったらいいのか………

描いた。
![IMG_8348.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/485acd27-07ef-4fd1-8590-cfe8e3bb42b6.png)
こういうやつなんじゃないか？！そうだろ？！なぁ！！

とりあえず書き換えてみる！


### 書き換えプラン(脳内)
- 見出し系の`View`を新たに用意 
・これを`NavigationView`とする
・ここにページ遷移のための`NavigationLink`を配置
- カウンターぽい機能の`View`はそれぞれ独立した`View`にする

### 作ってみた。今日の仕上がり。

コードも書き出すけど、畳んでおきますね。

<details><summary>コードを表示</summary>

```swift:contentview
import SwiftUI

struct ContentView: View {
    @State private var count :Int = 0
    @State private var msg :String = "3の倍数やねん！！！！"
    @State private var displaymsg :String = ""
    var body: some View {
        NavigationView{
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                
                Text("Hello, world!")
                Spacer()
                NavigationLink(destination:Multiple7View()){
                    Text("7の倍数お知らせ君")
                        .padding()
                        .background(Color.gray)
                }
                NavigationLink(destination:Multiple3View()){
                    Text("3の倍数お知らせ君")
                        .padding()
                        .background(Color.gray)
                }
                Spacer()
                
                
            }
        }
    }
}


struct Multiple3View: View {
    @State private var count :Int = 0
    @State private var msg :String = "3の倍数やねん！！！！"
    @State private var displaymsg :String = ""
    var body: some View {
            VStack {
                Image(systemName: "globe")
                    .imageScale(.large)
                    .foregroundColor(.accentColor)
                
                Text("Hello, world!")
                Spacer()
                Text("3の倍数お知らせ君")
                Spacer()
                Text(displaymsg)
                Text(String(count))
                    .font(.largeTitle)
                Button("count") {
                    withAnimation{
                        count += 1
                        if(count % 3 == 0){
                            displaymsg = msg
                        }else {
                            displaymsg = ""
                        }
                    }
                }
                .buttonStyle(.bordered)
                .font(.title)
                Spacer()
                Button("reset"){
                    withAnimation{
                        count = 0
                        displaymsg = ""
                    }
                }
                .buttonStyle(.bordered)
                .font(.title2)
                Spacer()
                Spacer()
            }
        }
}

struct Multiple7View: View {
    @State private var count :Int = 0
    @State private var msg :String = "7の倍数やねん！！！！"
    @State private var displaymsg :String = ""
    var body: some View {
        VStack {
            Image(systemName: "globe.asia.australia")
                .imageScale(.large)
                .foregroundColor(.accentColor)
            
            Text("Hello, world!")
            Spacer()
            Text("7の倍数お知らせ君")
            Spacer()
            Text(displaymsg)
            Text(String(count))
                .font(.largeTitle)
            Button("count") {
                withAnimation{
                    count += 1
                    if(count % 7 == 0){
                        displaymsg = msg
                    }else {
                        displaymsg = ""
                    }
                }
            }
            .buttonStyle(.bordered)
            .font(.title)
            Spacer()
            Button("reset"){
                withAnimation{
                    count = 0
                    displaymsg = ""
                }
            }
            .buttonStyle(.bordered)
            .font(.title2)
            Spacer()
            Spacer()
        }
    }
}
```

</details>

![IMG_0079.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/20165149-953e-488d-9151-a616d329b9c6.png)


表紙っぽいページがプレビューに出た！よし、これで立ち上げてみる！

![IMG_0080.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/2f04e8a2-ada4-4a0f-86a9-5e02de0a5476.png)

ウッヒョーー！！！これこれこれこれぇ〜！！！！

### NavigationViewってこういうやつ…ってコト？！
あっなるほど！！！！！(言語化不可)(語彙貧弱)(すぐ描く)(コーナーで差をつけろ)

![IMG_8349.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/bd11e779-08e4-4ede-8fab-81cb27b4a0c3.png)

`NavigationView`ってこの型枠のことか！
たぶんそう！

厳密には違うかもしれん、どっちかってーとこういう感じか…？？(すぐ描く)
![IMG_8350.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/a0f11612-43ba-40b0-a69f-6094bc995e80.png)
こんな感じな気がする、ここは要確認だな

ていうか、
Navigationって名乗ってるやないか！！！自ら！！！！
そういうことか！！！細かい点はともかく、とりあえずswiftUI君はこれをナビゲーションって言うてるんや！！なるほど！！！

イメージしてたページ遷移とちょっと違う仕様のやつだったけどまぁよし。



## 今日のまとめ
- `NavigationView`の基本的な配置の仕方がわかった
- `NavigationView`ってメーラーとか、PC版のiMassageとか、メモ帳とか、エクスプローラーだとか、そういうやつでよくみるデザインの型枠(だと思われる。要確認)
- 細かいプロパティをつけなくても、画面サイズ(比率)によって挙動が変わるものがある
(これに助けられるときも、苦しめられる時もありそう…)


## 次のやりたいこと
- `NavigationView`ではないページ遷移(画面全部ガラッと変わる感じ)を実現する方法を知る
- 今日雑に配置した`NavigationLink`を、`NavigationView`に相応しいデザインにする(いまのところこっちが先に着手されそうかな)
- `NavigationView`の左右バランスを変更してみる(できるのか？)
iPadなどの`NavigationView`とリンク先の`View`が同時表示可能な場合を想定
選択された場合に詳細情報が右側に表示される…みたいな使い方もできたらおもしろそう
- 左側はメインの画面だけど、キャラクターをタップすると右側に詳細が出る…みたいな…
でもこれってNavigationには該当しなくない？ウォウウォw
 


## 今後参考にしていくもの(記事編集時点)

https://qiita.com/k-motoyan/items/6b5077d06efccb426344

いや、画面分割無効にできるんかーーい。
- 「遷移元の`View`」ととりあえず呼称していたものは、primaryと呼ぶのが正しそう
- 「遷移先の`View`」ととりあえず呼称していたものは、secondaryと呼ぶのが正しそう
- DoubleColumnナントカと、TripleColumnナントカがありそう


https://qiita.com/masayoshi0327/items/d4696f4f1e48a5e05137

そらをとぶの`NavigationView`の動画、Youtubeで NavigationViewって検索したら出てきたわ…見ましたわ。
'NavigationView'の中の'NavigationView'は避けようねって話とか、わかりやすいかも。
ネストとかそういう用語がパッと出てこないのはまだまだだな…


https://qiita.com/SNQ-2001/items/2fe23cd5fa8670d5c827

文中にも一度貼り付けたものだけど画面遷移の方法として3+1個紹介されてる
① `NavigationLink`
② `sheet`
③ `fullScreenCover`
④ `overlay`←カスタム遷移として

ていうかこの記事ちゃんと読んでなかったの、Qiitaの表示が悪いんだよな

![IMG_8345.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2201389/15e8b0c6-90af-4308-be37-7715fbbc8533.jpeg)

これ。これをみてタップして開いたのよ…
1つしか紹介されてないと思ってね！！！
序文に書いてあるやんか！！！ちゃんと読んで僕！！！