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

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

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

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

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

今回はswift初心者&駆け出しエンジニア観点から

• storyboardのここが難しかった！
• swiftUIのここがよかった！

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

storyboardのここが難しかった

その1　レイアウトの設定がとにかくわからん

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

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

その２　classの設定

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

その３　labelやbuttonの設定

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

その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(制約)を調整したり、でも他の部品との高さが合わず、赤線が出てしまい
シミュレーターで確認してもうまく表示されない・・・
という堂々巡りをしておりました。

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

swiftUIのすごいところ

今回の改修でios13以降へのサポートとしましたので
新しい画面作成では、一部swiftUIを採用しました。
その中で、swiftUIの便利だと思うところをいくつかピックアップ＆storyaboadとの比較をしてみたいと思います。
　

その１　previewでホットリロードして画面を確認できる

編集している側から、即時で変更してくれるので、わざわざbuildしてシミュレーターを立ち上げてみる必要がないのでとても快適です。

その２　ZStackでレイアウトを簡単に重ねられる

下記は例として、赤青緑の丸と「good night!」とtextを最前面に表示させてみました。

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

【swiftUI】

【storyboard】

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

その3　Listで簡単にtableviewが作れる

【swiftUI】
今までtableを作る時には、下記の【storyboard】で示されているような関数を使う必要はなく、直感的にコードを書くことができました。

【storyboard】

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

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

結論

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

感想

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

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

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