Swift/iOS開発入門#1_HelloWorld

# XcodeでSwiftアプリを作ってみる。
iOSアプリを作ることができるXcodeを使ってHello Worldを出力してみます。

# Swift/Xcodeとは
2014年にApple社から発表されたプログラミング言語です。
watchOS,tvOS,iOS,macOSなどの開発ができます。
言語の種類は**静的型付き言語**です。実行前の段階で変数や型の情報を決定するプログラミング言語のことです。
nilの許容性をコントロールしたり、型推論があったりするのが特徴です。まぁこの辺はあまり考えなくて大丈夫です。

## SwiftUIとStorybordについて
Xcodeを用いたiOSアプリ開発には、SwiftUIを用いたものとStorybordを用いたものの２種類が存在します。
それぞれの特徴とメリット、デメリットを少し説明します。


### Storybord
Storybordは、Swiftが生まれてから2019年までに開発で用いられていた手法です。
下のような**ViewController**を用いて直感的にボタンやテキストなどのオブジェクトをドラッグ＆ドロップして配置します。

* メリット
1.直感的にオブジェクトが配置することができて簡単。
2.Unityにオブジェクトの配置方法が似ていて我々的にはやりやすい
3.2014年からある開発方法なのでネット上の記事が豊富（わからないときにググりやすい)
4.まだStorybordで開発ができる人の方が市場価値が高い

* デメリット
1.もう参考書が販売されていない。

![スクリーンショット 2022-08-25 0.36.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/fa9254e3-1eb5-37c7-e388-09a623132db6.png)

### SwiftUI

SwiftUIは2019年頃に突如として現れた、オブジェクトの配置など**全ての工程をコーディングによって行う**手法です。
下のようなプログラミングでオブジェクトの配置、処理、画面遷移、レイアウトなどを行います。

* メリット
1.Apple社が激推ししている。
2.2019年以降、SwiftUIの参考書しか発売されていない。
3.もしかしたらこの先、SwiftUIでゲーム制作やWeb制作など、他の開発ができるようになる可能性がある。
4.そうなるとこの先に重宝されるのはSwiftUIができる人になる？

* デメリット
1.まだ参考にすることができる資料が世の中に出揃っていない。
2.ムズい
![スクリーンショット 2022-08-25 0.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/4330394d-ae01-12b0-9352-65d8955ea812.png)

という訳で、これからここではStorybordでiOSアプリを開発していく方法を記していきます。

理由は三つで

1.Storybord->SwiftUIの順番で学んだ方が知識の取りこぼしがなくて済むから。
2.Storybordの方が初学としてはとっつきやすいから
3.僕ができるから

です。
それでは、HelloWorldを出力させてみます。

# HelloWorldを出力させる
## プロジェクトを作成する。
まずはXcodeを起動します。
Create a new Projectを押して、下の画面が出てきたら**iosのApp**を選択してください。
![スクリーンショット 2022-08-25 0.53.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/3f957660-598d-af45-f098-d12fb653495d.png)

次の画面では、productnameをHello Worldに、**InterfaceはStorybord**、languageはSwiftを選択してください。
Team,Organization Identifierはマジでなんでもいいです。下のチェック二つは外します。
![スクリーンショット 2022-08-25 0.56.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/a4aea331-cc04-7a73-838e-be757b3492ad.png)
できたら、Nextを押します。
次の画面が出てきたらプロジェクトの作成成功です。
![スクリーンショット 2022-08-25 1.00.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/2a0ffdab-b7da-ab1d-d37d-6072fc1449fe.png)

## Main.Storybordを開く

出てきた画面の左側にある**Main**というところをクリックしてみてください。
次のような画面が開くはずです。
![スクリーンショット 2022-08-25 1.03.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/eeeef8ec-97e9-7afa-7783-39ea1ad39d8c.png)
これがアプリを開発するインターフェース（触るとこ）になります。

この左側のエリアのことを**Navigation Area**と言います。
AppDelegate->アプリのライフタイムイベントを管理します。アプリが閉じられそうになった時、閉じられた時、、などの処理を作るためのクラスが用意されています。
SceneDelegate->AppDelegateが元々になっていたScene周りの管理をします。最近できました。
**ViewController**->Mainのプログラムです。
**Main**->一番最初の画面です。
Assets->アイコンとか作るときにここに画像を登録します。
LaunchScreen->アプリが立ち上がった時に出てくるやつです。
info->infoはinfo.

