【Swift UI】Viewプロトコルの役割と使い方!someの意味

この記事からわかること

  • Swift UIViewプロトコルとは?
  • 役割使い方
  • 描画仕組み
  • bodyプロパティとは?
  • some意味

index

[open]

\ アプリをリリースしました /

みんなの誕生日

友達や家族の誕生日をメモ!通知も届く-みんなの誕生日-

posted withアプリーチ

Swift UIの基礎となるViewプロトコルについてまとめていきます。まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

Swift UIの仕組み

そもそもAppleプラットフォーム向けのアプリ開発において宣言的なコードでUIを構築できるのがSwift UIフレームワークの特徴です。これまでのStoryboardなどを使用したUI構築とは大きく変わり、またクラスを中心とした仕組みも構造体中心の仕組みへと切り替わっています。

Swift UIを触る上で一番最初に見るのが以下のコードだと思います。

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}

実際にビルドしてみるとText構造体に渡されている文字列がアプリ画面に表示されます。ここで気になるのがViewプロトコルとbodyプロパティの役割と意味です。正直なんとなく、そういうものだと眺めていましたがある程度理解しとかないといけないなと思い自分なりに整理してみます。

Viewプロトコルとは?

公式リファレンス:Viewプロトコル

公式リファレンスにはViewプロトコルは「アプリのユーザーインタフェースの一部を表し、ビューの構成に使用する修飾子を提供する型」と説明されています。Swift UIにおいてUI部分を構築するための基礎的な役割を果たしていることが分かります。UIKitにおいてさまざまなUI部品の大元となるUIViewクラスと同じような役割になるのでしょうか?

階層構造で管理されるビュー

【Swift/UIKit】UIViewControllerの役割とは?ビュー階層とviewDidLoadメソッド

UIViewクラスではビューを階層構造で管理していましたが、Swift UIでもビューを階層構造で管理しているようです。ビューの重なりはネストして記述することで表現されます。

VStack {
    HStack {
        Text("Hello")
        Text("Hello")
    }
    Text("Hello")
}

定義

Viewプロトコルの定義を見てみると以下のようになっています。

public protocol View {
    associatedtype Body : View
    @ViewBuilder  var body: Self.Body { get }
}

プロトコルに定義されているのはジェネリックなデータ型(associatedtype)Body(後述します)とその型のbodyプロパティのみとなっています。

associatedtype Body型

associatedtype Body : View

この部分はプロトコル内で使用するジェネリックなデータ型を定義しています。ジェネリックとは型に依存しない型制約のことです。ジェネリックな設計にすることで特定の型のみでなく、柔軟な開発が行えるようになります。

ViewプロトコルのBody型ではViewプロトコルに準拠する任意の型が扱えるようになっています。

bodyプロパティ

@ViewBuilder  var body: Self.Body { get }

bodyプロパティは画面に描画させたいコンテンツを定義する計算プロパティです。データ型はSelf.Bodyとなっています。計算プロパティなので最終的には1つのviewを返す(return)プロパティということです。

計算プロパティやクロージャーに必要なreturnは式が1つの時は省略できるので基本的には省略されていますが、returnを追加しても問題なく動作します。

struct TestNavigationView: View {
    
    var body: some View {
      return Text("Hello, World!")
    }
}

some Viewとは?

実際にviewとして表示させるにはbodyの型がsome Viewとなっています。これはジェネリックな型が指定されていたため指定する型としても任意のView型を返す不透明な型になっています。

つまりvar body: some Viewsomeその型に準じた別の形を隠蔽できる記法のようです。上記の記事に恐ろしくわかりやすく解説されていました。

ご覧いただきありがとうございました。

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article

index