社畜系WEBエンジニアの消耗戦

読者です 読者をやめる 読者になる 読者になる

社畜系WEBエンジニアの消耗戦

修羅の国でせっせと働く社畜系WEBエンジニアのブログ

【詳細!Swift3】SwiftでHello Worldする

毎度お馴染み、Hello Worldをやっていきます。ぶっちゃけ既に既存プロジェクトのソースを追っかけまくっているので、Hello Worldくらいは全然できますが、一応教科書どおりにこなしていきます。もしかしたら知らない部分もあるかもしれないしね。

新しくプロジェクトを作る

ここから作ります。

f:id:nabeen919:20161112231856p:plain

初心者な僕はSingle-Page Application。

f:id:nabeen919:20161112231931p:plain

設定はこんな感じ。

f:id:nabeen919:20161112231959p:plain

こんなのができた。

f:id:nabeen919:20161112232301p:plain

ちなみにこの状態でもビルドは出来ますが、画面にはなんにも表示されません。

オブジェクトを配置する

このHello Worldでは、ラベルとボタンを配置して、ボタンを押したら背景色が変わるアプリを作ります。なんかものすごく簡単そうな響きがしますね!

ラベルを配置する

Main.storyboard上にLabelを配置します。テキストはそうですね、Hello Worldにでも変えましょう。

f:id:nabeen919:20161112233047p:plain

あ、ちなみにiOSの開発ではこういったUI系のオブジェクトは基本的にStoryboardなどのUIで配置します。もちろんコードでも生成できますが、UIで作った方がサクサク作れるかな。。コードで書いたら結構冗長になっちゃいますし。僕はこれまでこういうGUIでViewを作るっていう経験が全くなかったので最初は違和感しかなかったですが、今はもうすっかり慣れちゃいました。使いやすいかどうかは別にして。

ボタンを配置する

同様の手順でボタンを2つ配置します。一つは背景色を緑にするボタン、もう一つは白にするボタンです。

f:id:nabeen919:20161112233253p:plain

ViewControllerに紐付ける

さあ、ここからが本番だぜ。

まずは右上にある、丸い輪っかが2つあるアイコンを押してみよう。そうすると、今開いているViewに紐付けられたViewControllerが表示される。ここではViewController.swiftが開く。

f:id:nabeen919:20161112233919p:plain

で、ボタンをcontrolを押したままコード部分にドラッグしよう。そしたら「どういう接続する?」的な感じで聞かれるので、画像のように入力すればOKだ。greenのボタンをtapGreen、whiteのボタンをtapWhiteにしてくれよな!

f:id:nabeen919:20161112234321p:plain

コードを書く

画面の色を変更するコードは以下だ。簡単だろ?

@IBAction func tapGreen(sender: AnyObject) {
    self.view.backgroundColor = UIColor.greenColor()
}

@IBAction func tapWhite(sender: AnyObject) {
    self.view.backgroundColor = UIColor.whiteColor()
}

さすがというべきか、Xcodeは補完が結構優秀だ。なので、メソッドを全部覚える必要なんて全くなくて、なんか適当に打ってたらそれっぽいメソッドがサクサク出てくる。まあ使い方は結局調べることになるんだけど。

ビルドする

あとはビルドしてシミュレーターで確認しよう。

特にエラーもなく、起動できるはず。んで、それぞれのボタンが機能していたら、Hello Worldは見事クリアだ。おめでとう僕。

f:id:nabeen919:20161113000416p:plain

おわりに

StoryboardでUIを作って、ViewControllerに接続、ViewControllerに処理を書く一覧の流れが捉えられれば、このステップは十分だと思う。どんどん先に進んでいこう。