【＃3　背景変換アプリ】プログラムの中身を理解してみよう

こんにちは。Step App Schoolの小林です。
今回は、前回【＃2　背景変換アプリ】の解説編です。この回だけみてもおもしろくともなんともないので、前回のnoteを参考にしてアプリをつくってみてください。

1．注意「全部理解しようとしない」

最初からミもフタもないことを言うと、プログラム（コード）をすべて理解しょうとしないでください。どこかのスーパー天才が何十年もかけて考えたプログラムが、ライブラリ（プログラムの機能のかたまり）として公開されていることがあります。天才がせっかく考えてくれたことなので、ありがたく使いましょう。地下鉄の車両がどうやってできているのか、どうやって地下まで運んだのか理解していなくても地下鉄には乗れるように、プログラムも中身まで完璧に理解しなくても、どんな風に動くのかが分かれば使えます。
また、今はわからなくても、いずれ理解できるものもあります。ひとまず「ふーん、よくわかんないけどそうなのね」くらいの気持ちでいてください。

2．プログラムの全体を見る

今回のアプリのプログラム（コード）の全体は以下の通りです。

import UIKit

class ViewController: UIViewController {
   @IBOutlet weak var label: UILabel!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }
   @IBAction func tapGreen(_ sender: Any) {
       view.backgroundColor = UIColor.green
       label.text = "背景が緑色"
   }
   
   @IBAction func tapWhite(_ sender: Any) {
       view.backgroundColor = UIColor.white
       label.text = "背景が白色"
   }
}

ここでいちばん大事なことは「{」「}」です。下の画像のうち◯で囲んだ「{」「}」は、直前の文字「UIViewController」が機能する範囲を表しています。

つまり、この「{」と「}」の間にプログラム（コード）を書かないと動きませんし、「{」と「}」のどちらかがなくても動きません。冷蔵庫を例に考えてみましょう。

冷蔵庫が開け放しの状態では中身は冷えません。プログラミングも同じように、「{」か「}」のいずれかがない場合、どこまでを"冷やせば"いいのかわからないので機能しないのです。

また、どれだけ冷蔵庫の近くにおいても、冷蔵庫の中にモノを入れない限り冷えません。どれだけたくさんのコードを書いても、それが機能する範囲の中に書かないと動かないのです。

初心者は「{」と「}」をいい加減に取り扱ってしまうので、よく「このアプリはうごかない」となります。逆に「{」「}」を意識すると、エラーは少なくなると思います。

このような話をすると「{　}の位置が特殊すぎて違和感がある」と言われます。私も当初は違和感がありました。
でも、書いていると「この方がみやすい」ってわかってくるんですよね。あえて、普通の人が書くように書いた「{」「}」と比較してみましょう。

「{」「}」を横に描こうとすると、上の画面の右のようになります。そうすると文字を横に読む必要が出てきて、読みづらくなります。
一方、「{」「}」を縦に書いて中身も縦書きにすると上の画面の左側のようになります。こっちの方がみやすいですよね。プログラマーは、できるだけ文字をみやすくすることで、打ち間違いを減らして確認のための時間を短縮し、エラーやバグをなくそうとしてきました。「{」「}」の打ち方も、その過程で生まれたものだと思います。少しずつ慣れていきましょう。

3．自分で入力したコードを読み解く

「ViewController.swift」のフォルダに最初から書いてある部分はいったん無視してください。意味はあるのですが、この段階であれこれ説明をするとこんがらがります。「はじめからいろいろ書いてくれて親切だよね」くらいに構えてください。

プログラム（コード）の以下の部分をみてください。

部品の「Button」を「ViewController.swift」と接続した際に、自動的に「@IBAction func...」と入力されました。中にある2行について解説します。まずこれは「『tapGreen』と名前をつけたボタンを押したとき、{ }の中を動かします」という意味です。

人間の場合は「お水を飲むからそれとって」と言えば、察してコップやグラスを手渡しますが、コンピュータはそうはいきません。コップに「コップ1号」などと名前をつけてそれを呼び出す必要があります。そこで今回、背景を緑色にするボタンを「tapGreen」と名付けました。もちろん、「greenButton」など他の名前をつけてもOKです。

