Playgroundを使ってUIの実装したら便利だった

Playground を使って UI の実装をしたら便利かつとても簡単だったので備忘録として。

普段書き捨てのコードやコーディングクイズの問題を Playground で実装するというのはよくやるのだけど、UIの実装で使うというのはほとんどやったことがなかった。ここでいう UI というのは UILabel や UIButton などの UI コンポーネントを指す。

なぜやるのか

なぜ Playground を使って書くかというと、Playground はコマンド一発で View の確認ができるのがとても手軽だから。アプリのプロジェクトを何回もビルドするのは時間がかかる。特に大きいプロジェクトでは余計に。またシミュレータや実機で確認するにしても、アプリが起動してから動作確認したい画面まで遷移するというのも手間で時間がかかる。Playground を使えば見た目がすぐに確認できるのでフィードバックループを小さくできる。確認の手間を小さくして、何度もチェックできるというのが良いところだと思う。「手動で動作確認をする代わりにユニットテストを書き、フィードバックループを小さくして何度も "チェック" する」というのはよく言われることだけど、それと同じだと思う。

環境

Xcode 10.2.1

やり方

1. プロジェクトを作成

Xcode -> File -> New -> Playfround -> Single View を選択

f:id:enmtknt:20190509171844p:plain

すると以下のコードが自動生成された Playground ができる

Playground Driven Development (Xcode 10.2, Swift 5 ...

ここでポイントになるのは最後の行で、 PlaygroundPage.current.liveView にセットした ViewController や UIView を Playground の live view ですぐに見ることができる。

PlaygroundPage.current.liveView = MyViewController()

2. UIの実装

いつも通り UI コンポーネントを実装する。Playgroundの同じページに書いていって構わない。

3. 動作確認

  • ショートカット Command + Option + Return で live view を表示できる。
  • コードを実行する。左下のボタンを押すか、 Command + Shift + Return で実行できる。
    f:id:enmtknt:20190509175038p:plain
    エラーが出ているが、ビルドは通っている

最後に

Playground Driven Development で調べるとより詳細な方法が出てきた。

ここまで行けると良さそうだけど、シンプルな UI コンポーネントの実装であれば、 ViewController に addSubview() して見た目を素早くチェックする → コードを変更する → チェックする → コードを変更する ... というループを素早く回せればそれだけでも充分良いかなと感じた。