この記事は「ニフティグループ Advent Calendar 2022」 20日目の記事です。

---

はじめに

こんにちは。ニフティライフスタイルでモバイルアプリ開発を担当している5_21maimaiです。

WWDC2019でSwiftUIが発表されて早3年、SwiftUIで実現できるデザインも増え、実際にSwiftUIを採用しているアプリも増えてきました。

私の担当しているiOSアプリ「ニフティ不動産 賃貸版」にもSwiftUIを導入してみたいのですが、既存のアプリの画面をSwiftUIに置き換えることが可能なのか、SwiftUI初学者の私が実際に実装してみて検討しました。

目次

SwiftUIとは？

SwiftUIとは、AppleがWWDC2019で発表した新しいUIフレームワークです。

SwiftUIはシンプルなコードで宣言的にUIを書くことができ、実現したいUIを直感的に実装することができます。

struct SampleView: View {
    var body: some View {
        List(1 ..< 10) { _ in
            SampleCell()
        }
    }
}

上記は10個のセルをリスト上に並べるコードです。UIKitで UITableViewController を使って表示する場合はデリゲートメソッドを書く必要がありますが、SwiftUIはこれだけで表示ができてしまいます。

現在iOSアプリ「ニフティ不動産 賃貸版」のUI部分は基本的にxibファイルで作成しています。SwiftUIにすることで以下の2点が大きく改善されるのではないかと考えています。

• コードでUIを書くことができるため、xibファイルよりGitのソースコードレビューがしやすくなる
• SwiftUIはコードがシンプルな分、UIKitに比べると各パーツのスタイル調整がしやすくなる

SwiftUIで今のアプリのUIは作れるのか？

もちろん実際にSwiftUIを導入するためにはメリット・デメリットを挙げてよく検討し、設計の変更の検討をしたり、移行スケジュールを考えたりする必要があります。しかし、今回はまずSwiftUIで実現できるUIを確かめるためにiOSアプリ「ニフティ不動産 賃貸版」の画面をSwiftUIで作れるのかを試してみました。

前提として、私のSwiftUIの知識はApple 公式のチュートリアルを一通り学習した程度になります。

物件検索結果画面

各物件のカードを縦に1列で並べています。現在はUIKitの UICollectionView の UICollectionViewCompositionalLayout を利用してUIを作っています。

この画面をSwiftUIで実装してみるとこんな感じになりました。

各セルのUIのコードは省略しますが、List を使うことで縦方向のリストを作ることができます。

struct SearchResultListView: View {
    var body: some View {
        NavigationView {
            List(1 ..< 10) { _ in
                Section {
                    HorizontalSearchResultHomeCell()
                    PartnerCell()
                }
            }.navigationTitle("400件")
        }
    }
}

物件の一覧画面は同じカードを並べるだけなので List で問題ないですが、もう少し複雑なリストを作成する際は LazyVStack （iOS14以上で対応）と ScrollView を利用した方がカスタマイズが柔軟にできるようです。

新着タブトップ画面

こちらは、新着物件のセルは横スクロールで動き、新着登録した条件は縦スクロールで動かすことができます。こちらも現在はUIKitの UICollectionView の UICollectionViewCompositionalLayout を利用してUIを作っています。

この画面をSwiftUIで実装してみるとこんな感じになりました。

縦方向の ScrollView と LazyVStack 、横方向の ScrollView と LazyHStack を組み合わせることで縦と横のスクロールを作ることができました。

struct NewArrivalSummaryView: View {
    var body: some View {
        NavigationView {
            ScrollView(.vertical) {
                ForEach(0 ..< 5) { _ in
                    LazyVStack {
                        NewArrivalHeader()
                        ScrollView (.horizontal){
                            LazyHStack {
                                ForEach(0 ..< 5) { _ in
                                    NewArrivalSummaryHomeCell()
                                        .padding()
                                }
                            }
                        }
                    }.padding(.bottom, 20)
                }
            }.navigationTitle("新着お知らせ").navigationBarTitleDisplayMode(.inline)
        }
    }
}

地図検索タブトップ

地図で物件の検索ができる地図検索画面は、MapKit の MKMapView を使って地図を表示しています。ピンは MKAnnotationView を使ってカスタマイズをしています。物件のピンは多いので、広域表示にした場合はピンをクラスタリングしてまとめて1つのピンにして表示しています。

この画面をSwiftUIで実装してみるとこんな感じになりました。

地図の表示とピンの表示については Map とMapMarker で実装することができました。ただし、ピンのクラスタリングはSwiftUIでは難しく、既存アプリと同じくMapKitの MKMapView を使う必要がありそうです。

モーダル表示の検索条件画面

検索条件を検索結果を見ながら変更できる機能で、半モーダルで検索条件画面を表示しています。こちらはUIKitの標準のパーツでは実現できず、FloatingPanelというライブラリを利用しています。

こちらもSwiftUIで実装してみようと思いましたが、そもそもライブラリを利用していたものをSwiftUIのみを使って実現することはできませんでした。

UIKitに UISheetPresentationController というクラスが追加されましたが、iOS15以上でしか使えず、高さをカスタマイズすることも難しいため簡単に導入することはできなさそうです。

SwiftUIを使ってみた感想

今回SwiftUIで様々な画面を実装してみましたが、大まかな画面UIに関しては短い時間で、かつ少ないコードで作ることができました。

しかし、Appleの標準APIで実現できないようなUIや、複雑なレイアウトに関してはSwiftUIのみで表現するのは難しそうです。

iOSアプリ「ニフティ不動産 賃貸版」に関しては、設定画面などの単純なリスト画面から少しずつSwiftUIを導入していきたいと思います。

---

明日は @mito1296 さんです。お楽しみに！