【iOS】メンテナンスしやすいView階層の考え方
iOSアプリを開発するにあたって、どのようなレイアウト構成にするかは大きな検討ポイントです。
今回は特に大切であるView階層の考え方について整理していこうと思います。
はじめに
こんにちは。
クラウドソリューショングループのurushibata.aです。
この記事は アイソルート Advent Calendar 2020 20日目の記事です。
昨日は maruoka.n さんの 【ローコード】勤怠管理アプリを1日で作成 でした。
PowerPlatformについて、知識を深めるいい機会になりましたね！
さて、今回はiOSアプリにおけるメンテナンスしやすいView階層の考え方についてを紹介します。
Viewの階層を考えるメリット
Viewの階層を考え、ルール（後述）を適応することで、以下の２点のメリットがあります。
- 一つのクラスに実装されるコードが少なくなり、可読性が高くなる
- View同士の影響が限りなく少なくなる
つまり、メンテナンスがしやすい実装をすることができます。
実際にView階層を考えながら実装する
〜 ルール 〜
実際に実装するにあたって、よりView階層の力を発揮できるようにルールを定めます。
以下の３点を意識して実装していきましょう。
- 全体像からViewの階層を考える
- 子Viewをカスタムクラスとして扱う
- １階層下のViewのレイアウトを変更する
１. 全体像からViewの階層を考える
例として、メルカリアプリの画像で考えます。
１-１. 第１階層目
メルカリアプリの画像は以下のようにグループ分けをすることができます。
①ImageView
②Label
③View１（カスタムクラス）
④View２（カスタムクラス）
１-２. 第２階層目
２階層目は以下のピンクと緑のViewに分けることができます。
ここで ピンク４つと緑２つのViewはそれぞれレイアウト構成が同じであるため、共通パーツとしてView３、View４を使い回します。
⑤ View３（カスタムクラス）
⑥ View４（カスタムクラス）
１-３. 第３階層目
共通化したViewのView３をVIew４は以下の図のように部品に分けることができます。
これでViewの階層分けは終了です。
１-４. 階層分けから生じる親子関係
ViewControllerのViewをBaseViewとすると以下の親子関係として表すことができます。
２. 子Viewをカスタムクラスとして扱う
階層分けができたらいよいよメンテナンスしやすくなるようにルールを適用していきます。
まず、子Viewをカスタムクラスとして扱いましょう。
上図の親子関係の図でいうと、View１、View２、View３、View４は全てカスタムクラスとして作成しましょう。
カスタムクラスとして扱うことで、View同士の関係が薄くなります。（例えば、View３の情報をView２やBaseViewが知る必要がなくなります。）
これにより、レイアウト変更の際の影響が小さくなったり、クラスごとの責務が明確になり、１クラスあたりのコードが少なくなります。結果としてメンテナンスのしやすい実装を行うことができます。
３. １階層下のViewのレイアウトを変更する
また、１階層下のViewのレイアウトを変更するようにしましょう。
例えば、今回の例でいうと、BaseViewから見た時のレイアウト変更可能箇所は下図の緑の箇所になります。
また、View１から見た時のレイアウト変更可能箇所は下図の緑の箇所になります。
これらのように親Viewが子Viewのレイアウトを変更するようにしましょう。
逆に、以下のようなレイアウト変更は避けるべきです。
- 兄弟のレイアウトを決めること（例；View１がView２の表示状態等を変更する）
- 孫Viewのレイアウトを変更する（例：BaseViewがView３のラベルを変更する）
- 子が親のViewのレイアウトを変更すること（例：View３がView１のレイアウトを変更する）
そうすることで以下のような利点があります。
- １階層下のViewのみのレイアウトを管理することで、孫Viewのレイアウトが変更になっても影響が子Viewのみになる
- 孫Viewのコードがなくなるため、親のコードが簡潔になり、可読性が高くなる
最後に
Viewの階層を意識しつつ、ルールを取り入れることでメンテナンスがしやすいViewを作ることができました。
ただ、本記事の内容を闇雲に取り入れるのではなく、まずはプロジェクトでレイアウトの作り方を統一することやプロジェクトの方針に合わせることが大切だと思っています。
そのため、本記事の内容は頭の片隅にでも残していただけると幸いです。
明日は nakada.r さんの 【入門】AWS CLIでEC2を起動するまで です。
