iOSアプリ開発体験会

#カウントアプリを作ってみよう！！
本日は、<font color="Red">**カウントアプリ**</font>を作成します🔥🔥
アプリ開発の一連の流れを掴み、普段自分が使っているアプリがどうやって動いているのか体感しましょう👍
**↓完成図↓**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/b2c81b2a-4fc4-f85a-135c-c915355ef3b5.gif" width=50%>
では、、、、
<font color="Red">**Let's Geek!!!!!**</font>
##開発環境
**Swift 5.0.1**
**Xcode 10.1**
![swift&Xcode画像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/c25b4844-147d-2de1-a9a6-5f9425e055ab.png)
##開発準備
Xcodeを開き、
**①を選択し、新しくプロジェクトを作成しましょう**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/2150a837-4230-81a5-5425-c5a66a645d7c.png" width=80%>
**②画像通りに選択して、Nextボタンを押しましょう！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/79cedb36-64a8-cf1a-0e56-fb8eff868d53.png" width=80%>
**③画像通りに項目を埋めて、確認が出来たらNextボタンを押しましょう！!**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/e75587d3-dffd-39f8-6a9b-d7d3a6340dd0.png" width=80%>
**④アプリを作成する場所をわかりやすい「デスクトップ」に選択して、Createしましょう！！！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/4e9ccdba-9d8e-d7fa-27cb-2b8ffdc8d23a.png" width=80%>
下の画像のようになっていたら、アプリがCreateできたことになります！！
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/88f55bb7-f27b-f31b-8208-93cd5e2b4f99.png" width=80%>
**⑤右側にあるファイルの中から、「Main.storyboard」を選択し、「View as iPhone〜」をタップし、自分の持っているiPhoneの機種と同じものを選びましょう！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/99932001-84d9-ac78-e7db-234788651799.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/1baa8ff8-b85d-3d99-d9b8-d1f714f362a8.png" width=80%>

**これが出来たら コマンド+Rを押してシュミレーターを立ち上げて見ましょう👍**
→自分のパソコンにiPhone出てくるのとてもでワクワクします🔥🔥🔥



