SwiftUIで画面遷移を行うときに便利なのが .fullScreenCover モディファイアです。
特に、モーダルとして「画面全体を覆うように表示する」UIを実現したいときに使います。
この記事では .fullScreenCover の使い方、主要な引数の意味、活用時の注意点までわかりやすく解説していきます。
.fullScreenCover とは？
.fullScreenCover は、SwiftUIで全画面表示のモーダル画面を表示するときに使うビュー修飾子（modifier）です。
通常の .sheet() と似ていますが、.sheet() は下からスライドして半画面（iPhoneの場合）で表示されるのに対し、.fullScreenCover は画面全体を覆う新しいビューを表示します。
| デバイス | .sheet()の表示 |
.fullScreenCover()の表示 |
|---|---|---|
| iPhone | 下から出現（背景が見える） | 画面全体を覆う |
| iPad | フローティング（中央に小さく表示） | 画面全体を覆う |
例えば、ログイン画面、タイマーの集中モード、初回チュートリアル画面、集中して使ってもらいたい作業画面など「他のUIを隠して一画面だけ見せたい」ときにぴったりです。
具体例：ボタンを押すと全画面モーダルを表示
ボタンを押すと薄い赤色の背景の全画面モーダルが表示される具体例で見ていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
import SwiftUI struct ContentView: View { @State private var isFullScreenPresented = false var body: some View { VStack { Text("メイン画面") .font(.title) Button("全画面モーダルを表示") { isFullScreenPresented = true } } .fullScreenCover(isPresented: $isFullScreenPresented) { FullScreenModalView() } } } struct FullScreenModalView: View { @Environment(\.dismiss) var dismiss var body: some View { ZStack{ Color.red.opacity(0.2) .ignoresSafeArea() VStack { Text("全画面モーダル") .font(.largeTitle) Button("閉じる") { dismiss() } } } } } |
このコードでは、isFullScreenPresented が true になると薄い赤色背景の FullScreenModalView が画面いっぱいに表示されます。
「全画面モーダルを表示」をタップすると、薄い赤色背景のモーダルが画面全体を覆っていることがお分かりいただけると思います。
モーダル側からは @Environment(\.dismiss)(今回の場合は「閉じる」ボタン） を使って元の画面に戻ることができます。
これが .fullScreenCover の基本的な動きです。
itemを使う応用パターン
.fullScreenCover には、isPresented を使う基本形のほかに、Optionalなデータをバインディングして使える item: 形式 があります。
これはより柔軟で安全に使えるパターンで、実務でもよく使われます。
|
1 2 3 |
.fullScreenCover(item: $selectedItem) { item in DetailView(item: item) } |
この形式では、selectedItem が nil でなければ DetailView が全画面モーダルとして表示されます。
そして、selectedItem が nil に戻ると自動で閉じられます。
この形式のメリット
| メリット | 内容 |
|---|---|
| 型安全 | item が Identifiable 準拠で型チェックされるので、安全にデータを渡せる |
| 状態と表示の同期 | selectedItem が nil なら非表示、値があれば表示されるため、ロジックが明快 |
| モーダル閉鎖の自動化 | 閉じる際に selectedItem = nil とするだけで閉じられる（dismiss() 不要な場合も） |
| データ渡しが簡単 | モーダル側に item を直接渡せるので、Bindingや環境変数の受け渡しが不要になる |
主要な引数とその意味
.fullScreenCover を正しく使うには、渡す引数の意味を理解することが大切です。
| 引数 | 型 | 説明 |
|---|---|---|
isPresented |
Binding<Bool> |
表示状態をバインディングで管理（trueで表示） |
item |
Binding<Identifiable?> |
Optionalなデータがある時に表示される。nilで閉じる |
onDismiss |
(() -> Void)? |
モーダルが閉じられたときに呼ばれる処理（省略可） |
content |
() -> some View または (T) -> some View |
表示されるビューの中身 |
.fullScreenCover を呼び出すときは、少なくとも isPresented と content を指定する必要があります。
|
1 2 3 4 |
.fullScreenCover(isPresented: $isPresented) { 表示するView() } |
また、モーダルを閉じた後に特定の処理を行いたい場合は、onDismiss を追加で指定できます。
|
1 2 3 4 5 6 |
.fullScreenCover(isPresented: $isPresented, onDismiss: { // 閉じた後の処理 }) { 表示するView() } |
.fullScreenCover の活用シーン
.fullScreenCover は次のようなシーンで活躍します。
- ログイン画面を初回起動時に強制表示したいとき
- ユーザーに集中して入力してもらいたいフォーム画面
- チュートリアルやイントロ画面など他のUIを一時的に隠したいとき
- ミニゲームやAR画面など、1つの画面に集中してもらいたい機能
通常の .sheet では背景が見えてしまうため、「バックグラウンドを見せずに全画面で表示したい！」という時は .fullScreenCover が適しています。
.fullScreenCover を使うときの注意点
便利な .fullScreenCover にもいくつか注意点があります。
| 注意点 | 内容 |
|---|---|
| NavigationStackとの分離 | .fullScreenCover で表示されるビューは、呼び出し元とナビゲーションを共有しません。個別に NavigationStack を設定しましょう。 |
| 状態管理に注意 | @State の切り替えで表示・非表示を管理するため、複雑な条件では意図しない挙動になることもあります。 |
| スワイプでは閉じられない | sheet()` とは異なり、.fullScreenCoverはユーザーが画面を下にスワイプしても閉じることができません |
| 表示中のビューで dismiss を忘れずに | モーダル画面内に「閉じる」ボタンがないと戻れません。 必ず dismiss() を用意しましょう。 |
まとめ
今回は SwiftUI の .fullScreenCover について解説しました。
.fullScreenCoverは画面全体を覆うモーダルビューを表示する修飾子isPresentedで表示状態を管理し、表示内容はクロージャで指定- ログイン画面やチュートリアルなど、集中して表示したい場面で活躍
dismiss()を使って閉じる処理を実装- ナビゲーションや状態管理には注意が必要
「どうしても全画面で見せたい」「バックグラウンドが見えてほしくない」など、ユーザーに集中してもらいたい体験を提供したい場面で .fullScreenCover はとても有効です。
ぜひ、ログイン画面やチュートリアル、入力フォームなどに活用してみてくださいね！
