なぜ書くか
Swiftを最近学習し始めたのですが、
「まずXcodeも使った事がねえし、なにからすればいいんだ？」
「いきなり「ボタンをつけて」なんて書かれてもつけ方が分からねぇよ」
っていう状態に陥り、苦しかったので、僕のように情報収集よりも先に手を動かしてしまうような横着な方のために、
「これさえわかればまぁあとは調べたら少しずつは進めるんじゃ無いの？」
と、思えるような記事を書いてみたいと思います。
今回は例として「カウントアップアプリ」を作成してみます。
特定の数字になったらページ遷移をして、その特定の数字を次のページにも表紙するというのを仕様とします。
まだインストールされていない方は「Apple Store」から「Xcode」をインストールしましょう。
その１ 「インストールしてみて開いたもののこれどうやって開発始めるの？」
情報収集せずにいきなり作ろうとすると誰しもこの状態であると、僕は信じています。
イケイケが一番ですよ。素晴らしい。
この記事を見る横着なあなたはガンガン進めていきたいはずなので、必要な部分（僕がやったことある事）だけ抜粋してお伝えします。
まずApple Storeからインストールしたアプリを開くと、こんなのが出てくると思います。
この項目の中の一番上、「Create a new Xcode Project」をクリックしてください。
次に、こんなのが出てくると思います。
とりあえず、なにも考えず「ios」の「App」を選択し、「Next」を押しましょう。
僕自身結構悩んでしまったのですが、「Single View Applicationを選択して下さい」という情報が、結構調べるとヒットするのですが、そんなもんねーよとなった方もいらっしゃると思います。そういう際は「App」を選んでしまってなにも問題はありません。
「Next」を押すと次はこんなのが出てきます。
なんだかすごく面倒くさそうで、嫌いですねこういうの。まぁ意外とすぐに素っ飛ばせます。
このような感じで入力してください。（矢印のついてないところはマルパクリでOKです。）
細かい部分が気になってしまうなら、一度調べてみてください。
入力して「Next」をポチッと。
そうすると、どこのディレクトリ（フォルダ）に、プロジェクトファイルを置くかを選択する画面が出てくるので、自分の好きな場所に突っ込んでください。
ディレクトリを選ぶと、下記の画面に遷移します。
めでたしめでたし。
ここからやっと開発を始められます。
その2 「どこになにを書けばいいの？」
わかります。一緒に頑張りましょう。
まずはそうですね、UIから始めましょう。
画面左の、ディレクトリ一覧の中から「Main.storyboard」をポチッと。
すると、こんな画面が出てきたかと思います。
ちなみにですが、ビューを構築する上で、土台となる機種は画面左上の、左から四番目のボタンを押すといろいろ機種を変えられます。今回は「iPhone 12 Pro」にしようかな。（なんでもいいですよ）
この「Main.storyboard」上で、様々な要素を配置したり、画面遷移の流れを作ったり、本当に簡単に様々な事ができてしまいます。基本的にボタンを配置したりテキストをおいたりするのはここでやればいいと思います。
さて次に、ロジックを書いたり（今のところは）する場所ですね。
画面左側のディレクトリ階層の中から、「ViewController.swift」をポチッと。
するとこんなページが表示されたかと思います。
はい。ここに当面はロジックを書いていけばいいと思います。
ちなみに、この「ViewController」は画面一つにつき１ファイルが基本です。
その３ 「んで、ボタンやらラベルやらの、要素はどうやって配置するの？」
次にこれですね。「HTML&CSSを何処かに置くのかな？」なんて思っていましたがそんなことする必要もなかったです。
まず「Main.storybord」を開いて下さい。
そしてディスプレイ（iPhoneやらiPadやら）が表示されていると思いますので、ディスプレイをクリックしたのちに、画面右上の「+」ボタンをタップしてみて下さい。
するとこんな画面が出現したと思います。
あとはなんとこれをドラッグ&ドロップするだけなのです...超簡単でしょう。
ひとまず、ボタン二つとラベル一つを置いてみました。
その４ 「ラベルやらボタンやらのテキストや、見た目は、どうやって変えるの？」
はいそうですね。おっしゃる通りです。
実はXcodeでは、テキストの色だったり、背景色だったりをコードを一切書かずに簡単に変える事ができてしまいます。
まずはラベルのテキストやボタンの見た目を変えてみましょう。
先ほど追加したボタンの左側をタップして下さい。
下記のような画面が右側に表示されたかと思います。
まずは字が小さくて見にくいので、字の大きさを変えていきましょう。
字の大きさを変えるには、右側のサイドバーの中の、「Font」の数値を変えるだけです。
とりあえず、大きさは３０くらいにしておきます。
続いてテキストを変更します。
テキストを変更するのは、主に２種類の方法があり
要素をダブルクリックして、入力モードにしてから入力するか、右側のサイドバーで変更することもできます。
今回はサイドバーで変更してみます。（どちらの方法でも構いません）
今回は「+」という文字を入れました。
左側も同じ大きさにして、「ー」をテキストにしてみましょう。
このようになったかと思います。
Xcodeではこんなにいとも簡単に、テキストを変えたり、見た目を変化させたりできます。
その５ 「んで、カウントアップする数字をどうやってラベルに反映するの？」
さていよいよここから基礎の中でも特に大切な部分です。
UIを作成する上で、一切コードを書いていないが故に、ロジックをビューに反映するという事がイメージつきづらいのでは無いでしょうか？
ここでは実際に「＋」ボタンを押せばカウントアップ、「ー」ボタンを押せばカウントダウンするロジックを組み、それをラベルに反映させていきたいと思います。
それでは「Main.storybord」を開いて、ラベルとボタンが表示されているディスプレイをクリックして下さい。
そして下記のボタンをクリックして下さい。
そうすると、下記の画面が出現すると思いますので、「Assistant」をクリックして下さい。
すると上記のように、「Main．storybord」の画面とそれに対応する「ViewController.swift」が画面を二分し表示されたと思います。
今後は主にこの状態で作業をしていきます。
まず、カウントアップするためのロジックを書きたいのですが、今回作るカウントアップアプリは「＋」ボタンを押せばカウントアップし、「ー」を押せばカウントダウンするという仕様のため、まず双方のボタンのクリックをメソッド化しなければなりません。
まずクリックされた際に発動するメソッドの大枠を作成します。
ドラッグ&ドロップでクリックされた際のアクションの名前をつければOKです。
import UIKit
class ViewController: UIViewController {
//変数として「countNumber」を用意し「０」を代入
var countNumber = 0
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func countUpButton(_ sender: UIButton) {
}
}
これで「＋」ボタンを押された際に走る処理の大枠ができました。
＋ボタンと同じよう要領で「ー」ボタンにも「countDownButton」という名前をつけ大枠を作りましょう。
ここで一気にロジックを書いていきます。
分からない方は都度調べながら実装していって下さい。
import UIKit
class ViewController: UIViewController {
//変数として「countNumber」を用意し「０」を代入
var countNumber = 0
override func viewDidLoad() {
super.viewDidLoad()
}
@IBAction func countUpButton(_ sender: UIButton) {
//「＋」ボタンを押された際に走る処理
countNumber += 1
//ログに出力し確認する
print(countNumber)
}
@IBAction func countDownButton(_ sender: UIButton) {
//「ー」ボタンを押された際に走る処理
countNumber -= 1
//ログに出力し確認する
print(countNumber)
}
}
ここまでできちんと「countNumber」の値が増減しているか確認しましょう。
下記のViewをクリック
そして「Debug Area」の中の「Activate Console」をクリック
するとページ下部にフィールドができたと思います。ここにログが吐き出されます。
では早速シュミレーターを立ち上げ確認してみましょう。
画面上部の下記ボタンをクリックしてください。シュミレーターが立ち上がりますので少々お待ちを。
シュミレーターが立ち上がったら早速ボタンをクリックしてみましょう。
うまくいっていればログに「countNumber」の値が表示されるはずです。
バッチリ変数が増減してますね。
では次に本筋であるラベルに「countNumber」の値を反映させていきます。
まずは＋ボタンやーボタンのようにラベルも名前をつけViewControllerにつなげていきます。
ラベルを繋げる際の注意点として必ず「viewDidLoad()」メソッドよりも上に持ってくるようにしてください。
そして増減する「countNumber」の値を、「countNumberLabel」にはめ込んでいくロジックを書いていきます。
import UIKit
class ViewController: UIViewController {
//変数として「countNumber」を用意し「０」を代入
var countNumber = 0
@IBOutlet weak var countNumberLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
countNumberLabel.text = String(countNumber)
}
@IBAction func countUpButton(_ sender: UIButton) {
//「＋」ボタンを押された際に走る処理
countNumber += 1
//countNumberLabelに変数の値を代入する
countNumberLabel.text = String(countNumber)
}
@IBAction func countDownButton(_ sender: UIButton) {
//「-」ボタンを押された際に走る処理
countNumber -= 1
//countNumberLabelに変数の値を代入する
countNumberLabel.text = String(countNumber)
}
}
ここまでかけたら早速シュミレーターを立ち上げボタンを押してみましょう。
いかがでしょう。下記のようになれば成功です。
その６ 「ボタンを押してのページ移動ってどうやってやるの？」
これがですね、衝撃的に簡単です。
ではまずページ移動するためのボタンを作成します。
こんな感じで。色とかはマジでなんでもいいです。
次に移動先のviewを作成します。
ページそのものもこのようにドラッグ&ドロップで簡単に追加できます。
ここに次のページに遷移したことがわかるよう、ラベルをおきましょう。
こんな感じで。
では、ついに先ほど1ページ目に置いたボタンをクリックすると、2ページ目に遷移する流れを実装していきます
これがびっくりするほど簡単なのです。下記をご覧ください。
必殺ドラッグandドロップで終了です（笑）
早速シュミレーターで確認しましょう。
バッチリですねぇ（Xcode恐ろしや）
その７ 「じゃあ例えば、「カウントが１０になったらページ移動する」みたいなのはどうするの？」
ごもっともです。早速やりましょう。
まずはカウントが１０になったことを取得します。
先ほどの画面遷移は**「ボタンを押せば」**という単純な画面遷移だったためにボタンを次の画面に繋ぐだけで遷移できました。
しかし今回は、カウントが１０になった時になった時に遷移する、という少々複雑な条件のため先ほどとは少し違うやり方をします。
まずは画面と画面を繋ぎますが少し繋ぎ方は先ほどとは変わります。
デバイスの上部をクリックし、一番左のボタンの「View Controller」と表示されるボタンを「control」押しながら、ドラッグ&ドロップで繋ぎます。
これでいわゆる遷移の準備、道が整備できました。
次に、「countNumber」が１０になったことを取得します。
下記のように書いてください。
import UIKit
class ViewController: UIViewController {
//変数として「countNumber」を用意し「０」を代入
var countNumber = 0
@IBOutlet weak var countNumberLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
countNumberLabel.text = String(countNumber)
}
@IBAction func countUpButton(_ sender: UIButton) {
//「＋」ボタンを押された際に走る処理
countNumber += 1
//カウントが１０を超えた時に{}の中の処理が実行される
if countNumber >= 10 {
}
//countNumberLabelに変数の値を代入する
countNumberLabel.text = String(countNumber)
}
@IBAction func countDownButton(_ sender: UIButton) {
//「-」ボタンを押された際に走る処理
countNumber -= 1
//countNumberLabelに変数の値を代入する
countNumberLabel.text = String(countNumber)
}
}
上記の中で、
//カウントが１０を超えた時に{}の中の処理が実行される
if countNumber >= 10 {
}
この部分が新たに追加されました。
この中に画面遷移をする処理を、コードにして書いていきます。
その前にまずその道を識別できるよう道に名前をつけます。
「toNextViewController」という名前を道につけます。
さて、ついに「countNumber」が１０になった時に画面遷移をするコードを先ほどのif文の中に書いていきます。
コードは次のようになります。
//カウントが１０を超えた時に{}の中の処理が実行される
if countNumber >= 10 {
//下記一行を追加
self.performSegue(withIdentifier: "toNextViewController", sender: nil)
}
これでシュミレーターを立ち上げてカウントを１０にしてみましょう。
カウントが１０になったらページ遷移する動きが実現できていると思います。
その８ 「あれ？2ページ目のロジックはどこに書くんや！？ファイルってどうやって追加するの！？どうやってページとファイルを繋げるの！？」
はいではまずファイルを作っていきます。
下記の場所を、controlキーを押しながらクリックしてください。
そうするといろいろ選択肢が出るので、「New File...」を選んでください。
そうすると下記のような画面が出てくると思いますので、「Cocoa Touch Class」を選んでNextを押してください。
次にClass名を入力する画面が出てきますので好きなクラス名をつけてください。
私は「NextViewController」とつけます。
はいこれで2ページ目のファイルを用意することができました。が！これでは不十分です。
実はこのファイルまだ、先ほどのに遷移先のビュートは繋がっていないのです。
ですので実際につないでいきます。
Main.storybordを開いて、遷移先のページをクリックしてください。
すると右側にサイドバーが出てきますので下記のボタンをクリックしてください。
そしてその中のClassという欄に先ほど設定したクラス名を入力してください。
これで完了です。さあ繋がっているか確かめましょう。
2ページ目をクリックして...Assistantボタンをクリック！
先ほど作成したファイルが表示されれば完璧です！
その9 「ページ遷移する前のページのデータを次のページに表示したいときはどうするの？」
これ僕もかなり行き詰りましたし、やり方も結構多岐に渡るので、ここでは一つのやり方をご紹介します。
先ほどのカウントが1０になった時に画面遷移して次の画面にカウントを渡してみます。
まず、遷移先のページにラベルを配置し、データを表示するためのフィールドを用意します。
こんな感じでいいと思います。2桁表示の際のことも考え、少し横幅は広めに用意しましょう。
次に遷移先のページに、1ページ目からのデータを受け取るための変数を用意します。
import UIKit
class NextViewController: UIViewController {
//遷移元のページから値を受け取るための変数
var countNumber: Int?
override func viewDidLoad() {
super.viewDidLoad()
}
}
はいこれで受け取る準備はOKです。
次にラベルとControllerを繋げ、受け取った変数をラベルに表示できるようにします。
次に受け取った値を、ラベルに反映させます。
import UIKit
class NextViewController: UIViewController {
//遷移元のページから値を受け取るための変数
var countNumber: Int?
@IBOutlet weak var countNumberLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
//ラベルのテキストに値を反映させる
countNumberLabel.text = String(countNumber!)
}
}
これで遷移先の準備はOKです。
次に、遷移元のページに値を渡しながら遷移するコードを書いていきます。
ViewController.swiftを表示してください。
早速処理を書きます。
import UIKit
class ViewController: UIViewController {
//変数として「countNumber」を用意し「０」を代入
var countNumber = 0
@IBOutlet weak var countNumberLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
countNumberLabel.text = String(countNumber)
}
@IBAction func countUpButton(_ sender: UIButton) {
//「＋」ボタンを押された際に走る処理
countNumber += 1
//カウントが１０を超えた時に{}の中の処理が実行される
if countNumber >= 10 {
self.performSegue(withIdentifier: "toNextViewController", sender: nil)
}
//countNumberLabelに変数の値を代入する
countNumberLabel.text = String(countNumber)
}
@IBAction func countDownButton(_ sender: UIButton) {
//「-」ボタンを押された際に走る処理
countNumber -= 1
//countNumberLabelに変数の値を代入する
countNumberLabel.text = String(countNumber)
}
//追加したメソッド
//画面遷移をする際に呼ばれるメソッド
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
//値を渡したいコントローラーかチェックする
if segue.identifier == "toNextViewController" {
//遷移先のコントローラーをインスタンス化する
let nextVC = segue.destination as! NextViewController
//インスタンス化した遷移先のコントローラーの用意した変数に渡す
nextVC.countNumber = countNumber
}
}
}
最下部のメソッドが今回実際に値渡しを行うメソッドです。
遷移先のページをインスタンス化し、そのページの用意している変数に値を入れています。
では実際に値が渡っているかチェックしましょう。
しっかり遷移先にページが渡っていますね。めでたしめでたし
その10 「大体これで調べたら、進めそうです、最後に戻るボタンつけたいんだけど、どうすればいい？？」
戻るボタン。大事ですね。実装しましょう。
まずボタンを配置します。
はいこんな感じで。（かっこいい...）
では作成したボタンとControllerをつないでいきます。
いつものドラッグアンドドロップで。
この中に元のページに戻るためのコードを書いていきます。
追加するのは一行だけです。
dismiss(animated: true, completion: nil)
先ほどのメソッドの中に追記してください。
では挙動を確認しましょう。
戻る動き、そして、10を超えているカウントである限り変更されるたびに画面遷移する動きが実現できていますね。
まとめ
シンプルにめちゃくちゃ使いやすいですねXcode
初めはどうしても「調べたらロジックを組める段階」に持っていくまでが苦痛だったので、この記事を読み、僕のようにせっかちの方が、快適に開発を始められるようになることを願っています🙏