この記事は Retty Part1 Advent Calendar 2021 の8日目の記事です。
はじめに
Rettyアプリチームでエンジニアをしている髙橋です。
アプリエンジニアとして今年度2021年の4月に新卒で入社し、半年間Webチームで修行をしていました。10月にアプリチームに配属となりはや2ヶ月が経ちました。
Webチームでの修行とチーム開発については、自分の新卒振り返り記事を是非ご覧ください。
RettyのアプリはiOS / AndroidともにRettyアプリチーム7名（内定者インターン2名含む）で開発をしています。 2011年に初リリースされたiOSアプリは、2017年にSwiftへの移行も含めたリニューアルが行われ、現在もコツコツと開発が進んでいます。 今年の3月ごろに初めてSwiftUIが導入されました
SwiftUIの導入が始まってから9ヶ月ほど経ちましたが、新規開発には積極的に使われているのでその実例をご紹介したいと思います。
RettyアプリでのSwiftUI導入実例
SwiftUI導入前はReactNativeが部分的に利用されていたので、その部分の置き換えとしてSwiftUIの導入が試験的に行われました。 検索結果画面や店舗詳細画面など、Rettyアプリ内の重要な画面にも積極的にSwiftUIを利用しています。
SwiftUIの導入はほとんどがUIViewController + UIHostingController の構成になっていて、画面の一部からSwiftUIを適用していく形になっています。SwiftUIに置き換えること自体が目的ではないので、UIViewRepresentableが利用されている箇所は少ししかありません。また、画面遷移は基本的にUIViewController系統のものを利用していて、SwiftUIのNavigationLinkは使っていません。
検索画面に利用
検索結果画面では、結果を表示するリストからSwiftUIで実装しています。UITableView はこの箇所では使用されていません。
店舗詳細ページ：TableViewCellの一部に適用
店舗詳細ページなどは、少しずつ施策開発や機能修正をするなかでSwiftUIへの置き換えを進めています。大元の UITableView はそのままでUITableViewCell に UIHostingController を持たせて、セルのコンテンツはSwiftUIのViewで表示するという手法を取っています。
先日店舗詳細ページに関わる施策があり、店舗詳細画面の一部がSwiftUIで実装されました。
下画像の、赤枠で囲まれている部分がSwiftUIで実装されています。
Rettyの店舗詳細ページでは、表出が切り替わる情報を数多く扱っています。SwiftUIでは、こうした情報の表示に関する事柄を直感的に記述できるので、開発やレビューの負担が軽く感じられました。
また、新たな「〇〇好き人気店ラベル」を実装する際は、以下の様なプレビューを簡単に作成できるので、開発のコミュニケーションがとても取りやすかったと思います。先に検索結果画面がSwiftUIで作られていたこともあり、この新しい人気店ラベルを検索結果画面に表示するというのもとてもスムーズに行えました。
画面ほとんどがSwiftUIでできている場合
画面のレイアウト自体がほとんど固定のものは、ほとんどがSwiftUIのViewで実装されていることもあります。例えば、ログイン画面などです。 こういった画面の新規実装は、SwiftUIの試し所として最適だと思います。
SwiftUI導入のコミュニケーション
Rettyの開発はWeb・アプリ共に、LeSSというスクラムフレームワークの上で動いています。なので、こうした技術的な挑戦も普段の施策開発の中でうまく取り入れていくことになります。
プランニングで確認
リファインメントやプランニングを行う時、「SwiftUIで実装するので問題ないか」という話題が少なからず出てきます。
「SwiftUIでの実装を前提に進めていくので、予期していない事柄で遅れやすくなる」という認識を周りの方と合わせていく事が大切になるかと思います。
レビューやペアプロの活用
最初のSwiftUI導入時はPRレビューを通して、RettyアプリにSwiftUIを持ち込むとどういった雰囲気になるのか、問題ないかを確認するような動きがありました。また、SwiftUIの方が単純明快なので、オンラインで画面を共有しながらのペアプロなどにも向いていると感じました。開発を進める中で技術のキャッチアップをしていくことも十分にできると思います。
SwiftUI導入での辛み
SwiftUIの導入は基本的には喜ばしいことなのですが、この短い期間でもいくつかの辛いこともありました。 Rettyアプリ開発で直面した、iOS13とiOS14 のOS間の仕様差の辛みは、こちらの記事でまとめられています。気になる方は是非ご覧ください。
個人的に一番苦労したのは、上記の様な問題が起こった際に
- SwiftUIの不具合によるものなのか
- 既存の何かしらが寄与しているものなのか
を切り分けることです。店舗詳細画面など複雑な画面では、「本当にこのままSwiftUIを部分導入してしまって大丈夫なのか」という確証を簡単には得られない時もありました。
特に知見が溜まっていなかったり、人数が少ないチームだと、想定していた挙動と違うものが表示されてきてしまった際の対応は難しく、短期的にデリバリーが遅くなってしまうことは起こり得ると思います。
実装面ではUITableViewCellと self-sizingが必要なSwiftUIのView を載せたUIHostingControllerの組み合わせで、サイズが想定通りに確定しない不具合が発生することが多くとてもハマりやすかったです。
AndroidでもJetpackComposeを利用
余談ですが、Androidアプリの開発でも、新規部分ではJetpackComposeを利用した開発が進んでいます。こちらはSwiftUIより安定していることもあり、新規開発では基本的に利用されています。
Rettyアプリのこれから
RettyアプリチームではUserHappyを追い求めて、Rettyアプリを通してより良い食体験を作り出す事はできないかと日々開発しています。
そのためにも新しい技術を導入してより早く、より楽しいアプリを作っていきたいと考えています。
カジュアル面談も行っているので、興味のある方はお気軽にご覧ください！！
