【SwiftUI】SwiftUIとは？プロジェクトの作り方まで紹介（超初心者向け）

SwiftUIとは

SwiftUIはSwiftで全てのAppleプラットフォーム（iPhone、iPad、Mac、Apple Watch...)向けのUI（ユーザインターフェース）をシンプルに構築するためのApple純正のフレームワークです。

Xcode - SwiftUI - Apple Developer

2019年6月にAppleがSwiftUIフレームワークを発表し、2019年9月にSwiftUIフレームワークを含むiOS13が一般公開されました。

SwiftUIのメリット

• 宣言型シンタックスによりとてもシンプルに記述できる
• Xcodeのプレビューで確認できるのでUIの確認にシミュレーターや実機が不要
• Storyboardと比較して実装のしやすさと共に可読性も格段に向上（マージしんどかった...TT）

また、下記機能に自動的に対応してくれます。

• Dynamic Type（端末側のデフォルトの文字サイズ）
• ダークモード
• ローカリゼーション
• アクセシビリティ

プレビュー機能について

SwiftUIでは簡単にUIを構築できる点が魅力的なのはもちろんだが、

個人的にはプレビュー機能が特に気に入っています！

コードに変更を加えると、即座に再コンパイルされ、プレビューに反映されます！

（これで開発も捗る！）

プレビューから編集

ちなみにこんな感じでプレビューからUIを編集することも可能です。

プレビューから編集した場合もコードが更新されます。

（cmd + Clickで起動)

Embed in VStackを選択すると、該当Viewのコードは以下のように変化します

(具体的な記法については後日書きます）

before

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

after

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

めっちゃ便利！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

新規プロジェクト作成方法

ここまでSwiftUIについてざっくり説明したので、プロジェクトの作成方法についてを紹介します！

まずはXcodeを起動し、Create new Xcode Projectを選択し、プロジェクト作成画面を立ち上げます。

次に以下のように設定します。

• Interface->SwiftUI
• LifeCycle->SwiftUI App
• Language -> Swift

※Product NameやOrganization Identifierはそれぞれ入力してください

これでSwiftUIが導入されたプロジェクトを作成できました！

プレビューを起動してみる

SwiftUIのViewを実装したファイルをプロジェクトナビゲーターで選択すると、プレビューウインドウが表示されます プレビューを起動するには以下のResumeボタンを押します

すると先ほどのようにHello, world!と出力されます

もし、プレビューウインドウが表示されない場合

以下のボタンをクリックします。

Canvasを選択します。

すると、プレビューが起動します。

参考になったという方や、ここ間違っているよ！という方は

ぜひコメントしていただけると嬉しいです！！！！

SwiftUIを一から極めたいという人は本を買ってみるといいかも！

※SwiftUIを本気でやろうとしていない人にはお勧めしません。

参考

Xcode - SwiftUI - Apple Developer

iOSのDynamic Typeについて - Qiita