Storyboard vs siwftUI どちらを使うべき？

# この記事を書こうと思った背景

最近はJavaScript(vue中心)を携わっていた駆け出しエンジニアが、今回自社アプリの改修を担当することになりました。が、、swiftはほぼほぼ初めて。

+ storyboard
+ swift独自の概念　　etc...

非常に非常に苦戦しました:sweat_drops:

今回はswift初心者&駆け出しエンジニア観点から
+ storyboardのここが難しかった！
+ swiftUIのここがよかった！

という完全に **swiftUI** 推しにはなりますが
storyboardとswiftUIとの比較もさせていただければと思います。

# storyboardのここが難しかった
## その1　レイアウトの設定がとにかくわからん
一度知ってしまえば、あ！ここにあったのか:bulb:というだけの話なのですが
その設定を見つけるために時間を要してしまったことは、一度や二度ではなく。。
設定画面の項目および選択肢が多く、どこに何を設定したらいいんだ・・・と言う状況でした。
もちろんコードでの指定もできるんですが、透明度を設定する`alpha`もその一例です。。

![スクリーンショット 2022-07-20 14.59.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/dd9c9e88-80d6-ec5e-8c95-77f7b3515d25.png)

また、storyboardからでもコードからでもレイアウト等の設定ができてしまうので
storyboardの設定を変更してもコードでの設定がなされており、うまく表示が変更されないこともありました。
storyboardで詳細な設定ができない場合に、コードのでの設定も必要になる場面もあるかと思いますが
チーム内で認識を合わせるなどの必要があるかなと思います。


## その２　classの設定
せっかくswiftファイルを作り、色々コードを書いたとしてもstoryboard上で繋げてないと
反映されないわけで、この`Custum ClassのClass`に`Class名`を入れてあげないといけないという。
ここがわかってなくて、breakpointはっても全然通らないし、なんなんだ:persevere:ということもありました。

![スクリーンショット 2022-07-20 18.03.50（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/9279675c-0106-0f4e-46a1-c523e8f9508e.png)


## その３　labelやbuttonの設定
余計な設定はしてはいけないと思いつつ、なんか色々項目があって、どこに何を書いていいやら・・
私はDocumentのLabelに区別するために入れたかったUIButtonの名前をCustom ClassのClass名に
入れてしまい、読み込めず（そりゃないclassなんだから読み込めるはずもなく）解決に時間がかかりました。。

![スクリーンショット 2022-07-22 11.57.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/0b1963bf-3868-c54e-7c4c-f3fa3b336345.png)


## その4　webviewの設定
今回の改修でWKWebViewの上にUIViewを表示させたかったのですが、他の画面でもwebviewを使用しており、UIViewを上に乗せる対応によって、既存の影響範囲も懸念されました。

結果的に、今回で対応を **ios13以上** ということになったので、webviewの対応はSwiftUIで作成することになり、既存のWKwebviewとswiftUIのweviewで分割することで解決としたため、事象の解決というより方向転換という形を取りました。

## その5　gitのコンフリクトが恐怖
storyaboardを複数で開発している方であれば、誰しも頭を抱えたことがあるのではないでしょうか。

+ storyboardをいじるのは一人にする
+ storyboardを使わずコードで全部書く

などの対策を取っているチームもあるようです。

私たちのチームもstoryaboardを修正するときには細心の注意を払い
特に`git pull`する時には、ローカルでstoryaboardをいじっていないことを確認してから実行していました。

ちなみに万が一コンフリクトが起きてしまい、ローカル分を活かさない(=pullした側を採用する場合)は
`git checkout -- "Main.storyboard(storyboardの名前指定)"`で対応してました。

## その6 storyboardは時間がかかる
非常にざっくりにはなるのですが、`label、button、ｔａｂｌｅｖｉｅｗ`など様々な部品を配置するために
constrains(制約)を調整したり、でも他の部品との高さが合わず、赤線が出てしまい
シミュレーターで確認してもうまく表示されない・・・ :confounded:
という堂々巡りをしておりました。

同じ画面を作るでも、swiftUIの方が画面だけのレイアウトであれば倍以上早く作れるようになる気がします。
今回のwebviewの上にUIViewを乗せるという改修では、storyboardで1週間はかかると見積もっていた部分を
mockベースでほぼ1日で作ることができました。

# swiftUIのすごいところ
今回の改修でios13以降へのサポートとしましたので
新しい画面作成では、一部**swiftUI**を採用しました。
その中で、swiftUIの便利だと思うところをいくつかピックアップ＆storyaboadとの比較をしてみたいと思います。
　
## その１　previewでホットリロードして画面を確認できる
編集している側から、即時で変更してくれるので、わざわざbuildしてシミュレーターを立ち上げてみる必要がないのでとても快適です。
![hello world.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/dcfd68cb-f449-d756-4ddf-85a4d172a015.gif)


## その２　ZStackでレイアウトを簡単に重ねられる
下記は例として、赤青緑の丸と「good night!」とtextを最前面に表示させてみました。

この程度のシンプルなものであれば、それほど時間差があるわけではなかったのですが
コード量や設定の煩雑さではswiftUIの方が容易なのが伝わりますかね？

【swiftUI】
![スクリーンショット 2022-07-22 15.53.52（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/dadeff63-7f42-09cd-7626-9244bedafdc0.png)

【storyboard】
+ UIViewを配置
+ 真ん中＆大きさの制約つける
+ storyaboardとコードを紐付ける
+ 丸くする
→　赤青緑で3回繰り返す
+ UIlabelを設置する

![スクリーンショット 2022-07-22 16.20.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/9c0b13fa-57fb-33e7-0505-144a21e8f533.png)

## その3　Listで簡単にtableviewが作れる
【swiftUI】
今までtableを作る時には、下記の【storyboard】で示されているような関数を使う必要はなく、直感的にコードを書くことができました。
![スクリーンショット 2022-07-25 10.17.24（2）.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/06f8b4f0-ebc1-6cf6-e1ec-6ab6542c15c9.png)

【storyboard】

![スクリーンショット 2022-07-25 15.37.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2629280/ee541596-e1d5-2a46-e072-6af71037231d.png)

`numberOfRowsInSection`　→ セルの個数を設定
`cellForRowAt` → 各セルを作成

`view controller`から`delegate,datasorce`の繋ぎを忘れて、なかなかデータが表示されず時間がかかりました。。

# 結論
ios13以上アプリを作るのであれば、 **swiftUI** 採用すべし！！

# 感想
こんなことをよりもswiftUIにはもっとすごい機能がある！！や
他にもstoryboardの違う部分に苦戦したもあると思います。
逆に、storyboardのここはswiftUIに負けない！！！といったstoryboardの良いところももちろんあると思います。

ただこれからはswiftUIがより主流になってくるので
qiitaにもswiftUI関係の記事も積極的に上げていきたいと思います:fist_tone1:

長くなってしまいましたが、読んでいただいてありがとうございました:relaxed: