こんにちは。Step App Schoolの小林です。
前回作成した「画像切替アプリ」の中身を理解していきます。
前回のプログラムをまだ作っていない方、つくったけどうまく動かない方はもう一度作ってみましょう。

1．アプリを微修正する

前回作ったアプリは、画像を切り替えるものです。

「Dog」を押したらイヌが、「Cat」を押したらネコの画像が表示されました。

このアプリには少しおかしなところがあります。以下の画像をみてください。

左端のフォルダ一覧にある「Main.storybord」をクリックしてみましょう。私はXSのサイズでつくったので一見、問題ないように見えます。しかし、デバイスを他のものに切り替えてみましょう。

これは4Sのサイズです。「Segmented Control」の位置がおかしなことになっています。これは、「Segmented Control」の位置を決めなかったために起こる不具合です。気がつきましたか？　さっそく直してみましょう。

「Segmented Control」の部品をクリックしてから、上記の整列マークを選択します。その後「Horizontally in Container」の数値が0であることを確認してから、「Add 1 Costraint」をクリックします。これで、水平方向には画面の中央に位置することが確定しました。

もう一度「Segmented Control」の部品をクリックしてから、上記の制約マークを選択します。画像の部分の「I」マークをクリックして実線にして、その値を20に設定します。これは、下の部品（つまり画像が入っているImageView）からの距離を「20」で固定する、という意味です。

成功すると、SegmentedControlの周りの線が青くなります。これで正しいのかどうか、左下のDeviceでiPhoneの画面を切り替えて確かめましょう。

私の場合、iPhone4SとXS MaxのDeviceを選んでチェックします。すごく小さいタイプと大きいタイプを見比べて、おかしくなければOKとしています。

逆に、整列や制約の仕方を間違えた場合は、以下のようにしてください。

「Main.storyboad」や「ViewController.swift」などのファイルが置いてある場所と、iPhoneの操作画面があるエリアの間に、いま画面に置いてある部品一覧が書いてあるエリアがあります。ここには、部品の一覧とその状態（プロパティ）が記録されています。ここにある「Constraints」が制約・整列の指示です。「▶︎」の部分をクリックして「▼」になると、詳しい制約・整列が表示されるようになります。このうち、修正したいものを選んでMacのdeleteキーを押して、まず削除します。それから、あらたな制約・整列を入れるようにしましょう。

気をつけなければならないのは、直接、制約・整列の数値を直してもうまくいきませんので、注意してください。

2．コード全体をみてみよう

コード（プログラム）全体をみてみましょう。注目してほしいのは四角で囲んだ部分です。

12行目の「＠IBOutlet weak~」で始まる部分は、画像を入れておく部品「Image View」に「imageView」という名前をつけただけです。そのほかは最初から書かれているコードなので、ここでは無視しましょう。

では、「＠IBAction func~」ではじまる部分をみてみましょう。

ここでも入れ子構造になっています。最初の文は「『segChange』という名前がつけられた『Segmented Control』を押したら、以下の中身を実行してください」という意味です。Segmented Controlとは「Dog」「Cat」と書いてあるボタンのことでしたね。つまり、このスイッチのようなものを切り替えたら、何かが起こるよと書いてあるのです。

では、さらに「if(sender.~」と書いてある中身をみてみましょう。

前半の部分は「もしSegmented Controlの順番が0のとき、sampleDog.jpgという名前のファイルをimageViewという箱の中に入れてください」と書いてあります。Segmented Controlの順番が0というのは、ボタンの左側「Dog」と書いてある方を指します。コンピュータにおける順番の読み方は「0、1、2…」と0からはじまるルールでしたね。

後半の部分は「そうでない場合でSegmented Controlの順番が1のとき、sampleCat.jpgという名前のファイルをimageViewという箱の中に入れてください」と書いてあります。順番が1ということは、Segmented Controlの右側「Cat」と書いてある方を選んでいるということです。

これで、大まかな意味は理解できたかと思います。

3．細かな文法を1つ覚えよう

よりこまかな文法について1つだけ覚えてください。「＝」と「＝＝」の違いです。プログラミングの世界では、日常的に使っている「＝」は「右辺を左辺に代入する」という意味でした。

では「＝＝」はどういう意味でしょう？

それは「左辺と右辺が完全に一致する」という意味です。今回書いたコードでいうと、「Segmented Controlの順番（Index）が、0と完全に一致したとき」という意味になります。つまり「＝＝」は、わたしたちが日常的に使っているイコールに限りなく近いと思ってください。

4．注意点　「細かい文法を無理して覚えない」

他の文法をみていて「こんなに細かい文法を覚えられるだろうか」と不安になる人は多いと思います。すべて決まっている文法なので、何度か使うと覚えます。大事なことは、一度にすべてを覚えようとしないことです。コードを書いていくうちに、覚えていないけれども書き方に慣れていく部分もあります。

最初のうちは、細かい文法を無理に覚えようとせず、プログラミング独特の構造だけに注目しましょう。構造がわかれば、プログラミングができるようになります。

過去に書いた記事を以下に挙げますので、まだご覧になっていない方はぜひどうぞ。

【＃1 プログラミングの準備】
【＃2 背景変換アプリ】カンタンなコードを書いてみよう
【＃3 背景変換アプリ】プログラムの中身を理解してみよう
【＃4 Swift　iPhoneアプリをつくる流れを理解しよう】
【＃5　画像切替アプリ】お気に入りの写真を表示しよう