SwiftUIメインの開発者がUIKitの画面を実装するときに役立った3つの工夫

Transcript

1. © 2025 Wantedly, Inc. SwiftUIメインの開発者がUIKitの画面を実 装するときに役立った3つの工夫 Mobile勉強会 #21 ウォンテッドリー × チームラボ × Sansan Jul.24 2025 - Yuya Harada
2. 名前 Wantedly 入社 ポジション 趣味 性格診断 : 原田 祐也 : 2024年 7月 : iOS エンジニア : バドミントン : モチベーター
3. © 2025 Wantedly, Inc. • 対象 ◦ SwiftUI 中心に開発していて、UIKitに久しぶりに触れる 方 ◦ Swiftを学び始めた 方（SwiftUIから入った方） • 背景 ◦ 普段はSwiftUIの実装メイン 、久しぶりに本格的に UIKit に触れる 機会があった ◦ 担当した施策ではスピードが求められて おり、不安があった 本日話すこと 工夫次第で効率を上げることができ、UIKit実装にも対応できる
4. © 2025 Wantedly, Inc. CONTENTS 01 SwiftUI と UIKit の違い 02 工夫①：Previewマクロで UI を即時確認できるようにする 03 工夫②：UIの制約の付け方は最小限を覚えて使う 04 工夫③：RxSwiftは「やりたいことベース」で学習する 05 まとめ
5. © 2025 Wantedly, Inc. SwiftUI と UIKit の違い 01
6. © 2025 Wantedly, Inc. SwiftUI と UIKit の違い • 宣言的 UI ◦ UI の最終状態を宣言 する ◦ 状態に応じた UI が表示される ◦ • UI の組み方 ◦ VStack や .padding() などを使 用する SwiftUI • 命令的 UI ◦ 自分で状態に応じて UIを更新する ◦ 状態が変わるたびに 「何を」 「どう変えるか」 を命令する必要がある • UI の組み方 ◦ UIStackView や NSLayoutConstraint などを用いてUIの作成 & 制約をつける • リアクティブプログラミング ◦ Combine や RxSwift を使うと、 状態変化を購読して UIの更新が可能 UIKit
7. © 2025 Wantedly, Inc. 例) テキストとボタンを表示する SwiftUI UIKit
8. © 2025 Wantedly, Inc. 工夫①：Previewマクロで UI を即時確認できるようにする 02
9. © 2025 Wantedly, Inc. • 課題 ◦ ビルド → シミュレータ起動 → 画面遷移でUIの確認が 面倒で時間のかかるプロセス • 工夫 ◦ Previewマクロで状態ごとのUI を直接確認できるようにする • ポイント ◦ SwiftUIに近い体験でUIの開発が 可能になった 工夫① Previewマクロで UI を即時確認できるようにする https://developer.apple.com/documentation/uikit/preview(_:traits:body:)-c7kr
10. © 2025 Wantedly, Inc. UI実装のイメージ UIを更新するメソッド 状態に応じたプレビューを⽤意
11. © 2025 Wantedly, Inc. 工夫②：UIの制約の付け方は最小限を覚えて使う 03
12. © 2025 Wantedly, Inc. • 課題 ◦ 制約の付け方は自分がやったことないやり方だったため キャッチアップが必要だった ◦ NSLayoutAnchor を使った実装しか知らなかった • 工夫 ◦ プロジェクトで使っていた SnapKit を必要な部分だけ調べて書いた • ポイント ◦ 「全部理解する」より、「必要な箇所を調べながら学ぶ」ことで、 そこまで時間をかけずに開発した 工夫② UIの制約の付け方は最小限を覚えて使う
13. © 2025 Wantedly, Inc. SnapKit の実装イメージ • まずは基本的な構文を理解する ◦ inset ◦ equalToSuperview ◦ equalTo • NSLayoutAnchor での書き方を SnapKitでどう実装するか調べる ◦ 必要に応じて対応 行ったこと
14. © 2025 Wantedly, Inc. 工夫③：RxSwiftは「やりたいことベース」で学習する 04
15. © 2025 Wantedly, Inc. • 課題 ◦ (恥ずかしながら...😓) Rxがそもそも初めてだった ◦ オペレーターなどは無知の状態からスタート • 工夫 ◦ 簡単な記事を読み、内容を簡単にドキュメントにまとめた ◦ 実装で必要な機能を最低限理解した ◦ AIを活用し、オペレーターのより良い書き方を模索した • ポイント ◦ 目的に沿った学びで最短で業務に活かせた 工夫③ RxSwiftは「やりたいことベース」で学習する
16. © 2025 Wantedly, Inc. 基本のオペレーターのイメージ • filter ◦ 条件に合う値だけ通す ◦ 例) x > 10 • distinctUntilChanged ◦ 値が変わったときだけ通知する
17. © 2025 Wantedly, Inc. 読んで理解を深めることができた記事 • RxSwiftが訳わからんすぎる。 ◦ ストリームの処理がベルトコンベアと作業員で例えられており、イメージしやすい ◦ RxSwiftの雰囲気を掴むことができる • Introduction to RxSwift ◦ RxSwiftの概要が書かれた記事 ◦ 基本概念のオブザーバブルやオペレーターが丁寧に解説されている
18. © 2025 Wantedly, Inc. まとめ 05
19. © 2025 Wantedly, Inc. • 工夫①：Previewマクロで UI を即時確認できるようにする • 工夫②：UIの制約の付け方は最小限を覚えて使う • 工夫③：RxSwiftは「やりたいことベース」で学習する まとめ 工夫次第で効率を上げることができ、UIKit実装にも対応できる 今後同じような場面に遭遇した際は ぜひ参考にしてみてください！
20. © 2025 Wantedly, Inc. ご清聴 ありがとうございました😊 : @yuya_h_x : @yuya-h-29 X GitHub