【作って学ぶSwiftアプリ開発入門】SwiftUIを使いこなしてミニアプリに遷移できるようにまとめよう！

ミニアプリを作って楽しく学ぶSwift入門 第8回

　Swiftは、Appleが開発したプログラミング言語でiPhoneやiPad、MacやApple Watch、最近ではApple Vision ProなどさまざまなApple製品向けのアプリ開発に使われています。この連載では、ミニアプリを作りながらSwiftでのアプリ開発を学んでいきます。第8回は、これまで作ってきたミニアプリをひとまとめにし、1つのアプリからそれぞれのミニアプリに遷移できるようにします。

はじめに

　前回は「福笑いゲーム」アプリを作成し、デバイス上でのドラッグ機能の追加方法を学びました。デバイスでできることが増えると、アプリ開発がどんどん楽しくなってきますよね？これまでに5つのミニアプリを作成し、多くの実装技術を身につけてきました。そして、いよいよ最終回です！

　今回は、これまで作ってきたミニアプリをひとまとめにし、1つのアプリからそれぞれのミニアプリに遷移して遊べる形へ仕上げていきます。この連載の最終回も、ぜひ楽しんで進めていきましょう！

開発環境

　この連載では、次の環境を使用しています。

• macOS Sequoia 15.1
• Xcode 16.1

プロジェクトを立ち上げる

　今回も前回と同じように作ったプロジェクトの中に新規ファイルを作成して進めていきます。それでは、Xcodeからプロジェクトを開いて、アプリ作りを進めていきましょう。

マイアプリリストを作る

ファイルを新規作成する

　これまで作成したアプリを集めたマイアプリリスト用のコードを記述するためのファイルを新規作成します。前回と同様に、新規ファイル作成手順でMyAppListView.swiftファイルを追加します。

　ファイル作成後、変数bodyのコードを以下のように書き換えてください。これまで作成したアプリのタイトル名を縦に並べています。

struct MyAppListView: View {
    var body: some View {
        VStack {
            Text("毎日いいことカウンター")
            Text("やるのかやらないのかコイントス")
            Text("愚っ痴る")
            Text("カップラーメンタイマー")
            Text("福笑いゲーム")
        }
    }
}

　最終的にナビゲーションエリアも含め、次のようになっていれば問題ありません。

　また、次のようなプレビューが表示されています。

縦型リストを作成するためにListを理解する

　Listは、SwiftUIが提供するスクロール可能な縦型リストを簡単に作成できるViewです。List を使うことで、設定画面を簡単に作成することができます。

　Listを使用することで、どう見た目が変化するのか確認するためにVStackをListに書き換えます。

struct MyAppListView: View {
    var body: some View {
        // ここを変更↓
        List {
            Text("毎日いいことカウンター")
            Text("やるのかやらないのかコイントス")
            Text("愚っ痴る")
            Text("カップラーメンタイマー")
            Text("福笑いゲーム")
        }
    }
}

　VStackの時は、ただTextが画面中央に並んでいるだけでしたが、Listを使用するとリスト化され、上揃えになりました。