SwiftUIはweb開発に近いところを感じた

記事の期間が空いてしまいました。また最近アプリを作ってます。今度は仕事でSwiftUIを使う環境になったので一人で勉強した僅かなアドバンテージと一緒に仕事に励んでいます。Storyboardと比べるとやっぱりSwiftUIの方が簡単かなと思います。

私にとってSwiftUIはHTMLCSSに近い言語感覚を持っているので、どのくらい記事を書けるかわかりませんが感じたことをまとめていきたいと思います。

HStack, VStack, ZStackについて

前回の記事でHStackとかで囲わないと2行以上、2列以上テキストなどを置けないということに気がついたのですが、囲わないといけない理由は探し出せていません。理由を知りたい気持ちはありますがそういうもんだと思って開発しています()

このHStack, VStack, ZStackは、web開発のイメージと近いところがありました。

VStackのCSSイメージ

VStackはwebでいうブロック要素を縦に並べる挙動に見えました。SwiftUIでは自動的にcenteringされているのでcssで表記するとこんなイメージかな。

<div class="vstack">
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

.vstack {
    text-align: center;
}

SwiftUI

HTML,CSS

HStackのCSSイメージ

HStackは要素を横並びにするので私が好きなflexの挙動に見えました。あと並んだ要素は真ん中に寄るのでjustify-contentのcenterが自動的についてるイメージです。

<div class="hstack">
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

.hstack {
    display: flex;
    justify-content: center;
}

SwiftUI

HTML,CSS

ZStackのCSSイメージ

ZStackはPhotoshopとかで言うレイヤーをイメージしています。cssだとpositionのrelativeとabsoluteをセットしてz-indexで調整という感じですが、ZStackの要素は下に書いてある要素が上のレイヤーに来るのでhtmlで表現すると複雑になりました。

<div class="zstack">
    <p>A</p>
    <p>B</p>
    <p>C</p>
</div>

.zstack {
    position: relative;
    z-index: 0;
}

.zstack p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.zstack p:nth-child(1) {
    z-index: 1;
}

.zstack p:nth-child(2) {
    z-index: 2;
}

.zstack p:nth-child(3) {
    z-index: 3;
}

SwiftUI

HTML,CSS

元々HTMLやCSSで並べていくのが楽しいのでSwiftUIの3つも近しいものを感じたので開発イメージが付きやすいです。

参考

https://developer.apple.com/documentation/swiftui/vstack
https://developer.apple.com/documentation/swiftui/hstack
https://developer.apple.com/documentation/swiftui/zstack