What SwiftUI?

A quick introduction to SwiftUI

Transcript

1. What SwiftUI? offical
2. SwiftUIは、Appleが開発したユーザーインターフェース（UI）フレームワークで、 iOS、iPadOS、macOS、watchOS、tvOS、visionOSといったすべてのAppleプラッ トフォーム向けのアプリ開発をより効率的かつ直感的に行うことを目的としていま す。 リリース日 SwiftUIは、2019年6月3日に開催されたAppleの開発者会議「WWDC 2019」で発表 され、同年のiOS 13、macOS Catalina 10.15などから利用可能になりました。
3. 従来のUIフレームワーク（UIKit/AppKit）との違い SwiftUIが登場するまで、iOSアプリ開発ではUIKit、macOSアプリ開発ではAppKitというUIフレームワ ークが主流でした。これらの従来のフレームワークとSwiftUIの主な違いは以下の通りです。 宣言的UI（Declarative UI） vs 命令的UI（Imperative UI）: 従来のUIKit/AppKit（命令的UI）: UIの変更を「どうする」かを逐一指示するプログラミングスタイルです。例えば、「ボタンを作成し、 その位置を設定し、テキストを設定し、その後、タップされたらこの処理を実行する」といった具体的な手順を記述します。画面が複雑に なるにつれて、UIの更新処理があちこちに散らばり、コードが読みにくく、保守が難しくなる傾向がありました。 SwiftUI（宣言的UI）: UIの「最終的な見え方」や「状態の変化に応じた振る舞い」を宣言的に記述します。例えば、「このデータがこう いう状態なら、画面はこう表示されるべきだ」というように記述し、データの変更があった際にフレームワークが自動的にUIを更新しま す。これにより、コード量が大幅に削減され、UIの状態管理がシンプルになります。 コードとプレビューのリアルタイム同期: SwiftUIは、Xcodeのプレビュー機能と密接に連携しており、コードの変更がリアルタイムでプレビューに反映されます。これにより、ア プリを実行しなくてもUIの見た目をすぐに確認しながら開発を進めることができます。従来のフレームワークでは、Simulatorや実機でア プリを実行してUIを確認する必要がありました。 単一コードベースでのマルチプラットフォーム対応: SwiftUIは、iOS、macOS、watchOS、tvOS、visionOSなど、Appleの複数のプラットフォームで共通のコードベースを使用してUIを構 築できることを目指しています。これにより、各プラットフォーム向けに別々のUIコードを書く手間が軽減され、開発効率が向上します。 Storyboard/Interface Builderの代替: 従来のUIKitでは、UIのレイアウトにStoryboardやInterface Builderといったグラフィカルなツールが多用されていましたが、SwiftUI は基本的にSwiftコードでUIを記述します。これにより、XML形式で管理されていたStoryboardファイルでのコンフリクト（競合）の問 題が解消され、コードレビューやバージョン管理がしやすくなりました。 状態管理の組み込み: SwiftUIは、@State, @Binding, @ObservedObject, @EnvironmentObjectなどのプロパティラッパーを通じて、UIとデータの双方向 バインディングや状態管理の仕組みをフレームワークレベルで提供しています。これにより、UIの更新ロジックをシンプルに記述できま す。
4. 特 徴 S w i f t U I の 主 な 特 徴 は 以 下 の 通 り で す 。 1 . 宣 言 的 シ ン タ ッ ク ス : U I の 構 造 と 振 る 舞 い を 「 何 を ど う 表 示 す る か 」 と い う 形 で 簡 潔 に 記 述 で き ま す 。 こ れ に よ り 、 コ ー ド が 読 み や す く 、 メ ン テ ナ ン ス が 容 易 に な り ま す 。 2 . リ ア ル タ イ ム プ レ ビ ュ ー : Xc o d e の プ レ ビ ュ ー 機 能 に よ り 、 コ ー ド の 変 更 が 即 座 に U I に 反 映 さ れ る た め 、 開 発 効 率 が 飛 躍 的 に 向 上 し ま す 。 3 . ク ロ ス プ ラ ッ ト フ ォ ー ム 対 応 : i O S 、 m a c O S 、 w a t c h O S 、 t v O S 、 v i s i o n O S で 共 通 の A P I を 使 用 し て U I を 構 築 で き る た め 、 コ ー ド の 再 利 用 性 が 高 ま り ま す 。 4 . 自 動 レ イ ア ウ ト : U I 要 素 の 配 置 は 、 柔 軟 な レ イ ア ウ ト シ ス テ ム に 基 づ い て 自 動 的 に 行 わ れ る た め 、 さ ま ざ ま な デ バ イ ス サ イ ズ や 向 き に 対 応 し や す い で す 。 5 . ア ニ メ ー シ ョ ン の 容 易 さ : ア ニ メ ー シ ョ ン の 追 加 が 非 常 に 簡 単 で 、 わ ず か な コ ー ド で 滑 ら か な U I ア ニ メ ー シ ョ ン を 実 現 で き ま す 。 6 . 強 力 な デ ー タ バ イ ン デ ィ ン グ : @ S t a t e な ど の プ ロ パ テ ィ ラ ッ パ ー に よ り 、 デ ー タ の 変 更 が U I に 自 動 的 に 反 映 さ れ る 仕 組 み が 組 み 込 ま れ て お り 、 状 態 管 理 が シ ン プ ル に な り ま す 。 7 . ア ク セ シ ビ リ テ ィ の 組 み 込 み : デ フ ォ ル ト で ア ク セ シ ビ リ テ ィ （ 視 覚 障 が い 者 や 聴 覚 障 が い 者 な ど 向 け の 機 能 ） が 考 慮 さ れ て お り 、 少 な い 労 力 で ア ク セ シ ブ ル な ア プ リ を 作 成 で き ま す 。 8 . C o m b i n e フ レ ー ム ワ ー ク と の 統 合 : リ ア ク テ ィ ブ プ ロ グ ラ ミ ン グ の た め の C o m b i n e フ レ ー ム ワ ー ク と シ ー ム レ ス に 連 携 し 、 非 同 期 処 理 や イ ベ ン ト 駆 動 型 の プ ロ グ ラ ミ ン グ を 効 率 的 に 記 述 で き ま す 。 S w i f t U I は 、 A p p l e プ ラ ッ ト フ ォ ー ム で の ア プ リ 開 発 を 現 代 的 で 効 率 的 な も の に 変 え る た め の 強 力 な ツ ー ル と し て 、 注 目 を 集 め て い ま す 。
5. コードベースでUIを作る FontサイズやPaddingの余白の調整は class modifierという機能で行う。 Previewという機能を使用すると、ビル ドしなくも動作確認をすることが可能で す。
6. オブジェクトの配置方法 TextだったりImageの配置をするには、 Stackというものを使用します。 VStackが縦向き HStackが横む ZStackがオブジェクトを重ねる
7. Stateの管理 FlutterのsetStateみたいに、状態の管 理ができるものがある。 それが、@Stateなるものです。こんな 感じでカウンターアプリを作る。 状態変数を定義して、ボタンを押すと カウンターが増える仕組みになっており ます。 ボタンがタップされるたびに状態が更新 されカウントされていきます。
8. アニメーションのやり方
9. つづき
10. まとめ 宣言的UIに慣れている人であればキャッチアップはしやすい。 class modifierだとAndroidのJetpack Composeにもあるので、 概念は同じなので理解しやすい。 @Stateだと、ReactならuseState、FlutterならsetStateという にた状態を管理できる機能がある。
11. ご清聴ありがというございました