Xcode の Playground を久しぶりに使ってみて、UIの実装とかこれでやると便利だな、と思ったのでやり方をまとめてみます。

やりたい完成系はこんな感じ：

左に書いた TableView のコードが右で即時反映されてます。

前置き：そもそもPlaygroundとは

f:id:himaratsu:20160318235944p:plain

Playground というのは Xcode 7 から登場した Swift の REPL 環境です。
上記の画像のように、コードを書くと実行結果がビルドすることなしに即時に表示されます。Swift の文法を試せすのにもってこいで、自分も入門したての頃にはよく使ってました。

Apple の公式の Swift ドキュメント「The Swift Programming Language」の概要部分ではドキュメントが Playground として実装されていて、実際に値を変えたり動かしながら確認することができます。（ここのページの Download Playground から落とせます）

f:id:himaratsu:20160319000548p:plain

実際に動かせるドキュメントとして Playground はとても優秀で、読んで→書いてとやってたのが同時に可能です。最近流行りのOSSライブラリであるRxSwiftでもPlayground形式のドキュメントが同梱されたりしています。

PlaygroundでUIをつくる

3月頭に try! Swift というSwiftのカンファレンスに参加したんですが、そこで驚いたのが海外のスピーカーの方がよく Playground を使ってることでした。
文法のデモはもちろん、アニメーションの調整（モンスターボールを投げると回転して爆発してポケモンが登場する）や TableView の実装まで、Project ではなくて Playground でサクサクと進めてました。

自分は最近はほとんど Playground 使ってなくて、どれくらい便利なのかなーと思って試してみたやり方と感想をまとめます。

XCPlaygroundをimportする

下記のように記述して、XCPlayground を import します。

import XCPlayground

ライブ表示するviewを指定する

次に右側にライブ表示する view を指定します。
今回は UITableViewController を root とした NavigationController を表示するので、以下のように指定します。

let tableVC = UITableViewController()
let navigationController = UINavigationController(rootViewController: tableVC)

XCPlaygroundPage.currentPage.needsIndefiniteExecution = true
XCPlaygroundPage.currentPage.liveView = navigationController.view

Assistant Editorを開く

viewはREPLで表示されるコンソールではなく、Assistant Editor で開いた Timeline に表示されます。

f:id:himaratsu:20160319011142p:plain

ここまでで view が表示できてるはずです。

実装を書いていく

試した内容としては、カスタムな UITableView を書いて、その view を Playground でライブ表示していきました。
Playground につらつらと書いていって、以下のように記述しました。

import UIKit

final class MyTableViewController: UITableViewController {
    // ... MyTableViewControllerの実装をここに
}

let tableVC = MyTableViewController(style: .Plain,
    items: people,
    cellStyle: .Subtitle,
    editable: true)     { cell, item in
        cell.textLabel?.text = item.name
        cell.detailTextLabel?.text = item.city
    }
tableVC.title = "Person"
let navigationController = UINavigationController(rootViewController: tableVC)

navigationController.view.frame = CGRectMake(0, 0, 320, 480)

import XCPlayground

XCPlaygroundPage.currentPage.needsIndefiniteExecution = true
XCPlaygroundPage.currentPage.liveView = navigationController.view

こんな感じで書いていくと、以下のように表示されます。

f:id:himaratsu:20160319002149p:plain

いい感じですね！

コードを修正するたびに変更が右側のViewに反映されていくので、とても効率よく実装ができます。

サンプルコード

今回試した内容はこちらのリポジトリにまとめています。

github.com

（Xcode 7.2, Swift 2.1 でつくりました）

まとめ

Playground で UI を実装するのはとても快適でした。ビルド時間はいらないし、「ビルドするぞ」と切り替える回数が少ないのも捗ります。
現在はタッチイベントなどは検知できませんが、次の Xcode のバージョンでは UITapGestureRecognizer などにも対応するようで、それができると一気に可能性が広がる気がします。

一方で、storyboard とか xib を使っての実装とは相性はよくありません。try! Swiftのスピーカー陣は storyboard 使わない派の人が多かったので、ここは気にしてないのかもしれませんね。
自分は storyboard 積極的に使ってく派ですが、アニメーションや View の部品をコードだけで実装するケースでは今後 Playground で作ろうと思いました。

Xcode Playground は文法の確認やインタラクティブなドキュメントだけでなく、UI の実装にも便利そうという話でした。みなさまの Playground Life のお助けになれば光栄です :)

Think Big Act Local

iPhone開発を軸にブレブレの記事を書いていきます。

XcodeのPlaygroundをつかってUIの実装をサクサク試す