似たようなタイトルのブログを最近書いた気もしましますが、新年になってから本屋さんに行ったらSwiftUIの本が何冊も棚に並んでいて驚きました。読んでみるとSwiftUIはかなり実用になって来たことを知り、自分専用Todoアプリをリニューアルしたの最後の方にに書いたようにこのアプリのUIをSwiftUIに置き換えようと3連休に本を読みながらコードを書き勉強しました。
今回読んで本は、下の画像のSwiftUI 徹底入門です。この本はすでにSwift言語＋Storyborad(UIKit)でiOSアプリを開発している開発者向けの本で、SwiftUIの原理的な事や入門以上の内容も書かれた良書だとおもいます。iOS開発初心者向けではないので注意してください。
従来の画面レイアウト方法
私はiOS4(iPhone 3GS)くらいからiOS開発をするようになりました、初期の開発ツールXcodeではボタンなどを絶対座標で配置するイメージでした、ただし画面の大きさ変更に対応したサイズ・配置の変更する設定もあったと思います。
画面サイズの違うiPhoneが登場し、XcodeにはAutoLayoutが導入されました。UIの配置を他のUIや画面端からの距離で配置できます。画面サイズが異なるデバイスで細やかな配置ができますが、設定が複雑でベストプラクティスを取得するまで時間がかかる方式でした。
これが現在も主流です。また画面定義はStorybord(Interface Builder)でインタラクティブに行います。しかし画面情報はXMLファイルで保存されています、複数人で同時にStorybordを編集するとコンフリクトが起こりますが複雑なXMLファイルは人手ではマージ出来ないのでチーム開発では問題になりました。
SwiftUIのレイアウト方法
さてSwiftUIでは、SwiftのコードでUIを定義します。レイアウトはHTML(Web)のFlexboxに少し似ています。横に並べるHStack、縦に並べるVStack等で容易に画面の解像度によらないレイアウトができます。またSpaceやframe()を使い細やかな配置もできます。またUIを表すパーツはUILableがText()、UIButtonがButton()のようにUIKitと同じように用意されていてすぐに使えます。
そして、属性は Text("ラベル").foregroundColor(.blue) のように関数で指定します。
またXcode上でコードを使い書いたUIが画面で確認できます、これも便利です。
ナビゲーション
一覧画面・詳細画面のような画面遷移を行うには従来はNavigation Controllerを使いますが。これが案外面倒でした、とくに完成した画面に後から画面遷移を追加するのは面倒でした。
ところがSwiftUIでマスター画面をNavigationViewでくくり、繊維を起こすUIをNavigationLinkでくくります。これだけです！HTMLの<a href="..."> ... </a> のような手軽さです。
宣言的UI
SwiftUIもReact同様に宣言的UIです、UIの変更処理のコードで書く必要はありません。画面の状態はReactと同様にStateと呼ばれ @State var state1 = falseのように宣言します。また @Bindingを使うと複数の画面で状態を共有できます。
ReactやVueを知ってるプログラマーにはとても学びやすいUIです。
SwiftUIの欠点
このように、SwiftUIは素晴らしいUIです。しかし、まだ発展途上の部分がありStoryborad(UIKit)でできたた事が実現できない事が少しあります。たとえば現在は、まだWebView(WKWebView)はありません（しかし、SwiftUIにはUIKitを取り込む機能があるので何とかなります）。
自分専用TodoアプリのSwiftUI化も、SplitViewのささいな設定が上手く行かず頓挫しています・・・続きはこの問題が解決したら。
