Xcode 7のPlaygroundで出来ることまとめ

Xcode 7のPlaygroundでちょっとしたコードを試せるのはかなり知られていると思いますが、その便利機能の全貌を把握している人は少ないのでは無いでしょうか。

僕はたまにすごく使いこなしている例を見つつそのやり方が分からないものがちょくちょくあるという状態だったので、改めて調べてみました。


- 公式ドキュメント: [About Playgrounds](https://developer.apple.com/library/ios/recipes/Playground_Help/Chapters/AboutPlaygrounds.html)

# 構成把握

作成直後は色々折りたたまれてシンプルなエディタ状態ですが、諸々展開すると普通のXcodeでのiOSアプリ開発ぽい感じになります。

デフォルトではコードの右に、評価された値が表示されますが、さらに下の出力エリアに`print`や`NSLog`の出力が表示されます。

![Screen Shot 2015-11-23 at 3.43.10 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/d0add362-41d3-c2fe-0c43-67c1300dfec1.png "Screen Shot 2015-11-23 at 3.43.10 PM.png")

`.playground`はフォルダになっていて、中身を見ると上記のソースに当たる部分が`Contents.swift`で、他はプロジェクトファイル系ですね。

![Screen Shot 2015-11-23 at 3.43.22 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/cddb6797-6a8c-a682-7560-1ecde52586ed.png "Screen Shot 2015-11-23 at 3.43.22 PM.png")



デフォルトでは、コードの実行は暗黙的に行われ、ファイル変更後にその時点でコンパイル可能だとそのまま実行され、エラーがあるとその旨が表示されます。

この挙動はこちらで切り替えられますが、手間増えるだけなので、通常はデフォルトの挙動のままで良いと思います。

![Screen Shot 2015-11-23 at 3.52.23 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/63abb2b6-4586-7840-7d17-70d5b8461b3a.png "Screen Shot 2015-11-23 at 3.52.23 PM.png")

# 表示周り

## タイムライン

メニューから`View > Assistant Editor > Show Assistant Editor`を選択すると、

![Screen Shot 2015-11-23 at 4.10.32 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/8abfd350-5bca-73ca-6b0a-f15454329261.png "Screen Shot 2015-11-23 at 4.10.32 PM.png")

こういうリッチな表示が見られます。

![Screen Shot 2015-11-23 at 4.11.03 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/10fec909-aeac-250b-422d-801b790f70ea.png "Screen Shot 2015-11-23 at 4.11.03 PM.png")

描画周りなどの詳細: [XCPlayground Module Reference](https://developer.apple.com/library/ios/documentation/Miscellaneous/Reference/XCPlaygroundModuleRef/XCPlayground.html#//apple_ref/doc/uid/TP40016564)

## 結果の見方

右の目のようなアイコンで、リッチな表示が見られます。

![Screen Shot 2015-11-23 at 4.12.55 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/8b50a5c2-54ef-e0e7-a071-b28816263050.png "Screen Shot 2015-11-23 at 4.12.55 PM.png")

その時点での結果を確認出来ます。

![Screen Shot 2015-11-23 at 4.13.04 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/2bfbdf0e-3772-bd2a-dec9-cc79d91b4f8f.png "Screen Shot 2015-11-23 at 4.13.04 PM.png")

その右のボタンを押すと結果が挿入されます。

![Screen Shot 2015-11-23 at 4.14.24 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/00de1c62-4c1b-3a54-ed91-a75d04344865.png "Screen Shot 2015-11-23 at 4.14.24 PM.png")

変数の値変化はデフォルトでグラフ表示されたり、他の表示も選べたりと、すごいですね(　´･‿･｀)
右クリックでこの変更メニューが出ます。

![Screen Shot 2015-11-23 at 4.19.34 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/506678eb-7ef3-48bf-2970-94f7068b9262.png "Screen Shot 2015-11-23 at 4.19.34 PM.png")

# ファイルの追加

## ソースの追加

デフォルトではシンプルな構成ですが、ページや`Sources`・`Resources`の追加など可能です。

こちらは、1ページ追加して、`Default Page`の`Sources`に`CustomeView`を追加した状態です。

![Screen Shot 2015-11-23 at 4.25.13 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/fb543730-20c8-c043-2c2e-860c99854841.png "Screen Shot 2015-11-23 at 4.25.13 PM.png")

`Source`に追加したものがページから見えるようにするには、`public`指定が必要です。

```swift
import UIKit
public class CustomView: UIView {
}
```

## リソースの追加

`Resources`フォルダに画像やその他ファイルなど入れられます。

さらに、それらをソースにD&Dすると、そのままUIImageやファイル(`NSURL`)として扱えてしまいます(　´･‿･｀)

![Screen Shot 2015-11-23 at 4.33.54 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/4e8c2f12-5eac-11e0-85a3-d2e5d0b83d0b.png "Screen Shot 2015-11-23 at 4.33.54 PM.png")

また、UIColorについても同様にカラーピッカーからD&Dで便利に扱えます。

![Screen Shot 2015-11-23 at 4.40.20 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/7f0ba3d5-af5f-2d0d-c40b-7110851ad795.png "Screen Shot 2015-11-23 at 4.40.20 PM.png")

D&Dではなく、`Editor`メニュー経由でも挿入出来ます。

![Screen Shot 2015-11-23 at 5.43.50 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/db94ad34-a579-d7fa-98f8-ff2bdbadce14.png "Screen Shot 2015-11-23 at 5.43.50 PM.png")


こちらが詳しいです:
[Literals in Playgrounds - Swift Blog](https://developer.apple.com/swift/blog/)

# リッチなドキュメントにする

[通常のコメントもmarkdownぽい書式がサポートされました](swift コメント markdown)が、playgroundでも同様の書式がサポートされてそれをインライン表示可能です。

こういうmarkdownぽいコメントを書いて、

```md
/*: Create a bulleted list of animals
### Some Animals
* Cat
* Dog
* Llama
*/
```

表示を切り替えると…

![Screen Shot 2015-11-23 at 4.49.20 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/fe345cbf-9048-49b4-a76b-f82574e38566.png "Screen Shot 2015-11-23 at 4.49.20 PM.png")

良い感じになりました

![Screen Shot 2015-11-23 at 4.49.01 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/69ea51df-3235-a714-0b7b-13351f730e9c.png "Screen Shot 2015-11-23 at 4.49.01 PM.png")


ソースも変更されるので、この状態で保存すればドキュメントぽいものが作れますね。
(iPython notebookぽいですね)

```diff
-<playground version='6.0' target-platform='ios' display-mode='raw'>
+<playground version='6.0' target-platform='ios' display-mode='rendered'>
```

こちらの`Render Documentation`での切り替えの方が簡単かもしれません。

![Screen Shot 2015-11-23 at 4.56.25 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/d81d4979-783d-287d-98fe-3e020c4fa07c.png "Screen Shot 2015-11-23 at 4.56.25 PM.png")

## ページのナビゲーション対応

このように書くと、

```swift
//: [Previous](@previous)

import Foundation
var str = "Hello, playground"

//: [Next](@next)
```

このように前後のページ(左のリストでの表示順)へのリンクを作成可能です。

![Screen Shot 2015-11-23 at 5.01.14 PM.png](https://qiita-image-store.s3.amazonaws.com/0/19398/f9d6060a-1d13-1629-2a1f-4076653ab67b.png "Screen Shot 2015-11-23 at 5.01.14 PM.png")


`//: ["Go to The End"](New%20Page)`のように、`()`内にページ名指定で、前後に限らず任意のページへのリンクも作成可能です。

# その他

## フレームワークの使用

playgroundから任意のフレームワークをimportして利用可能です。

詳細: [Importing Custom Frameworks into a Playground](https://developer.apple.com/library/ios/recipes/Playground_Help/Chapters/ImportFramework.html#//apple_ref/doc/uid/TP40015166-CH27-SW1)

# 活用事例

特に、リッチコメントやページリンクなど強力なので、色々な用途に応用出来そうですね。
いくつか感心する例を見かけたことある気がしますが、とりあえず今覚えているものだけ…。

## [RxSwift](https://github.com/ReactiveX/RxSwift/#playgrounds)

よく見たらREADMEに、Playgroundsについての記載があり、開いたらすごく便利でした。
動き見ながら説明読むと、とても理解が深まります(　´･‿･｀)

<img width="1292" alt="Screen Shot 2015-12-07 at 12.47.28 PM.png" src="https://qiita-image-store.s3.amazonaws.com/0/19398/1df44fa6-8a01-e42c-1ad0-a6caed5ffb95.png">


## [gmertk/SwiftAlgorithmsClassroom](https://github.com/gmertk/SwiftAlgorithmsClassroom)

`Classroom`という名前の通り、出題形式でアルゴリズム実装する形式になっていて良い感じです。

## [uraimo/Awesome-Swift-Playgrounds: A List of Awesome Swift Playgrounds!](https://github.com/uraimo/Awesome-Swift-Playgrounds)

各種リンク集です。