Xcode Previews入門　〜コードを書かないで画面を作る〜

## はじめに
SwiftUIを使うことのメリットとして真っ先に上がるプレビュー機能ですが、実際にプレビュー機能を使いこなしている人は少ないように感じています。(自分含めて)

そこで、WWDC2020のセッションから学んだプレビュー機能をを使いこなせるようにし爆速にアプリの構築ができるようPreviewの基本やショートカットを記事にします。

今回は、Previewの基本的な使い方をご紹介させていただきます。

環境: Xcode12, macOS Catalina ver 10.15.6

**⌘**：コマンド（Command）キー
**⌥**：オプション（Option）キー
**Ctrl**：コントロール（Control）キー

## Previewsの基礎

SwiftUIのアプリを起動すると以下のような画面になっています。

### プレビューの実行・再実行 `⌘ + ⌥ + P`
右上にある`Resume`をクリックする、もしくはショートカットキー`⌘ + ⌥ + P`でプレビューを実行することができます。
これは頻繁に使い開発効率が上がるので是非覚えておくと良いと思います。
Viewが反映されなくなったらとりあえずエラーが出ていない限り`⌘ + ⌥ + P`で再描画されます。

![スクリーンショット 2020-09-21 2.06.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/4e876570-1fe1-db5e-88d6-9ba0ef85f1e3.png)

ビルドが走りますので、しばらく待つと以下のようにPreviewが表示されます。

![スクリーンショット 2020-09-21 2.18.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/74765490-2d67-e4f5-fdc5-8d4ca08f0602.png)

このままでも良いのですが、実際のViewにのみ注目したい場合は`previewLayout(_:)`を使うと良いです。PreviewProviderのContentViewに`.previewLayout(.sizeThatFits)` としてあげることでViewのみのpreviewにすることができます。

![スクリーンショット 2020-09-21 2.28.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/530f61db-361b-e707-adbc-53ce73001abd.png)

### Previewの表示・非表示

Previewは表示・非表示を切り替えることができます。
以下の図の①の箇所をクリックした後、②の`Canvas`をクリックすることで切り替えることができます。
もしくは`⌘ + ⌥ + Enter`でも可能です。

![スクリーンショット 2020-09-21 2.39.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/47481700-0f7e-9e8c-1b2b-7dd4ddb54570.png)

### Library

ライブラリーにはSwiftUIのViewとModifierがあります。
ライブラリーを起動するにはXcodeの右上にある` + `ボタンをクリックする。
もしくは`⌘ + Shift + L`で表示させることができます。

![スクリーンショット 2020-09-21 2.34.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/cfdfffb5-370c-5da9-6934-cbb985db4c29.png)

表示される`Library`はいくつか種類があり、SwiftUIのViewを使いたいなら`Views`を選択しましょう。
種類は左から、`Views`, `Modifiers`, `Snippets`,`Media`, `Color`となっております。
状況に応じて使い分けましょう！

![スクリーンショット 2020-09-21 2.45.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/997f5946-56f2-522e-2fa3-90ccd1f86aa4.png)

これらのViewをPreviewの挿入したい箇所にドラッグ＆ドロップすることでPreviewを最新の状態に保ちながら修正することができます。

このときドロップする箇所によって、自動的に`VStack` か`HStack`にしてくれます。

<blockquote class="twitter-tweet"><p lang="und" dir="ltr"><a href="https://t.co/AC0YXhO4VD">pic.twitter.com/AC0YXhO4VD</a></p>&mdash; ツヅキ (@tsuzuki817) <a href="https://twitter.com/tsuzuki817/status/1308003302051737605?ref_src=twsrc%5Etfw">September 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### Previewをクリック

previewに表示されたTextの文字列をクリックすると、TextのViewを選択することができます。

![スクリーンショット 2020-09-21 11.54.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/950d9d07-65fb-5d4e-2867-ddbc20367d23.png)

Previewをダブルクリックするとエディタにフォーカスが移動し、テキストか画像かに関係なくViewの要素を簡単に変更できます。

![スクリーンショット 2020-09-21 11.54.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/98a58d70-d9b8-548d-c6c0-d838a5156455.png)

修正された内容も即時反映されます。

![スクリーンショット 2020-09-21 12.07.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/7ed80e52-e3c0-5d15-45c3-06ad0fbceb25.png)

### Viewの複製　`⌘ + D`

Preview画面でViewをクリックしている状態で`⌘ + D`とすると選択したViewを複製することができます。

![スクリーンショット 2020-09-21 13.29.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/536081d5-76bb-979d-afc2-f712853b3014.png)

### 画像の追加

PreviewとLibraryの機能を使うことで画像の追加がとても簡単に行えるようになります。

`Assets.xcassets`ファイルにお好きな画像を`Finder`などからドラッグ＆ドロップで置いておきます。

![スクリーンショット 2020-09-21 17.10.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/691b3ad8-cce0-8f4b-6eb1-864a3d1b7bc7.png)

`⌘ + Shift + L`でライブラリを起動し、右から二番目の`Media`をクリックすると、既に追加されている画像(drink_tapioka_tea_man)が表示されています。

![スクリーンショット 2020-09-21 17.11.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/ea3186b1-7c7d-b91c-722e-ce10515b5531.png)

この画像をドラッグ＆ドロップで`Hello World!` と` LGTM`の間におきます。

![スクリーンショット 2020-09-21 17.16.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/a6eae3c9-5db2-85e3-58e2-94eea8f3cee6.png)

