TwitterAPIとSwiftを使ってiOSアプリを作ろう！ - Xcode編 - #dotsgirls

# はじめに

こんにちは。メンターのakatsuki174です。

このQiitaは 2017/02/19 開催の[【男性参加可!学生無料】TwitterAPIとSwiftを使ってiOSアプリを作ろう！ − presents by dots.女子部 #dotsgirls - dots.［ドッツ］](https://eventdots.jp/event/611130) のハンズオン用の教材になります。ハンズオン中、または復習中に困ったら見てみてください。この記事は基本的にはXcodeを初めて触る人用に作っており、詳しい説明は省いていたりします。

前編: [TwitterAPIとSwiftを使ってiOSアプリを作ろう！ - 前編 - #dotsgirls - Qiita](http://qiita.com/ktanaka117/private/e721b076ceffd182123f)
後編: [TwitterAPIとSwiftを使ってiOSアプリを作ろう！ - 後編 - #dotsgirls - Qiita](http://qiita.com/ktanaka117/private/fcb44f439773dc56a028)
カスタマイズ編: [TwitterAPIとSwiftを使ってiOSアプリを作ろう！ - カスタマイズ編 - #dotsgirls - Qiita](http://qiita.com/ktanaka117/private/2246ac17523bc0b289a2)

# この記事に書かれていること

* 1.各エリアの簡単な説明
* 2.覚えておくと便利なショートカットキー
* 3.簡単なデバッグの仕方

# 1.各エリアの説明

Xcodeはざっくり言うと以下の5つのエリアに分かれています。のでこれから各エリアについて簡単に説明していきます。

![スクリーンショット 2017-02-19 0.58.43.png](https://qiita-image-store.s3.amazonaws.com/0/100736/694bfcbe-b999-2a69-4ca7-efc7c2980e8d.png)

## ①のエリア

![スクリーンショット 2017-02-19 1.11.51 3.png](https://qiita-image-store.s3.amazonaws.com/0/100736/4c5662e7-6375-cf06-b1d0-3e9cccd82f6f.png)

左から説明していきます。

---

![スクリーンショット 2017-02-19 1.11.51 2.png](https://qiita-image-store.s3.amazonaws.com/0/100736/3882c8cf-5256-ff5c-6fde-5275fb135098.png)

左のボタンがプロジェクト実行ボタン、右のボタンが停止ボタンになります。

---

![スクリーンショット 2017-02-19 1.11.51 5.png](https://qiita-image-store.s3.amazonaws.com/0/100736/969452a3-3952-38cc-9b1f-2be2646488a3.png)

実行するデバイスを選択することができます。右側の部分をクリックすると使用できるデバイスが出てくるので、好きなものを選択してください。

![スクリーンショット 2017-02-19 1.30.11.png](https://qiita-image-store.s3.amazonaws.com/0/100736/6b45474e-3ba9-14c8-cb6b-60aab22148fe.png)

---

![スクリーンショット 2017-02-19 1.51.13.png](https://qiita-image-store.s3.amazonaws.com/0/100736/d9800e40-196e-a37c-8cfb-86898189ccbb.png)

主にステータスが表示されます。警告やビルドエラーの数の情報もここに出ます。

---

![スクリーンショット 2017-02-19 1.11.51 3.png](https://qiita-image-store.s3.amazonaws.com/0/100736/bea38100-e575-2957-7b54-60788e1e2ff8.png)

エリアの表示非表示を変えられます。
![スクリーンショット 2017-02-19 1.11.51 3.png](https://qiita-image-store.s3.amazonaws.com/0/100736/aa17ad81-cc1d-7016-7e49-0d39cecadafd.png)＝②のエリア / ![スクリーンショット 2017-02-19 1.11.51 6.png](https://qiita-image-store.s3.amazonaws.com/0/100736/e1bab758-b384-d3b7-035d-6cf6e739ab4c.png)＝⑤のエリア / ![スクリーンショット 2017-02-19 1.11.51 5.png](https://qiita-image-store.s3.amazonaws.com/0/100736/a93f97ea-b1dc-e98f-877f-65b22e07d0a0.png)＝④のエリア

---

## ②のエリア

![スクリーンショット 2017-02-19 1.55.48.png](https://qiita-image-store.s3.amazonaws.com/0/100736/e779cfcd-9625-d3e5-dc41-0b337b453539.png)

主なタブだけ説明します。

---

![スクリーンショット 2017-02-19 1.55.48 2.png](https://qiita-image-store.s3.amazonaws.com/0/100736/8c3a7a03-bbf3-47cd-9dc6-0611a53bcb3d.png)

ファイル群が表示されます。

---

![スクリーンショット 2017-02-19 1.55.48 2.png](https://qiita-image-store.s3.amazonaws.com/0/100736/ff66cf89-42e1-7c3b-64c1-835bf5d24f49.png)

プロジェクト全体を対象にして検索することができます。

---

## ③のエリア

![スクリーンショット 2017-02-19 2.01.12.png](https://qiita-image-store.s3.amazonaws.com/0/100736/af150ad1-0416-3982-6090-93739c459769.png)

ファイルの中身を表示するエリアです。

---

## ④のエリア

![スクリーンショット 2017-02-19 2.04.40.png](https://qiita-image-store.s3.amazonaws.com/0/100736/c3727bff-717f-b475-ff9e-8d8ca25158a0.png)

AutoLayoutを使う時によく使います。主なタブだけ説明します。

---

![スクリーンショット 2017-02-19 2.04.40 2.png](https://qiita-image-store.s3.amazonaws.com/0/100736/24c3808a-1658-a84e-e6fe-7f9a9c337c89.png)

選択したオブジェクトの属性値を変更する時に使います。例えばUIViewの背景色やContent Modeを変更する時にここで変更することができます。

---

![スクリーンショット 2017-02-19 2.04.40.png](https://qiita-image-store.s3.amazonaws.com/0/100736/3054a139-79e7-222f-31e9-6b4d3a18b2ca.png)

選択したオブジェクトのサイズやAutoLayoutの制約を変更する時に使います。

---

## ⑤のエリア

![スクリーンショット 2017-02-19 11.24.26.png](https://qiita-image-store.s3.amazonaws.com/0/100736/254f2811-fa44-dbb9-6539-ba8fd00a8b1e.png)

`3.簡単なデバッグの仕方`でもう少し詳しく説明しますが、デバッグ時に活躍するエリアです。

---

![スクリーンショット 2017-02-19 9.06.40.png](https://qiita-image-store.s3.amazonaws.com/0/100736/06fd0c56-6169-4032-0441-77e4c8953a65.png)

デバッグ時の各操作を行うことができます。各ボタンの役割は次の通りです。

①実行継続：次のブレークポイントで止まるまで実行継続をする
②ステップオーバー：1行ずつプログラムを実行する
③ステップイン：現在の停止位置がメソッドである場合、そのメソッドの中に入る
④ステップオーバー：現在の定位置がメソッドの中である場合、そのメソッドから外へ出る

---

![スクリーンショット 2017-02-19 11.24.26 2.png](https://qiita-image-store.s3.amazonaws.com/0/100736/34822954-2d5f-b160-da2b-c0553511dadf.png)
ある変数に何が格納されているか知ることができます。

---

![スクリーンショット 2017-02-19 11.24.26 3.png](https://qiita-image-store.s3.amazonaws.com/0/100736/caea075d-5381-fe8a-e5f5-69653a70105b.png)
コンソールなので、コード中にprint文が書かれていればここに出力されます。

# 2.覚えておくと便利なショートカットキー

とりあえずこれ覚えておけば最初のうちはいいだろうというやつを挙げておきます。

* プロジェクトの実行：⌘+R
* プロジェクトのビルド：⌘+B
* ファイル内検索：⌘+F
* プロジェクト全体検索：⌘+Shift+F
* 予測候補の表示：esc

# 3.簡単なデバッグの仕方

基本的なデバッグ方法について説明します。

## エラー内容の確認の仕方

![スクリーンショット 2017-02-19 8.21.31.png](https://qiita-image-store.s3.amazonaws.com/0/100736/a18a5bab-ab62-1218-c9be-89620fb31f61.png)

ビルドエラーが発生すると上部に「Failed」と表示されます。右側に出ているエラー（もしくは警告）マークをクリックすると左側にエラー、警告一覧が表示されます。一覧の任意のエラー（もしくは警告）をクリックすると原因となっているコードが表示されているのでそれを確認します。

ちなみにエラーが出た時に上記のような赤ビックリマークではなく赤二重丸のときがあります。その場合はそのマークをクリックすれば「こうやって書きたいんじゃないの？」という候補を出してくれるので、その内容で良ければEnterで確定してください。
以下は「strをletで宣言してるけどその1行あとで代入してるんだからvarで宣言すべきじゃない？」という表示が出ている例です。
![スクリーンショット 2017-02-19 8.45.49.png](https://qiita-image-store.s3.amazonaws.com/0/100736/2c6b1f0d-0769-c231-abff-7e0f8617f0b4.png)

![スクリーンショット 2017-02-19 8.39.31.png](https://qiita-image-store.s3.amazonaws.com/0/100736/0fbcbdcb-6923-8ad8-fb8a-bb2db8bbec69.png)

## ブレークポイントの付け方

行数のあたりをクリックすると付箋のようなマークが付いてブレークポイントを張ることができます。
![スクリーンショット 2017-02-19 8.36.02.png](https://qiita-image-store.s3.amazonaws.com/0/100736/a7e5c120-5048-1f80-8dbe-96b736376066.png)

もし「今はこの箇所でブレークしないでほしいけどまたここでブレークしたくなりそう」という場合はこのブレークポイントマークをクリックしてください。色が薄くなったと思います。この状態の時はブレーク機能がOFFなので止まることはありません。ONに戻したい時はもう一度クリックしてください。
![スクリーンショット 2017-02-19 8.36.11.png](https://qiita-image-store.s3.amazonaws.com/0/100736/0996fe35-5d7c-3cf8-1b45-c79ab7680f95.png)

ブレークポイントを完全に外したい時はブレークポイントマークをドラッグ＆ドロップしてください。

## ブレークポイントを付けてデバッグする

検証したい箇所にブレークポイントを付けてプロジェクトを実行してみましょう。試しに以下のコードでデバッグしてみます。
![スクリーンショット 2017-02-19 8.59.31.png](https://qiita-image-store.s3.amazonaws.com/0/100736/08be2e70-a78d-6c2c-e05d-6ad20235a1de.png)

プロジェクトを実行するとブレークポイントの部分で止まります。緑の箇所が現在の位置です。
![スクリーンショット 2017-02-19 8.57.55.png](https://qiita-image-store.s3.amazonaws.com/0/100736/d2146399-27f8-8532-82fe-1ff1edb4b3dc.png)
では変数strに何が入っているのか見てみましょう。

中身を見るにはその変数にマウスオンをするか、Xcode下部で確認するかのどちらかになります。
![スクリーンショット 2017-02-19 9.01.57.png](https://qiita-image-store.s3.amazonaws.com/0/100736/ea7fea2e-965a-6cad-9bec-d4d7d4b5af5c.png)
今は`str`が入っています。

ではステップ実行してみましょう。今回は再生マークの実行継続をやってみます。そして改めて変数strの中身を見てみます。
![スクリーンショット 2017-02-19 11.08.09.png](https://qiita-image-store.s3.amazonaws.com/0/100736/b105ac74-b781-3999-d5ca-226567fde5c0.png)
中身が`文字`に変わったことが確認できます。

ちなみにArrayやDictionaryなどの場合は左の三角をクリックすることで個々の中身を確認できます。
![スクリーンショット 2017-02-19 11.17.13.png](https://qiita-image-store.s3.amazonaws.com/0/100736/8c8a7aab-52ca-736c-7c6d-540ce25ceb11.png)