[Step3]部品を配置して紐付けしよう！

今回は新規プロジェクトを作成して、まず覚えておきたいポイントを紹介します！
まだ新規プロジェクトを作成していなければ[Xcode]新規プロジェクトを作成しよう！
を参考に作成してみて下さい。
今回はボタンを押したら表示が変わる簡単なアプリを作ってみます！

部品を配置しよう！

まずは部品を配置します！
今回はよく使うbutton(ボタン)を配置してみます！
storyboardを開いた状態から、①をクリック。
②の検索窓にbuttonと入力すると③にbuttonが表示されるのでそこをドラッグ&ドロップするだけOK！
次に文字を表示させるLabel(ラベル)を配置します。
手順はボタンの時と同じです。

Labelの文字を「こんにちは！」に変更します。
配置したLabelをダブルクリックすると文字を変更できるので「こんにちは！」と入力して下さい。
こんな感じでボタンとラベルが表示されていればOKです！

ボタンとラベルを紐付けよう！

今のままだとただ部品を配置しただけで、プログラムを書いても部品と繋がっていない為に動きません。
なのでプログラムを書いて制御できるようにViewController.swiftと言うコードを書く場所と繋げてあげます。

まずViewController.swiftを開きたいので画像の通り①をクリックしてナビゲーターエリアを表示します。
次にoptionを押しながらViewController.swiftをクリック！
すると画面が二画面になってstoryboardエリアとViewController.swiftエリアに分かれます。

次にラベルを紐付けます。
と言っても簡単で、ラベルを選択してcontrolを押しながらViewController.swiftのエリアにドラッグ&ドロップします。
すると小窓が現れるので、画像のように設定して下さい。
nameの部分は任意の名前を入力します。
今回はわかりやすくLabelにしました。

ボタンも同じように設定します。
注意して欲しいのが、Connectionの部分はActionにします。

ViewController.swiftが下の画像のようになっていればOKです！

コードを書こう！

それぞれの部品の紐付けが終わったので、いよいよコードを書きます。
今回はボタンを押したらラベルの文字が切り替わるだけなので
label.text = “hello!”と書くだけです！
3行目と5行目の間にボタンが押された時の処理を書きます。
今回はボタンを押した時に、先ほど紐付けたラベルのテキストをhello!に変更するようプログラムしました。

   @IBOutlet weak var label: UILabel!

    @IBAction func btn(_ sender: Any) {
        label.text = "hello!"
    }

シュミレーターを起動して確認して見よう！

では最後にちゃんと動くか確認したいのでシュミレーターを起動して確認します！
右側の矢印で好きな機種を選択した後、左側の矢印の再生ボタンをクリックするとシュミレーターが起動します！
最初は少し時間がかかるので少し待ってみて下さい。
どうでしょうか？うまくできましたか？

他にも色んな部品があるので全部覚えると言うよりアプリを作りながら覚えていけば良いと思います！
ありがとうございました！