【Swift3.0】APIからJSONデータを取得して表示【初心者向け】

普段はJavaScriptばかり書いているのですが、Swiftに触れる機会があり、「xcodeの使い方」や「package管理は何を使えばいいのか」など環境の違いに戸惑いました。

同じような人もたくさんいるだろうなと思い、チュートリアルとして書きました。

とはいえ今回はあまりswiftについての説明はありません。
あと何となくstoryboardを使いたくなかったので、使用していません。(TableViewだけだし・・・)

完成するとこんな感じになります。


![com1.png](https://qiita-image-store.s3.amazonaws.com/0/54502/2e221cbe-d64b-4ae5-1e2b-ad795360537a.png)


## 1. プロジェクトを作る

プロジェクトを作る前に作業するフォルダを作ります。
今回はDocuments(書類)直下にswiftフォルダを作ります。

```
Documents
 └ swift
```

xcodeを起動したら[File] → [New] → [Project]を選択します。

選択したらProjectを作っていきます。

テンプレートは「Single View Application」を選択します。

![スクリーンショット 2016-12-03 14.54.48.png](https://qiita-image-store.s3.amazonaws.com/0/54502/b79293a9-995d-d623-d773-25230c6a04aa.png "スクリーンショット 2016-12-03 14.54.48.png")


今回は「AwesomeProject」という名前でプロジェクトを作りました。
この辺りは好きなように作って下さい。

![スクリーンショット 2016-12-03 14.56.30.png](https://qiita-image-store.s3.amazonaws.com/0/54502/de06330c-fd75-f2b2-b4be-a4130218b5b2.png "スクリーンショット 2016-12-03 14.56.30.png")

## 2. Package Managerをインストールする

次にPackage Managerをインストールしていきます。
パッケージマネージャの候補は３つありました。

- Cocoapods
- Carthage
- Swift Package Manager

今回は「Carthage」を使ってパッケージ管理をしていきたいと思います。読み方は「カルタゴ」みたいです。
CarthageのインストールにはHomebrewを使用するので、事前にインストール/アップデートをお願いします。

### インストール

`brew install carthage`

## 3. ライブラリをインストール

terminalでディレクトリに移動します。

`cd Documents/swift/AwesomeProject/`

移動したらCartfileを作ります。

`vi Cartfile`

AlamofireとSwiftyJSONを使用するのでCartfileに以下のように書き込みます。

- Alamofireはリクエストをシンプルにしてくれるライブラリです。
- SwiftyJSONはJSONの型を定義してくれるライブラリです。

```
github "Alamofire/Alamofire"
github "SwiftyJSON/SwiftyJSON"
```

書き込み終わったらCarthageを使ってAlamofireとSwiftyJSONを落としてきます。

`carthage update --platform iOS --no-use-binaries`

そのまま叩くとSwiftyJSONを使う時にエラーになる為`--no-use-binaries`オプションを付けています。

```
*** Fetching SwiftyJSON
*** Fetching Alamofire
*** Checking out Alamofire at "4.2.0"
*** Checking out SwiftyJSON at "3.1.3"
*** xcodebuild output can be found in /var/folders/wt/h0f881ys5697zvh5pvrkhbvr0000gn/T/carthage-xcodebuild.3V1iFn.log
*** Building scheme "Alamofire iOS" in Alamofire.xcworkspace
*** Building scheme "SwiftyJSON iOS" in SwiftyJSON.xcworkspace
```

## 4. プロジェクトにライブラリを追加

### ライブラリの選択

1. 左カラムのツリーから[AwesomeProject]を選択します。
2. 選択したら[General]を選びます。
3. [Embedded Binaries]の＋をクリックして下さい。
4. ポップアップ(?)が出てくるので[Add Other...]を選択します。
5. AwesomeProject/Carthage/Build/iOSと移動して.frameworkと書かれたものを選択し、[Open]をクリックします。![スクリーンショット 2016-12-03 16.02.17.png](https://qiita-image-store.s3.amazonaws.com/0/54502/e3dbe8e0-1712-e0e0-0ed1-d641201a742f.png "スクリーンショット 2016-12-03 16.02.17.png")
6. 次にオプションを聞いてくるので[Create folder references]を選択し、[Finish]します。![スクリーンショット 2016-12-08 7.08.57.png](https://qiita-image-store.s3.amazonaws.com/0/54502/308c5c9c-be3b-dc8d-ce6b-5cf1915a6ea5.png "スクリーンショット 2016-12-08 7.08.57.png")
7. 最終的にこんな感じです。![スクリーンショット 2016-12-08 7.13.25.png](https://qiita-image-store.s3.amazonaws.com/0/54502/35b6ab54-f673-35f1-0b46-9063843a4d20.png "スクリーンショット 2016-12-08 7.13.25.png")



### ライブラリのビルド
1. [General]から[Build Phases]に移動します。
2. ＋を押して[New Run Script Phase]を選択します。
![スクリーンショット 2016-12-03 16.14.14.png](https://qiita-image-store.s3.amazonaws.com/0/54502/e8fef454-1727-ef0b-104c-9b971b0aa85f.png "スクリーンショット 2016-12-03 16.14.14.png")
3. Run Scriptを開き、以下のように記述します。
4. 「Type a script or drag a script file from your workspace to insert its path」と記述されている部分に`/usr/local/bin/carthage copy-frameworks`と記述します。
5. Run script only when installingにチェックを入れます。
6. Input Fileに以下を追加します。

```
$(SRCROOT)/Carthage/Build/iOS/Alamofire.framework 
$(SRCROOT)/Carthage/Build/iOS/SwiftyJSON.framework
```

![スクリーンショット 2016-12-03 16.51.55.png](https://qiita-image-store.s3.amazonaws.com/0/54502/b4811523-e7dd-5fd0-1334-469aa7554c7a.png "スクリーンショット 2016-12-03 16.51.55.png")


## 5. Swift3.0で実装

### AppDelegate.swift

```AppDelegate.swift

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?
    var navigationController: UINavigationController?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {

        // rootになるViewControllerの設定
        let root: ViewController = ViewController()
        navigationController = UINavigationController(rootViewController: root)
        window = UIWindow(frame: UIScreen.main.bounds)
        window!.rootViewController = navigationController
        return true
        
    }

    func applicationWillResignActive(_ application: UIApplication) {}

    func applicationDidEnterBackground(_ application: UIApplication) {}

    func applicationWillEnterForeground(_ application: UIApplication) {}

    func applicationDidBecomeActive(_ application: UIApplication) {}

    func applicationWillTerminate(_ application: UIApplication) {}


}

```

### ViewController.swift

```ViewController.swift
import UIKit
import Alamofire
import SwiftyJSON

class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {
    
    // itemsをJSONの配列と定義
    var items: [JSON] = []
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // TableViewを作成
        let tableView = UITableView()
        tableView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: self.view.frame.height)
        tableView.delegate = self
        tableView.dataSource = self
        self.view.addSubview(tableView)
        
        // QiitaのAPIからデータを取得
        let listUrl = "http://qiita-stock.info/api.json";
        Alamofire.request(listUrl).responseJSON{ response in
            let json = JSON(response.result.value ?? 0)
            json.forEach{(_, data) in
                self.items.append(data)
            }
            tableView.reloadData()
        }
    }
    
    // tableのcellにAPIから受け取ったデータを入れる
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .subtitle, reuseIdentifier: "TableCell")
        cell.textLabel?.text = items[indexPath.row]["title"].string
        cell.detailTextLabel?.text = "投稿日 : \(items[indexPath.row]["send_date"].stringValue)"
        return cell
    }
    
    // cellの数を設定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return items.count
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


}

```

## 完成

![com1.png](https://qiita-image-store.s3.amazonaws.com/0/54502/2e221cbe-d64b-4ae5-1e2b-ad795360537a.png)

## まとめ / 感想

内容はそんなに難しくないと思いますが、開発環境の構築などSwiftを学ぶ以前に覚える事が多い印象でした。
SwiftyJSONとAlamofireは便利ですね！

## 【参考サイト】

- http://qiita.com/yutat93/items/1b6dfe34fa8537cf3329
- http://qiita.com/seiya_orz/items/64b47a38a118af0becf6