初めて作るiPhoneアプリ

# 概要
この記事は、初めてのiPhoneアプリの作り方について解説しています。
環境構築からカウントアプリを作るまでのすべてを、ひとつの記事にまとめました。


## 目標
この記事の目標は、次のようなカウントアプリを作ることです。
![gamen3.gif](https://qiita-image-store.s3.amazonaws.com/0/145009/72a960cb-1e96-d956-9d18-f9e63d4aaad5.gif)

## 環境
- macOS Mojave 10.14.3
- Xcode 10.1を使用します。

# はじめに
この記事では、全くアプリを作ったことがない人に向けて、初めてのiPhoneアプリの作り方を紹介しています。
途中で詰まったり、わからなくなったりする箇所があると思います。そういったときは、ご自身で調べてくださってもOKですし、この記事のコメントに質問を書いてくださってもOKです！
指摘、コメント、質問などなど...、大歓迎ですので、よろしくお願いします！

# 実装してみよう
## 環境構築
まず、iOSアプリを作るには、Xcodeというアプリケーションが必要なので、それをインストールします。[このリンク](https://itunes.apple.com/jp/app/xcode/id497799835?mt=12)からAppStoreに飛べるはずなので、入手しましょう。完全に無料です。（もしリンクが切れていたら、AppStoreで「Xcode」と検索してください。）なお、Xcodeは6GBあるので、ダウンロードにしばらく時間がかかります。(僕は1時間くらいかかりました。)

ダウンロードとインストールが完了した画面
<img width="1440" alt="スクリーンショット 2019-02-18 13.57.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/2eb9c07d-b705-8f1f-17e2-966a99586b71.png">

ダウンロードが終わると、開くことができます。Dockに追加しておくことオススメします。

## 初めてのRunをしよう
Spotlight検索や、Launchpadなどを用いて、Xcodeを見つけたら、それを起動します。
最初に規約に同意する必要があるので、ちゃんと読んで、良いと思ったらAgreeを押します。
<img width="490" alt="スクリーンショット 2019-02-18 14.03.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/074efa3f-bef3-1d2f-ea3a-0d9e011c0a88.png">

Installing Components ...と表示されるので、3分くらい待ちます。
Welcome to Xcode という画面になったら、Create a new project を選択します。
<img width="802" alt="スクリーンショット 2019-02-18 14.07.46.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/c07d7c44-24f9-3129-9960-54f7de42526f.png">

今回は、もっとも単純なSingle View Appを使います。デフォルトで選択されていると思うので、そのままNextを選択すればOKです。
<img width="1400" alt="スクリーンショット 2019-02-18 14.11.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/c13e67be-2602-fe09-fc6e-e7b93e40a0c9.png">

Product Nameは好きな名前をつけてください。（画像では、`YourAwesomeProduct`にしています。）また、Organization Identifierは、開発グループの名前をつけます。個人開発の時は、自分の名前をつけることをオススメします。
言語はデフォルトでSwiftが設定されていると思います。そうでない場合は、今回はSwiftにしましょう。
<img width="1400" alt="スクリーンショット 2019-02-18 14.14.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/93ea65bd-41f1-fbaf-2130-ebceb07ba2bb.png">

開いた画面は、このようなものになります。
<img width="1400" alt="スクリーンショット 2019-02-18 14.15.09.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/971030b5-ef02-c892-5aad-affe9245eb7c.png">

⌘+Rで、Run(実行)することができます。また、左上の再生ボタン（▶︎）を押すことでもRunができます。
Runというコマンドは、まずBuild(Swiftファイルなどから実行用のファイルを組み立てること)をして、そのあとに実際に実行する、という2つの動作を合わせたコマンドです。
Runをすると、Buildが成功すれば、Build Succeededと表示されるはずです。
<img width="1400" alt="スクリーンショット 2019-02-18 14.15.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/291b4ef5-905f-86cc-fdf3-88ff79759d23.png">

次のように、iPhoneシミュレータの画面が表示され、真っ白の画面が表示されれば初めてのRunが成功です！
<img width="1400" alt="スクリーンショット 2019-02-18 14.20.49.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/0759bde0-890e-5eca-10b0-e35fd4be06bb.png">

シミュレータを止めたい時は、⌘+.(ピリオド)で、中断することができます。

## カウントアプリを作ろう
まず、右上の3つのボタンで、ナビゲータ(左に出てくる)とインスペクタ(右に出てくる)を表示します。デフォルトでは、ナビゲータもインスペクタも表示されているはずです。
<img width="1440" alt="スクリーンショット 2019-02-18 14.43.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/9472b09c-e7bc-f70a-beed-e1c6dc3c9245.png">

次に、左のナビゲータから、Main.storyboardを選択します。iPhoneの画面っぽいものが表示されればOKです。(次の画像)この画面っぽいものを、Storyboardと言います。
<img width="1440" alt="スクリーンショット 2019-02-18 14.43.38.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/7e113d2c-4a86-c435-b5e7-99ade974b6e9.png">

### Storyboard上での作業
まずは、数字を表示するラベルと、数字を増やすためのボタンを作ります。
右上のオブジェクトライブラリのボタンを押してください。（次の画像に赤丸で示したボタンです。）
<img width="1440" alt="スクリーンショット 2019-02-18 14.56.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/a7a99ec4-982a-594d-b7e2-4a472c1d9182.png">

この中からLabelというのを見つけ出して、Storyboard(iPhoneの画面っぽいもの)にドラッグアンドドロップします。
<img width="1440" alt="スクリーンショット 2019-02-18 14.59.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/c257c7b6-f15d-576e-08c3-1c06252b339f.png">

こんな感じにLabelを置けたらOKです。
<img width="1440" alt="スクリーンショット 2019-02-18 15.00.55.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/4dcc09e9-d698-a14f-37de-5353b21b5ee5.png">

次は、ボタンを画面に置きます。同様にButtonを見つけ出して、Storyboardに置いてください。
<img width="1440" alt="スクリーンショット 2019-02-18 15.01.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/4ecb71bf-61bb-171d-1e5b-9c8fb7be17d9.png">

これで、Storyboardに必要なパーツを置くことができました！次はいよいよ、プログラムを書きます！

### ViewController.swiftの編集
今度は、左のナビゲータからViewController.swiftを選択します。
<img width="1440" alt="スクリーンショット 2019-02-18 15.27.47.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/88486b14-aa46-59dd-9189-8183756eca9d.png">

ViewController.swiftというファイルが表示されるので、`class ViewController: UIViewController`の中に、次の6行を書いてください。

```swift
    var Number:Int = 0
    @IBOutlet var myLabel: UILabel!
    @IBAction func myButton() {
        Number = Number + 1
        myLabel.text = String(Number)
    }
```

見本の画面はこんな感じです。
<img width="1440" alt="スクリーンショット 2019-02-18 15.30.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/5aa6613d-dfe6-ab92-99bc-0f00d333d8e4.png">
これで、ViewController.swiftの編集も完了です！

### ラベルとボタンを紐付けする
最後に、紐付けを行います。紐付けすると言うのは、いま、コードに書いた`myLabel`と`myButton`が、Storyboard上のどのラベルとボタンに対応しているのかを設定してあげるということです。
もう一回、左のナビゲータからMain.storyboardを選択し、右のインスペクタから、丸の中に右矢印が入ったマークのボタン(Show the Connections Inspector)を選択します。
<img width="1440" alt="スクリーンショット 2019-02-18 22.47.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/5d072a76-534c-78bf-2f95-b448e13f4958.png">

Connections Inspectorを表示すると、何も選択していない状態では、No Selection と表示されます。ここで、storyboard上部にある黄色いボタン(View Controller)を押します。
<img width="1440" alt="スクリーンショット 2019-02-18 22.50.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/f73dc352-fa3b-32dc-76fa-26fbde80c43d.png">

View Controllerが選択されると、右側に、Outletの一覧が表示されます。
<img width="1440" alt="スクリーンショット 2019-02-18 22.50.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/2d154550-20cc-d27d-8e76-cd53860a3148.png">

ここで、右のOutletsという項目の中からmyLabelを探し、○からstoryboard上のLabelまで、ドラッグ&ドロップをし、ラベルの紐付けを行います。
<img width="1440" alt="スクリーンショット 2019-02-18 22.53.43.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/5e55f95a-e7e3-aa7c-958d-5730cd6f3ae0.png">

最後に、ボタンについても同様に紐付けを行います。
<img width="1440" alt="スクリーンショット 2019-02-18 22.54.48.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/00536f76-c96f-77af-45e6-9e0887e07c72.png">

このとき、どんなタップに対して反応するかを聞かれるので、ここではTouch Downか、Touch Up Insideの好きな方を選んでください。
(Touch Downは、タップした瞬間にボタンが反応し、Touch Up Insideはタップして、離した瞬間にボタンが反応します。)
<img width="1440" alt="スクリーンショット 2019-02-18 22.54.52.png" src="https://qiita-image-store.s3.amazonaws.com/0/145009/00005ce7-f178-a90e-d401-8ca892334b20.png">

これで完成です！

### 実行しよう
⌘+Rで実行してみましょう！
うまくいけば、こんな感じのアプリケーションが出てきます。ボタンを押して、数字が1つずつ増えていけば、成功です！
![gamen.gif](https://qiita-image-store.s3.amazonaws.com/0/145009/5736013d-7041-22fb-3957-dd06965525ef.gif)

お疲れ様でした！

# おわりに
カウントアプリが一通りできたら、色々いじって機能を追加してみてください！
また、かなり慣れてきたら、次は電卓アプリを作ってみることをオススメします。かなり難易度は上がりますが、web上にもたくさん記事があると思うので、参考にしながら頑張って作ってみてください。