部品などに名前をつける場合は、すべてアルファベットでつけます。途中で半角アキにしたりもできません。「tapgreen」としてもOKですが、人間が読みづらいので、単語の冒頭のみ大文字にして「tapGreen」とつけています。Swiftのプログラマーはわりとこの書き方をしているのでマネしましょう。

次の行をみてください。「view.backgroundColor = UIColor.green」と書いてあります。

ここで出てくる「＝」は、普段の計算でつかうものとは意味が違います。ここでの「＝」とは、「右辺（＝の右側）の処理をしたものを、左辺（＝の左側）に代入する」という意味です。つまりここでは「UIColor.green」（見た目を緑色に変える）という動作を、「view.backgroundColor」（背景色の見た目）に代入しているという意味です。

同様にその下の行「label.text = "背景が緑色"」をみてみましょう。

同じように、右辺の「"背景が緑色"」という文字を、左辺である「label.text」に代入しています。ここでいう「label」とは、そう自分で名付けをした「label」です。

では「"」「"」とは何でしょう？　これは「文字を文字として表示するための記号」です。

いきなり全然関係なさそうな話をします。学校の作文の時間、先生が来ずに「自由」と書かれていたらどうしますか？

私はかつて悩んだことがあります。テーマを"自由"に選んで書いていいのか、それとも「自由とはどういう意味か？」について書くのかわからなかったからです。

コンピュータに対しても同様です。画面に「3＋5」の式を表示するのか、それとも計算結果の「8」を表示するのかわかりません。そこで、文字として表示する場合は「"」「"」（ダブルクオーテーション）で囲むというルールになっています。

次のボタン「tapWhite」もおなじです。「view.backgroundColor = UIColor.white」とは、右辺にある「UIColor.white」（見た目を白色にする）というものを、左辺の「view.backgroundColor」（背景色の見た目）に代入しています。次に、「label.text = "背景が白色"」は、「"背景が白色"」という文字を、ラベルの文字に代入しています。

4．まとめ

最初のアプリをつくるときに覚えてほしいことは、以下の3点です。

・「{」「}」の位置と、ヌケ・ダブリを気にする
・「{」「}」は縦に書くので、それに慣れる
・「＝」とは、右辺を左辺に代入するという意味

「背景色の見た目を変えるとき、どこでview.backgroundColorって書くって、誰が決めたんだ」「UIColor.色で見た目を変えるってどこに書いてあるんだ」と言ってくる方は意外に多いです。グーグルで「Swift　背景色」と検索すると出てきますので、それで学びます。冒頭にも書きましたが、今の時点ですべてのアプリ開発機能を覚える必要はありませんし、理屈をくわしく考えなくてもいいです。それよりも、何も参考にしないでもこのくらいのコードがかけるように練習することの方が大事です。そのうち必ず理屈がわかってきます。

5．ちょっと改良してスキルUP！

解説を読んだら、ちょっとだけプログラム（コード）を書き換えてみましょう。左側のボタンを押したら背景が赤に、右側のボタンを押したら背景がオレンジに変わるように書き換えてみてください。

できましたか？　解説を読んで理屈がわかると改良ができると思います。改良ができたら、この回の理屈は理解していると思ってよいでしょう。わからなければもう一度読み返してみてください。一応、解答例も下記に掲載しておきます。

Step App School – つくる、うごく、だから楽しい。

import UIKit

class ViewController: UIViewController {
   @IBOutlet weak var label: UILabel!
   
   override func viewDidLoad() {
       super.viewDidLoad()
       // Do any additional setup after loading the view.
   }
   @IBAction func tapRed(_ sender: Any) {
       view.backgroundColor = UIColor.red
       label.text = "背景が赤色"
   }
   
   @IBAction func tapOrange(_ sender: Any) {
       view.backgroundColor = UIColor.orange
       label.text = "背景が橙色"
   }
}