先日 iPhone 13, iPad mini 等が発表されましたね!私は手元の iPhone がまだ現役なので購入の予定はないのですが、Apple Store で見られるのが楽しみです...! 新型 MacBook Pro の発表もそろそろとの噂でそちらも気になっている今日この頃です。
はじめに
iOS チームでは SwiftUI.View の実装経験が浅いこともあり、実装者によって書き方や、View の粒度がまちまちで、コードが肥大化したり、メンテナンスしづらくなる課題がありました。
その為、Swift のコーディングガイドとは別に SwiftUI.View
のコーディングガイドラインを作成しています。
本記事では、このコーディングガイドがどのようなものかをご紹介します。
それでは早速みていきましょう!
Screen サフィックス
View の命名規則です。View の命名は通常 ~View
とサフィックスに View
を用いると思います。UIKit では ViewController
が最上位の画面となるのが一目でわかるのですが、SwiftUI の場合、全ての View が View サフィックスで命名されていると、それが画面中のコンポーネントなのか最上位の画面なのかが見分けにくくなり、デバッグや改修がしづらいと感じていました。そこで、最上位の画面となる View は ~Screen
とサフィックスに Screen
を用いることにしています。
これにより最上位画面の検索性が向上しましたし、Xcode のファイル一覧からもぱっと見で判断がつきやすくなりました。
body の書き方を統一する
上記の Screen
の body
に関しては書き方を下記のように統一しています。
var body: some View { ZStack { navigationLink contentView error loading } }
body
の中は ZStack
からはじまり、navigationLink
, contentView
, error
, loading
の順番に配置します。
それぞれの役割は下記の通りです。
- navigationLink (navigationLink についてはこちらの記事に詳しく書かれているので気になった方はぜひ読んでみてください🙏)
- 画面遷移が発生する場合はリンクを設置
- contentView
- Screen の表示するコンテンツ
- error
- ユーザーに表示するエラーメッセージ
- loading
- API 通信中にユーザーに表示するローディングアニメーション
さらに、 contentView
は下記のように名前のついた View を配置します。VStack
や ScrollView
等をそのまま書くとネストが深くなり何を表示しているのかが分かりにくくなりがちなので、名前のついた View を配置するようにしています。
var contentView: some View { VStack { header cardList FooterView() } }
このように body の書き方を統一することで View の見通しが良くなります。
Modifier は影響する範囲に対して指定する
onReceive()
onOpenURL()
modifier は影響する範囲に対して指定します。
var body: some View { ZStack { } .onReceive { ... } }
View のプロパティとメソッドは引数の有無で使い分ける
private var cardList: some View { ... } private func alert(from type: Type) -> Alert { ... }
レイアウト関連
- レイアウトに関する modifier (
padding
spacer
frame
) は柔軟性を持たせるために、できるだけ上位の View から指定する - 等間隔に配置する View は
ContainerView
(VStack, HStack 等)のspacing
を使う - 等間隔でない View の配置は
ContainerView
(VStack, HStack 等)のspacing
に.zero
を指定し、個々の View のpadding
を指定する
まとめ
本記事では、SwiftUI.View
のコーディングガイドを紹介させていただきました。これらのガイドはチーム内で模索・議論しながら作成しているものなので、開発者同士の目線合わせにも役立ちました。皆さんはどのような工夫をしていますか?ぜひ教えてください🙏
採用のお知らせ
Quipper ではスタディサプリの開発に関わる iOS エンジニア および シニア iOS エンジニア を積極的に募集しています。
カジュアル面談も行っているので、ぜひお気軽にご連絡ください!