そうすることで、以下のように表示されます。
SwiftUIでは実際のサイズの画像を表示するので、デカデカと表示されてしまいました。

![スクリーンショット 2020-09-21 17.16.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/cea57e24-90c7-c901-f992-f25fce547b68.png)

### インスペクタの利用　`⌘ + ⌥ + 0`

以下の図の箇所をクリックする、もしくは`⌘ + ⌥ + 0`でインスペクタを開きます。

![スクリーンショット 2020-09-21 17.36.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/2d2c4f8f-8d44-4c77-43da-769bd401a919.png)

Previewの画像をダブルクリックして選択したのち、一番右の `Attributes inspector`を選択します。

![スクリーンショット 2020-09-21 17.43.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/3fdd7300-fd4e-39de-4022-b7b0a44fc73a.png)

`Add Modifier`をクリックすると現在の要素にあった推奨される`Modifier`が表示されます。

`Resizable`を選択します。

![スクリーンショット 2020-09-21 18.06.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/5265adb8-b4ad-f607-078e-35a36f8f3463.png)

随分と縦長になってしまったので、`asaspectRatiopect`を設定しましょう！

![スクリーンショット 2020-09-21 18.09.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/be4240d7-cc9f-e770-043a-8142f99573c7.png)

`contentMode`を`fit`にしておきます。

![スクリーンショット 2020-09-21 18.10.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/3d91b30d-0d91-be23-268d-331f4e129352.png)

サイズを調整していきます。すでに見えている`Frame`の`Size`に適当なサイズを入れます。

![スクリーンショット 2020-09-21 18.45.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/6b4bf517-208c-ffc7-bd14-bd68782447c6.png)

そろそろLGTMも文字が二つあるのは邪魔なので、Viewを選択した状態で`⌘ + Delete`で削除します。

そしてTextの代わりに今までの要領で好きな画像を以下のように表示させてみましょう。

![スクリーンショット 2020-09-21 19.00.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/749b8e1e-fbca-48f0-0fd4-7d7ba15218aa.png)

### アクション `⌘ + クリック`

選択したViewを様々なコンテナ(VStack, HStack, etc )に埋め込むことができるアクションを利用します。
対象のViewを`⌘`を押したままクリックでアクションを呼び出すことができます。

![スクリーンショット 2020-09-21 19.01.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/bcb30d44-4e9a-2e2f-530e-c59e24a45e6f.png)

`HStack`に格納してみました！

![スクリーンショット 2020-09-21 19.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/d5c8c2e4-e09d-4ec4-62f8-a095c6d872a2.png)

これを繰り返し表示させてみます。再び、`⌘`を押しながらクリックして`Repeat` をクリックします。

![スクリーンショット 2020-09-21 19.03.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/d5c8c2e4-e09d-4ec4-62f8-a095c6d872a2.png)

コーヒーが5個に増殖させることができました！便利ですね！

![スクリーンショット 2020-09-21 19.05.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/9c1d906b-4c54-3667-1374-719b090b3fb1.png)

### テキストを目立たせる

タイトルとして`Hello, world!`を目立たせていきたいと思います。

インスペクタを表示し、`Font`の項目をいじります。

![スクリーンショット 2020-09-21 19.13.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/8befc21b-8036-b798-fa54-e75c49c3a8a0.png)

`Font`を`title`, `Weight`を`bold`, `Color`を`purple`にしてみました。
お好きな形にしてみましょう！選択した色が即時反映されます。

![スクリーンショット 2020-09-21 19.16.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/ce49f7bb-528f-5c07-c990-041bf02a1106.png)

### Modifierを無効にする

Modifierをクリアするには、コントロールの隣にある円形のインジケーターをクリックします。

![スクリーンショット 2020-09-21 19.20.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/b3c5ce83-869d-052e-5139-7b2829f3d9b7.png)

色を元に戻すことができました。

![スクリーンショット 2020-09-21 19.24.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/ce091c4c-3505-05b2-8a62-c897780806ee.png)

### Previewキャンバス上でインスペクタを呼び出す `Ctrl + ⌥ + クリック` 

`Ctrl + ⌥`押しながら対象のViewをクリックすることで、右側にインスペクタの領域を取られる事なくModifierの値を変更することが可能です。

![スクリーンショット 2020-09-21 19.26.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/9d9cc7b9-4f07-7090-7808-17d8fc825dc3.png)

### プレビューの複製

ワンクリックでプレビューの複製が行えます。

![スクリーンショット 2020-09-21 19.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/0dd2c866-a4de-f5f3-1017-568655cbfc65.png)

とても便利です。

![スクリーンショット 2020-09-21 19.53.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/b7a3bb2b-4494-bbc0-d710-a067c96cd26a.png)

### Previewをダークモードにする

`Inspect Preview`をクリックし、`Color Scheme`を`Dark`にします。

![スクリーンショット 2020-09-21 19.56.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/9a4551c3-86b7-333e-d1ea-99f22f2cd0b2.png)

ダークモードになっていることが確認できます。

![スクリーンショット 2020-09-21 20.10.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/171702/4ff708cb-62f1-1b07-2d5a-d6229356aa05.png)

##　おわりに

XCodeのPreview機能の触りを実際に動かしながら解説しました。
次回は、自分で作ったカスタムViewやカスタムModifierを作る記事を書こうと思います。

## 参考

[Visually edit SwiftUI views - WWDC 2020 - Videos - Apple Developer](https://developer.apple.com/wwdc20/10185)