どうも、京都のスタートアップ企業にてiOSアプリを開発中のエンジニア、クウルス(@Qoo_Rus)です。
※2021年4月追記
弊社のメイン事業はWebサイト制作になっているため、iOSアプリ開発現場からはかなり遠ざかっています。ここで紹介しているSwiftUIの知見は2019年10月時点であることにご留意ください。
Xcode11が正式にリリースされてからしばらく経ち、従来よりコード量を少なく簡単にUI設計ができるSwiftUIの活用が様々な企業の開発現場で進んでいます。
これからiOSアプリ開発に取り組み始めたいと考えている方は、SwiftUIから取り組むと楽しみながら画面作りができるのでかなりオススメです。
今回はiPhoneアプリでよく見る画面遷移の作り方をご紹介します。

この記事では主に
- iOSアプリを開発したことがない
- その他プログラミングを経験したことのない
という初心者に向けての視点で書いていますので、ぜひお役立てください。
今回実装した環境は以下の通りです。
違う環境では異なった挙動を示す可能性があります。ご注意ください。
- macOS10.15 Catalina
- Xcode11.0
- Swift5
Contents
画面遷移の実装例
import SwiftUI
import Foundation
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: SecondView()) {
Text("画面遷移する")
}
}
}
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}

パーツを分解して解説していきます。
遷移元のViewと遷移先のViewを作る
struct ContentView: View {
var body: some View {
Text("画面遷移する")
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}
遷移元:「画面遷移する」というテキストを表示するView
遷移先:「画面遷移できました」というテキストを表示するView
の2つを用意しましょう。
struct ContentView: View {
var body: some View {
NavigationLink(destination: SecondView()) {
Text("画面遷移する")
}
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}
「画面遷移する」という文字をタップしたら画面遷移するようにしたいので
Text("画面遷移する")
の部分をNavigationLink
で囲みます。
また、遷移先の指定が必要なので引数を設定しましょう。
Navigation(destination: SecondView())
と入れることで、遷移先がSecondView
になります。
struct ContentView: View {
var body: some View {
VStack {
NavigationLink(destination: SecondView()) {
Text("画面遷移する")
}
}
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}
次にNavigationLinkで囲った要素をさらにVStackやHStackで囲みます。

VStackやHStackで囲みたい要素をCommandキーを押しながらクリックすると、上のように簡単にVStackやHStackを埋め込むことができます。
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: SecondView()) {
Text("画面遷移する")
}
}
}
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}
最後にVStackで囲んだ要素をまとめてさらにNavigationViewで囲って終了です。
これで先ほどの実装がめでたく出来上がります。
よくある失敗例
VStackやHStackなどをはさまない場合
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: SecondView()) {
Text("画面遷移する")
}
}
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}
もしVStackやHStackで囲むステップを飛ばした場合、ビルドエラーにはなりませんが、実行しても画面遷移が起こらなくなってしまいます。

少し複雑な実装の例
実践に進む足掛かりとして、複雑度を少し上げた実装例をご紹介します。
Viewを分割した場合
画面遷移のボタンを複数設置したいことはよくあります。
そういったボタンが増えてきたら、Viewを分割して対処することが多くなりがちです。
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
HogeView()
FugaView()
}
}
}
}
struct HogeView: View {
var body: some View {
NavigationLink(destination: HogeSecondView()) {
Text("ほげほげ")
}
}
}
struct FugaView: View {
var body: some View {
NavigationLink(destination: FugaSecondView()) {
Text("ふがふが")
}
}
}
struct HogeSecondView: View {
var body: some View {
Text("ほげほげ画面遷移できました")
}
}
struct FugaSecondView: View {
var body: some View {
Text("ふがふが画面遷移できました")
}
}

遷移元の画面にタイトルをつけて、戻るボタンをタイトル名に変えることも可能です。
struct ContentView: View {
var body: some View {
NavigationView {
VStack {
NavigationLink(destination: SecondView()) {
Text("画面遷移する")
}
}.navigationBarTitle("画面遷移元")
}
}
}
struct SecondView: View {
var body: some View {
Text("画面遷移できました")
}
}

SwiftUIならよくある画面遷移もラクラク
SwiftUIが導入されたXcode11からは、iOSネイティブアプリでよく見かける画面遷移機能を実装することはかなり簡単になりました。
今回の機能は、初心者でもXcodeをインストールしてすぐに試すことが可能です!
ぜひやってみてくださいね!