Personal Factory

【WWDC20】Introduction to SwiftUI の雑メモ

佐藤 剛士 -

WWDC20のIntroduction to SwiftUIをみました。
雑にメモを残そうと思います。
https://developer.apple.com/wwdc20/10119

  • ライブラリーからdrop and dragでViewコンポーネントをeditorに入れられる
    • ライブラリーペインからcornerRadius modifierをキャンバスに落とす
    • コードに追加される
  • previewのresumeショートカット
    • ⌘+option+P
  • Extract Subviews

  • View実装が大きくなったとき使う。追加でViewのレイアウトを増やしたい。でもすでにたくさん実装していてコードが大きくなっている。

  • Extract Subviewsを使ってViewを新しい型に切り分けることができる

  • spacer、スペースが可能な領域までできるだけ広がる。

  • テキストを真ん中によせるために今回は使った。

  • Detail Viewを作る

プロパティを追加してもイニシャライザを書かなくていいの楽でいいよね。

  • fill, fitを動的に変えるようにしよう。
  • ここでSwiftUIについておさらい

SwiftUIの特徴の説明

  • SwiftUIはView Protocolに準拠した構造体。UIViewのように基底クラスを継承するクラスではない。つまりViewのプロパティも継承しない。スタック上に確保されて値で渡される。
  • SwiftUIはとても軽量。サブビューを抽出することで実行時のオーバーヘッドはほとんどない。SwiftUIのコードをリファクタリングするにはためらわなくてよい。どんどん分割してよい。小さいビューを組み合わせることで大きなViewを構築できる。
  • Zoomedという状態変数が変わると自動的にレンダリングする。SwiftUIはUIを定義するだけでなく、データの依存関係も定義するから。
  • SwiftUIは状態変数を持つViewをみると、Viewに変わってその変数のための永続的なストレージを割り当てる。
  • 状態変数が読み書きをSwiftUIは観測している。
  • 変数が変更されるとSwiftUIはbodyを再度取得し、新しい状態値を使ってレンダリングを更新。今度は異なるコンテンツモードでレンダリングを更新する。
  • 従来のUIフレームワークでは、状態変数と古いプロパティを区別していない。
  • しかしその区別は明らかに明確。
  • SwiftUIではScrollViewのオフセット、ボタンのハイライト、ナビゲーションスタックの内容など、UIが見つける可能性のあるあらゆる状態は「a source of truth」という権威あるデータから導き出される。状態変数とモデルをまとめてアプリ全体のa source of truthを構成する。
    • UIKitでは状態変数とUIViewのプロパティ２つ扱っていましたと。
    • でもSwiftUIでは状態変数は変更を監視できるので、扱うデータは一つですみよ。
  • contentModeは古いプロパティ
  • zoomedの状態変数はa source of truthです。
  • contentModeはそこから派生したもの。
  • フレームワークは、新しいボディを要求して新しい aspectRatio ビューをゼロから作成することでレンダリングをリフレッシュし、それによって contentMode とその他の保存されたプロパティをオーバーライドします。
  • これが、SwiftUIですべての派生値が最新の状態に保たれる仕組みです。
  • そして、すべての古いプロパティは読み込み専用の派生値であることを見てきました。この話では例を見るつもりはありませんが、SwiftUIは読み書きの派生値を渡すための "binding "と呼ばれるツールを発明しました。そして、技術的には、どんな定数でも読み取り専用の真実の完全なソースとして機能します。プレビューを動かしているテストデータはその例です。

Animation
a source of truthを変更するところにwithAnimationでくくるとズームされる

辛いサンドイッチには辛いバーを追加する。
タップしてズームしたときバーを隠したい。
transitionを使う。
.transition(.move(edge: .bottom))

dynamic font対応。
darkモード対応。

多言語対応もすぐにできる。

InfoPlist.strings
Localizable.strings
Lodaliaable.stringsdict
をプロジェクトに入れる

各ファイルLocaliza… のボタンをクリック

ここからアラビア語ファイルをインポートする

\.layoutDirectionを.rightToLeftにしてテキストが右から左にながれるようにする。
\.localeをarにしてプレビューでアラビア語が見えるようにする

プレビューは実機端末につなげることもできる。

感想

  • Extract Subviews、オーバーヘッドがほとんどないなら積極的に使っていこう。FatなViewは避けたいからコンポーネントごとに切り分けていくのがよい。
  • a source of truthの話は「今まではアプリのModel(今回はzoomedプロパティ）とViewのプロパティ（今回はContentsMode)の２つのデータを開発者は同期するように開発していた。同期は難しくてバグの温床になる。しかしモデルをa source of truthと見なし、モデルが変更されたら自動的に付随するプロパティ（今回はContentMode)を変更すれば一つだけしか管理しないのでバグが少なくなるという話。
  • SwiftUIとData Flowは去年も見たが改めて確認したい
  • 状態変数を更新するところでwithAnimationを使うの参考になる
  • transitionModifierはアニメーションと連動して、Viewを画面外に移動してくれる。移動したあとはView階層から削除してくれるらしい。
  • 多言語対応、サクサクできそうでよさそう。
  • Previewが端末で確認できるのも便利。いきなり特定の画面を表示できるのはデバッグがはかどる。

宣伝

インプレスR&D社より、「1人でアプリを作る人を支えるSwiftUI開発レシピ」発売中です。
「SwiftUIでアプリを作る！」をコンセプトにSwiftUI自体の解説とそれを組み合わせた豊富なサンプルアプリでどんな風にアプリ実装すればいいかが理解できる本となっています。
iOS 14対応、Widgetの作成も一章まるまるハンズオンで解説しています。
ぜひどうぞ。




https://nextpublishing.jp/book/12491.html