Swift UIを試してみた！ #SwiftUI

初めまして、
ディップでサーバー側のエンジニアとしてgo言語とか書いてます大屋です。

随分前になりますがSwiftUIが出てきて全然試せてなかったのでQiitaにまとめていこうと思います。

Swift UIとは...

そもそも、SwiftUIですがなんなのかと言いますとiOSアプリ開発における新しいUIフレームワークです。これまでiOSアプリのUIを作る場合、StoryboardにUIパーツを配置し、Auto Layoutで制約をつけたりと慣れれば楽しいのですがStoryboardとViewControllerを行ったり来たりしたり割と辛い部分もありました。

中には全てコードベースでViewを実装する人もいますが、FatViewController(節子問題)になってしまったり、冗長的で分かりにくい実装になってしまいます。そこで、iOSアプリのUI構築をコードベースで完結に記述できる新しいフレームワークとして登場したのがSwiftUIです。

Androidアプリ開発でもJetpack Composeが出てきていたり、Flutterでのクロスプラットフォーム開発であったり、アプリ開発でのViewの部分をコードで書けるUIフレームワークが最近増えてきています。まだまだ商用サービスへの実戦投入は数年後になると思いますがやっていきます。

検証環境

まずはSwiftUIを使っていく上での環境構築をしてきます。

MacOSX Catalina
Xcode 11.2.1

Xcodeがインストールできたらサンプルプロジェクトを作成します。
プロジェクト名とかはよしなに好きなものを設定で大丈夫ですが、UIフレームワークを選ぶところだけSwiftUIを選んでください。

サンプルプロジェクトが作成できたらビルドします。
いつものHello, World!が画面中央に表示されていればビルド成功です。

きになるコードはこんな感じです。
構造体が二つ定義されていますが、片方の構造体はプレビュー用のものなので実質アプリのUIを記述しているコードは5行だけ！Storyboardと比べるとめちゃくちゃ楽なのがわかります。

ContentView.swift

import SwiftUI

// ↓UIを構築しているコード
struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

// ↓プレビュー用のコード
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

まとめ

SwiftUIはサンプルコード動かしただけですがアプリのUI構築をコードベースで完結にできるのが分かった。商用での利用はまだまだ先になるけど、今後は個人開発にも活かしていきたいのでSwiftUIもっと試していこうと思います。

↓ SwiftUIの公式チュートリアルが結構おすすめらしい。
https://developer.apple.com/tutorials/swiftui