dasukoの技術ブログ

現役エンジニアのブログです。

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

SwiftUIとは

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

Xcode - SwiftUI - Apple Developer

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

SwiftUIのメリット

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

 

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

プレビュー機能について

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

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

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

(これで開発も捗る!)

f:id:dasuko:20210216213222p:plain

プレビューから編集

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

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

(cmd + Clickで起動)

f:id:dasuko:20210216215754p:plain

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

f:id:dasuko:20210216213501p:plain

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

   

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

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

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

f:id:dasuko:20210216214027p:plain

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

f:id:dasuko:20210216213222p:plain

 

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

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

f:id:dasuko:20210216214428p:plain

Canvasを選択します。

f:id:dasuko:20210216214512p:plain

 

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

f:id:dasuko:20210216213222p:plain

 

 

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

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

 

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

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

 

 

参考

Xcode - SwiftUI - Apple Developer

iOSのDynamic Typeについて - Qiita