Swift PlaygroundsでXcode projectのコードを動かしてみよう

## Swift PlaygroundsでXcode projectのコードを動かしてみよう
`Swift Playgrounds`便利ですよね！
ビルドするよりも確認が早くて自分の書いたコードの動作を確認するのに非常に重宝しています。
自分が作っているアプリのコードを素早く確認して移植したいなと思い今回は
アプリ開発している`Xcode Project`に`Swift Playgrounds`を実行できる環境を用意した話をまとめたいと思います。
~~この時は`CocoaPods`を使っていたので`CocoaPods`のmoduleを使えるようにするパターンも書いていきます。~~
~~(長くなったので別Qiitaで続編として投稿しようと思います。)~~
続編: http://qiita.com/bannzai/items/dafad16067e9c6e58ff7

## New Xcode Project

まずは紹介用に`Xcode Project`を`New`します。
`Single View Application`で **ImportPlaygrounds**という名前のプロジェクトを作りました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/02a05c0c-c26b-002b-0bf0-734f61275633.png" height="300px" />


`ViewController`のコードを変えます。

```swift

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "スターください → https://github.com/bannzai/"
        label.sizeToFit()
        view.addSubview(label)
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        
    }
}

```

Simulatorで普通に`Run`した画面表示した結果

<img width="212" alt="Simulator Screen Shot 2017.06.14 8.09.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/84459/9c4501e3-5001-e3cd-11f0-c14c612d5ad6.png">

この`ViewController`を`Playgrounds`上で動作させるかつ
同じ`Xcode Project`内で`Playground`を実行できる環境を作っていきます


## `Swift Playgrounds`を追加して動かすところまで
流れは下記のようになります。
1. .xcworkspaceを作る
2. Swift Playgroundsを追加
3. プロジェクトのFramework化
4. Playgtoundで動かしてみる

では、順番に
#### 1. .xcworkspaceを作る
`CocoaPods`を使う場合はすでにできているものを
もしくは`pod install`してできる`xcworkspace`ファイルを使ってもらって構いません
`CocoaPods`を使用しない人は下記のメニューから作れます
僕は`CocoaPods`を使用するパターンで作っていくので合わせたい方は
`pod init`して`pod install`しましょう。

Xcode menu > File > Save as Workspace から作れます
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/f11c9b34-7df7-8524-c58c-ff1848e6bf70.png" height="300px" />

**そして、今後はこの`.xcworkspace`を使って続けていきます。**

#### 2. Swift Playgroundsを追加
プロジェクトの構成が下記のようになりました。
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/0bf937d2-6229-f245-1b79-c7b51138c7b2.png" height="300px" />

ここで`cmd + n` or 右クリック > NewFile で`playground`ファイルを追加します。
右上にありますね。
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/a000a1cb-1e0b-8ef6-6d02-109dea85e76f.png" height="300px" />

`playgourd`を選択したら保存場所を求められます
ここで注意して欲しいのが`Group`を**1. .xcworkspaceを作る**で作成したものにしてください。

<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/faaab5ee-2e22-2d05-7af8-b4b98b814fc7.png" height="300px" />

無事作成したら`Playground`ファイルのアイコンが追加されていると思います
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/79eec6bd-4725-f8f4-fd5a-de42e9e1f648.png" height="300px" />

#### 3. プロジェクトのFramework化
`Playground`をプロジェクトに追加できました
しかし、この状態ではプロジェクトにある`ViewController`を使用することはできません
下記のコードを書いて`Playground`で実行しましょう
`Playground execution failed: error: Demo.playground:6:7: error: use of unresolved identifier 'ViewController'`
というエラーが出ることが確認できると思います

```
import UIKit

print(ViewController.self)
```

これは`ViewController`が見つからないので表示されているエラーです
これを解決するためにここでは`ImportPlaygrouns`プロジェクトをFramework化し、
`Playground`から`ViewController`を呼び出せるようにします

Xcode menu > File > New Target から `Cocoa Touch Framework`を選択します
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/afbe6be9-1d35-5b5e-2eae-98bda76b0174.png" height="300px" />