####これにて、開発準備は終了です！！
##開発スタート！！！
##①見た目
まずは、アプリの見た目を作成していきます。
Codeを書こうとしたそこのあなた！！！ちょっと待った！！！！
まだ、Codeは書きません。
なんとXocdeを使えば、アプリの見た目を<font color="Red">**ドラッグ＆ドロップ**</font>で作ることができるのです🔥🔥🔥
主に、**Main.storyBoard**を使用して作成します。
**①右上の丸いボタンを押すと、「Objects」といった、いわゆる<font color="Red">ボタンや、テキストを入れれる部品</font>を選ぶツールが開きます**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/d220b782-eb4e-df09-ecd3-4a9a13c01c1e.png" width=80%>
**②テキストを表示できる「Label」を検索し、それをスマホのような画面（ストーリーボード）にドラッグ&ドロップして配置します。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/190a3116-3d0a-a29f-5348-da0989f742db.png" width=80%>
**③Labelが配置できたら、ホームベースような所を押し、Labelの詳細設定をしてみましょう！！**
例)
・テキスト内容を変えたい：Labelとなっている所を変更します。
・フォントを変えたい：Fontの所から選択する。
・背景色を変えたい：Backgroudから色を選択する。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/ba4da038-50cb-381f-00a1-c37f541409af.png" width=80%>
**④<font color="Red">Try!!</font>:画像のように、ボタンの部品3つ配置して、色やテキストを変更してみましょう！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/7d3a7f9c-2828-12f0-65f6-229fcdf01df6.png" width=80%>
####これで見た目は完成！！！！
##②コードを書く
見た目の部分ができたので、次はいよいよCodeを書いていきます🔥🔥
Codeの役目というと、例えば、ボタンを押した時にLabelのテキストが変更する、みたいなパーツにアクションを加える役目があります。
では早速、Codeを書いていきましょう👍
**この章では、「ViewController.swift」を選択し、Codeを書いていきます。**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/442d7b2b-f9a9-da02-4226-7d89a3ff4f72.png" width=80%>
**⑴変数を宣言する**
公式：「<font color="Red">(＠IBOutlet) var (変数名): (型名) = (初期値)</font>」
例)  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/931fc30b-43e7-8003-b66e-d58de98021b0.png">
<br>
**⑵ラベルのテキストの初期値を設定する**
<font color="Red">viewDidLoad()の{ }内に書きます。</font>
例)  <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/0c87d012-4f93-b37c-df5b-4887d6d38b0d.png">
※プログラミングにおいて、「=」は「等しい」という意味ではありません！「左辺を右辺に<font color="Red">代入する</font>」ということを表しています！(「等しい」を表すのは「==」です。)
<br>
**⑶ボタンを押した時の動作(アクション)を設定する**
公式：「<font color="Red">＠IBAction func (関数名)() { (動きのコード) }</font>」
例)<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/4d35ff9f-0331-9765-355a-bc3ae98a2616.png">
<br>
**コードの全体図**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/fa72ad83-9b89-e9be-7b34-64d68061557b.png">
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/55582cc2-ada5-8170-ae89-833208adf34d.png">
##③関連付け
ここまでやってきたことは、見た目のパーツを作ることと、Codeを書きました。
しかし、これはそれぞれバラバラで行っているので、Codeで書いたことをパーツに関連付けてあげないと動かないのです！！
なので、最後に関連付けを行って行きたいと思います👍
**「Main.storyboard」を開き、ストーリーボードを選択します。そのストーリーボードに関連のあるCodeファイルを横に開くために、<font color="Red">command+option+Enter</font>をします！**
![体験会.mp4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/302458/0971b1a4-0b9a-5741-138e-826df9f98c89.gif)
##【発展】画面遷移をしてみよう
カウントが100になったら、「おめでとう」という画面が表示されるようにしてみます。
**⑴おめでとう画面を作る**
LabelやButtonを配置した時と同じように、右上のボタンを押して、「ViewController」を配置しましょう。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/bb7a7d69-abdc-5cfc-d667-2474f8f4eb05.png" width=80%>
次に、この画面に「おめでとう」というLabelと「戻る」ボタンを配置して、おめでとう画面を完成させましょう。
例)<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/61e00853-aa50-9b1b-1a13-b8660f097f93.png" width=80%>
**⑵Segueの準備**
おめでとう画面が完成したら、画面遷移のために、遷移したい画面同士をヒモで繋ぎます(これをSegue(セグエ)と言います)。
![セグエ設定.mov.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/3894a130-9157-3103-d34f-23eb698b08ae.gif)
※画面上の黄色い丸を選択し、**Controlキーを押しながら**、おめでとう画面まで引っ張ります。今回は、「Present Modally」を選択しましょう。
Segueをつなぐことができたら、Identifier(IDのこと)を設定します。**これは絶対忘れないように！！！**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/c48467d1-4e86-ef6d-b7f5-9b101885344b.png" width=80%>
**⑶おめでとう画面用のViewController(コードを書くやつ)を作成・設定**
①左側で右クリックor「Control+クリック」して、「New File」を選択
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/b45ca0d3-eb04-b9ff-6acd-567f7b6f6283.png" width=80%>
②「Cocoa Touch Class」を選択して「Next」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/3fe08c2e-c9c3-7ebb-cfad-7695ad27b150.png" width=80%>
③名前を入力(今回は「SecondViewController」)をして「Next」→「Create」
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/9bcd6051-bff8-a032-3760-7894d87efe43.png" width=80%>
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/096ebb2e-a60f-a728-a014-42d327110c15.png" width=80%>
④おめでとう画面を選択し、右側のタブの左から三番目(新聞紙みたいなやつ)を選択して、今作ったSecondViewControllerを設定する
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/288a9543-349f-4d0d-ef0d-64f277ef3744.png" width=80%>
**⑷コードを書く**
ViewControllerを開き、以下のコードをplusボタンの続きに書きます。

```swift:Viewcontroller.swift
@IBAction func plus(){
 number +=1
 numberLabel.text = String(number)
 if number > 10 {
   performSegue(withIdentifier: "さっき書いたID", sender: nil)
 }
```


SecondViewControllerを開き、画像のようにアクションを書いてください。(今回、Labelはコード上で扱わないので、宣言は不要です)
![スクリーンショット 2019-05-23 21.26.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/401190/76ec0310-d371-a502-7075-d42887a84c91.png)
※関連付けを忘れずに！！
**⑸動かしてみる！**
ここまでできたら、シミュレーターを立ち上げて、ちゃんと動くか試してみましょう！！
##みんなで勝負してみよう！！！
##今後
**今回の体験会で学んだアプリ開発の流れは、どのアプリでも基盤になってくるものです🔥🔥
普段自分が作っているアプリがどんなパーツ構成になってるか想像してXcodeをいじってみると、とてもワクワクしてくると思います！！！
是非いろいろ触ってみて自分だけのアプリを作ってみましょう！**