実務ではコードでレイアウトを組むことが多いので、Storyboardでレイアウトを組むやり方も忘れないように勉強してみました。
公式のドキュメントを読む
上記にアプリを開発する過程を学べそうなドキュメントがあったので読みながら進めてみました。Storyboardに特化したドキュメントではありませんが、アプリを作りながら学べそうだったので選んでみました。
ただし、ドキュメントの内容がちょっと古いです。説明に使われている画像を見ると「iPhone7」と表示されているので、おそらくSafe Areaなどが出る以前に作成されたものだと思います。
プレビュー機能
各端末、Portrait、Landscapeなど、シミュレータを起動せずにレイアウトを確認できます。
Assistant Editorを開くと、対応するソースコードが表示されているかと思います。Automaticと表示されている部分（Editor selector bar）をクリックすると一番下にPreviewという表記があるので、それを選択するとStoryboardのレイアウトをプレビューできます。
しかし、IBDesignableを指定したコンポーネントはプレビューの方には表示されませんでした。Editorの方のデバイスサイズを変えることで多端末の確認はできるのですが、かなり処理重かったです。。
IBDesignable, IBInspectable
コードで組んだレイアウトをStoryboard等に反映させることができます。コードを変更しビルドしても、Storyboardの方に反映されない場合は、メニューの Editor/Refresh All Viewsを選択してみると解決するかもしれません。
IBInspectableは、プロパティの宣言時に型を指定する必要があるみたいですね（推論させると反映されないみたい）。
２つのオブジェクト間の制約の付け方
やり方が分からずちょっとの時間考えてしまいましたが、上記に書いてました。なるほど。右クリックで制約付けたいオブジェクトにドラッグするのですね。
Constrain to margins
viewのもつmarginに制約を合わせることができます。UIViewControllerが持つviewには8ptがデフォルトで付いてますし、UITableViewのleadingとtrailingには20ptが付いてます。UITableViewの余白はscrollIndicatorなどのためでしょうか。
マージン関連は下記に記載がありますが、safeAreaを含めると少し複雑そう。
https://developer.apple.com/documentation/uikit/uiview/positioning_content_within_layout_margins
まとめ
プレビューは便利ですね。コードだけでは見た目を想像するのが難しいViewもありますし。。あと、AutoLayoutの制約コンフリクトなどもすぐに分かるのは良いですね。
Storyboardの各Inspectorの設定を見るだけで、あまり使ったことのないプロパティなどを目にするので、勉強にもなりそうです。
ただ、使い方などを公式ドキュメントから探すのはちょっと大変だなと感じました。