今大事なのは**ViewContoroller**と**Main**です。

## Labelを出す。

右上にある+ボタンを押します。
すると、オブジェクトを検索することができる画面が出てくるので、そこで**Label**と検索してください。
Labelが出てきたらStorybordにドラッグ&ドロップします。
![スクリーンショット 2022-08-25 1.13.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/c1b8d353-5f60-8f4b-c42e-38501d4d8ef4.png)

こんな感じになっていれば成功です。

![スクリーンショット 2022-08-25 1.16.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/60f9e458-2ff3-1b70-85f2-0ddb1d17fa35.png)

次に画面右側をみます。
ここでUIの情報を書き換えたりすることができます。
下の画像の赤丸で囲んであるところHelloWorldに変えてみてください。StorybordのLabelの表記が変わるはずです。
![スクリーンショット 2022-08-25 1.16.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/0ef45640-ce1e-e83c-2cc5-54494e5ad31c.png)

↓

![スクリーンショット 2022-08-25 1.19.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/29d2c2cc-2ee2-5f2a-f5c4-8b76f3895fd5.png)
その下のFontを適当な大きさに変えてみてください。
これで一旦はHello Worldを表示させることができました。

## プログラムでLabelを変更する

と、これでは簡単なのでプログラムでLabelを変更します。Hello Worldに変えたテキストをLabelに戻しておいてください。

下のバーを押した状態で**cotrol+option+command+Enter**を押します。
![スクリーンショット 2022-08-25 1.23.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/661faf8d-5566-6ea9-713d-4bdb6aa098f9.png)

そうすると画面がに分割され、下のようにプログラム画面が開かれると思います。
これが**ViewController.swift**です。
![スクリーンショット 2022-08-25 1.25.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/4256c26f-9aa4-726f-49fb-1ee694228bb0.png)

今開かれたプログラムが、元々用意されているMain.storybordが持っているプログラムになります。
ここに、このStorybordを変化させるプログラムを記述していきます。

Labelを選択し、**controlを押しながら**10行目と11行目の間にドラッグ&ドロップします。(これ写真撮りにくかった)
名前をどうするか聞かれるので、次のようにlabelとかにしておきます。
![スクリーンショット 2022-08-25 1.30.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/93704563-c6cb-1e75-aab4-4cd337374cc8.png)

これが終わると、コードは下のような画面になります。

```swift
//
//  ViewController.swift
//  HelloWorld
//
//  Created by Asahi Okuyama on 2022/08/25.
//

import UIKit

class ViewController: UIViewController {

    //これが追加される。
    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}
```

一行ずつ説明すると、、

```swift
import UIKit
```

これがないと Storybord動きません。

```swift
@IBOutlet weak var label: UILabel!
```

labelという変数でUILabelと紐付けしています。

```swift
override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
```
これはこの画面がロードされときに一度だけ呼ばれる関数です。UnityのStart関数だと思えば大丈夫です。

このコードに次のように付け足します。

```swift
//
//  ViewController.swift
//  HelloWorld
//
//  Created by Asahi Okuyama on 2022/08/25.
//

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var label: UILabel!
    
    override func viewDidLoad() {
        //これを追加する///
        label.text = "Hello World"
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }


}
```
意味は、labelのテキストHelloWorldに変える、です。

## 端末による位置の差異をなくす

このまま実行しても良いですが、iphoneにはいろいろなサイズがあるわけで、それによってテキストの場所が変わってしまうのはあまりよろしくありません。
なので、テキストの位置を決めます。

右下のこのボタンを押して、下のようにHorizontally in ContainerとVertically in Containerにチェックを入れます。
それぞれ、x軸とy軸を中央にする、という意味です。こうすることで、 Labelがどの端末でも中央に表示されることになります。
![スクリーンショット 2022-08-25 1.54.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/165fdf61-5d44-7b36-5509-89be4f72510e.png)

## 実行する。
左上の再生ボタンを押します。
そうするとSimulatorが立ち上がります。
次のようにlabelが変更されていたら成功です。(最初真っ白の時間が若干長いけどしばらく待つと出てきます)
↓こんな感じ
![スクリーンショット 2022-08-25 1.58.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2442087/19054eea-b5aa-e2c3-944e-bae9f8497bbd.png)

これで最初のHello Worldの出力はおしまいです。

次はボタンを押したらテキストが変わるようにします。