【1-2】初めてのSwiftUIプロジェクト作成ガイド

前回の記事では「SwiftUIって何が違うんだ？」という思想的な部分を中心に語ってみました。「分かったような、分からないような…まぁとりあず触ってみないことには始まらないよね」と思っている方も多いと思います。

今回は、実際にXcodeで新しいSwiftUIプロジェクトを作って、基本のファイル構成やプレビューの見方をざっくり掴んでいきましょう。

Xcodeでの新規プロジェクト作成

まず、Xcodeを起動します（記事執筆時点であればXcodeのバージョンは14や15あたりを使っている方が多いでしょう）。

File > New > Project…を選ぶと、アプリテンプレートを選ぶ画面が出てきます。ここで「iOS App」を選んで、次へ。プロジェクト名は適当で構いません（MyFirstSwiftUIAppみたいにしておくと後で分かりやすいかも）。

このとき、テンプレートオプションとしてInterfaceにSwiftUI、Life CycleにSwiftUI Appを選べるはずです。もしもうXcodeが勝手にSwiftUIになっていれば特にいじらなくてもOK。

この設定によって、Appプロトコルを使った新しいエントリーポイント、そしてContentViewと呼ばれるSwiftUIの初期画面用ファイルが自動生成されます。

UIKit時代はAppDelegateやStoryboardがデフォルトで付いてきたのを思い出すと、この辺もうすでに「おぉ、全然違うじゃん」と感じるかもしれません。

プロジェクト構造を見てみる

新規プロジェクトができたら、左側のプロジェクトナビゲータに注目。MyFirstSwiftUIApp.swift（プロジェクト名に応じて名前は変わる）というファイルがあり、これがアプリのエントリーポイントになっています。

中を覗くと、こんな感じのコードがあるはずです（Xcodeのバージョンで多少違うかもですが、概ね似たような構成）：

import SwiftUI

@main
struct MyFirstSwiftUIApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

@mainアノテーション付きのApp準拠の構造体が「このアプリはこうやって起動するんだよ」という入り口を表していて、その中でWindowGroupにContentView()を割り当てることで、メイン画面を設定しています。

次にContentView.swiftを見てみましょう。ここに最初のSwiftUIビューが定義されています。

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

これがSwiftUIの基本的な構造です。struct ContentView: Viewという宣言で、Viewプロトコルに準拠したビューを定義しています。

Preview機能で即座に画面確認

次に右ペイン、あるいはEditorメニューからCanvasを表示して、プレビューを有効にしてみましょう。

Xcodeの右側にHello, world!と表示されたiPhoneっぽい画面が出てきたら成功。

ここで、「あれ、ちょっと文言を変えてみたいな」と"Hello, world!"を"Hello, SwiftUI!"に書き換えてみましょう。

するとプレビューが自動的に更新され、Hello, SwiftUI!と表示されるはず。

Modifierをちょっと足してみる

プレビューのすごさを実感するには、ちょっとした変更を加えてみるのが一番。例えばText("Hello, SwiftUI!")の後ろに.font(.largeTitle)と書き足してみてください。

Text("Hello, SwiftUI!")
    .font(.largeTitle)
    .padding()

すぐにプレビューが更新されて、テキストが大きなフォントで表示されるでしょう。

次の記事への展望

まだこの時点では、ほんの入り口です。ContentViewがある程度分かったところで、これから他の基本コンポーネント（Text、Image、Button）を見てみたり、レイアウトの基本（VStack、HStack、ZStack）を学んだりしていく予定です。

「おっ、なんかいい感じじゃん？」と思えてきたら、もうSwiftUIの世界に一歩足を踏み入れたも同然。その一歩一歩が、従来のUIKit開発とは違う感覚でアプリを作る新鮮な体験につながっていくはずです。