Frameworkを作成します。
ここで不要なので`include unit tests`のチェックは外しています。
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/50dfe6be-4fe4-5b15-17ba-b32e65fecca4.png" height="300px" />


`Build Targets` に先ほど作成したFrameworkが確認できます
<img src="https://qiita-image-store.s3.amazonaws.com/0/84459/f238896c-8fa7-2e68-4ce5-e94a4f9e9a1f.png" height="300px" />

ここまででFrameworkのターゲットの追加が完了しました。

次に目的である`ViewController`を`Playground`から使えるようにします。
やることが3つあります。
まず、`ViewController`が定義されているファイル、ここでは`ViewController.swift`を開き、右ペインの`Target Membership`に先ほど追加したFrameworkのTargetにチェックを入れましょう。
次に、TargetをFrameworkを選択してビルドします。
<img width="1676" alt="hoge.png" src="https://qiita-image-store.s3.amazonaws.com/0/84459/b7281586-1408-de96-34c9-886a4d5ed960.png">

最後に`ViewController`のアクセスコントロールを`public or open`にしましょう。
Frameworkの外から参照するために必要です。

```swift

public class ViewController: UIViewController {
    public override func viewDidLoad() {
        super.viewDidLoad()
        
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.text = "スターください → https://github.com/bannzai/"
        label.sizeToFit()
        view.addSubview(label)
        label.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        label.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        
    }
}

```

先ほどのコードからアクセスコントロールを変えただけです。
この状態でアプリとして書いていた前提である`ViewController`のクラスを`Playground`から呼べるようになりました。
次は動作を確認していきましょう。

#### 4. Playgtoundで動かしてみる
`Playground`上で`ViewController`を参照できるか確認しましょう。
先ほどの`Playground`のコードに一行足します。

```swift

import UIKit
import ImportPlaygroundsFramework // この行を追加

print(ViewController.self) // ViewController
```

追加したimport文はFrameworkを使用するために必要です。
これで`ViewController`がprintできたことが確認できました。

そして今度は`ViewController`のUIをpreview機能でみてみましょう。

`storyboard`を使っている場合は対象のstoryboardファイルをFrameworkの`Target Membership`に含めましょう。
`ViewController.swift`ファイルの時と同様に右ペインにチェックボックスがあるので選択してください。
そして、Frameworkのビルドを行えば`Playground`から使う準備は完了です。
`PlaygroundSupport`をimportして
`PlaygroundPage.current.liveView `に`ViewController`のインスタンスを代入して、
`Assistant Editor`をひらけば`ViewController`のUIが確認できます。


<img width="1668" alt="スクリーンショット 2017-06-16 23.38.16.png" src="https://qiita-image-store.s3.amazonaws.com/0/84459/db3960bc-271f-6038-3491-0a49d137fe4b.png">


```swift

import UIKit
import ImportPlaygroundsFramework
import PlaygroundSupport

PlaygroundPage.current.liveView =
    UIStoryboard(
        name: "Main",
        bundle: Bundle(for: ViewController.self)
    )
    .instantiateInitialViewController()

```

UIにおいても確認するときには`Playground`はとても便利ですね！
ボタンの押下等のインタラクティブな操作もできるので簡単な動作確認もできそうです。
`storyboard`よりも明確にどういう画面かわかります。

プロジェクトの新規画面の実装や既存画面の確認などにも使えて便利なのではないでしょうか

## まとめ
~~`CocoaPods`を使った場合の投稿は続編として次回投稿しようと思います。~~
`CocoaPods`を使用した場合の記事になります: http://qiita.com/bannzai/items/dafad16067e9c6e58ff7

`Swift Playgrounds`を使いiOSアプリのコードを実行する紹介をしました。
書いて確認するまでの時間も短縮でき、UIの視認性も`storyboard`よりも明確にわかる可能性を秘めていると思っています。
個人的にはこのTipsを多くの方に知ってもらってこれがいい、悪いといった意見を聞けたら一番嬉しいです。

おしまい\\(^o^)/