スタディサプリ Product Team Blog

株式会社リクルートが開発するスタディサプリのプロダクトチームのブログです

SwiftUI コーディングガイドのすすめ

こんにちは iOS エンジニアの @_nkmrh です。

先日 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 の書き方を統一する

上記の Screenbody に関しては書き方を下記のように統一しています。

var body: some View {
    ZStack {
        navigationLink
        contentView
        error
        loading
    }
}

body の中は ZStack からはじまり、navigationLink, contentView, error, loading の順番に配置します。

それぞれの役割は下記の通りです。

  • navigationLink (navigationLink についてはこちらの記事に詳しく書かれているので気になった方はぜひ読んでみてください🙏)
    • 画面遷移が発生する場合はリンクを設置
  • contentView
    • Screen の表示するコンテンツ
  • error
    • ユーザーに表示するエラーメッセージ
  • loading
    • API 通信中にユーザーに表示するローディングアニメーション

さらに、 contentView は下記のように名前のついた View を配置します。VStackScrollView 等をそのまま書くとネストが深くなり何を表示しているのかが分かりにくくなりがちなので、名前のついた 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 エンジニア を積極的に募集しています。

カジュアル面談も行っているので、ぜひお気軽にご連絡ください!