第02講 カウンター

印刷を御希望の方はページ一番下の「印刷用ページ」より印刷してください。
PDFファイルとして保存したい場合も「印刷用ページ」より保存できます。
見出しに「★」マークがついた箇所は説明動画がございます。

目次

  1. 1 第2講のポイント
  2. 2 はじめに
  3. 3 プロジェクトの立ち上げと設定
    1. 3.1 新規プロジェクトの立ち上げ
    2. 3.2 アプリの設定
      1. 3.2.1 外部素材のインポート
    3. 3.3 アイコン設定とサポートするデバイスの向きの設定
    4. 3.4 Bundle display nameの設定
  4. 4 画面のデザイン
    1. 4.1 Autolayoutの無効化
    2. 4.2 背景色の変更
    3. 4.3 ラベルの配置
    4. 4.4 ボタンの配置
    5. 4.5 異なる画面サイズの対応
  5. 5 変数と単純な条件分岐
    1. 5.1 変数
      1. 5.1.1 変数とデータ型
      2. 5.1.2 インスタンスとは
      3. 5.1.3 変数の宣言とメモリーの管理
      4. 5.1.4 変数への値の代入と起動時の初期処理
      5. 5.1.5 加算処理と文字列の取り扱い
    2. 5.2 減算処理と条件分岐
    3. 5.3 加算処理と減算処理の特殊な表記
    4. 5.4 ユーザーによる値の初期化
  6. 6 UI画面とコードの関連付け
    1. 6.1 UIButtonとIBActionの関連付け
    2. 6.2 UIButtonの挙動と関連付け
    3. 6.3 UILabelの関連付け
    4. 6.4 ビルドと動作試験
  7. 7 高度な条件分岐
    1. 7.1 多段階の条件分岐
    2. 7.2 複数条件を含む条件分岐
    3. 7.3 高度な条件分岐を用いたカウンターの改良
      1. 7.3.1 ラベルの文字色の変更
      2. 7.3.2 場合分けに応じた文字色の変更
      3. 7.3.3 さらなる工夫
  8. 8 まとめ

第2講のポイント

第2講のポイント

  • 変数（整数・文字列）やメモリー管理の概念の理解する
  • 変数への値の代入や、簡単な計算（足し算・引き算）を理解する
  • 複数条件を含む条件分岐や比較構文を理解する
  • UILabelやUIButtonに代表されるUIオブジェクトの概念を理解する

はじめに

前回の「My Very First App」でXcodeの基礎を習得することはできたでしょうか。第2講では、いよいよプログラミングで最も重要な概念である変数や条件分岐を扱っていきます。

第2講の課題アプリは「カウンター」となります。イベント会場等で人数を数えたりする際に使われる道具をiOS上で再現したものであり、ボタン操作によって画面上の数字が増減する実にシンプルなアプリです。



それでは、早速開発を始めて行きましょう！ 

プロジェクトの立ち上げと設定

新しいアプリを作る際は、まず、新規プロジェクトを立ち上げとアプリの設定を行います。

新規プロジェクトの立ち上げ

第１講と同じ要領で、新規プロジェクトを立ち上げます。その際、使用するテンプレートは「Single View Application」となります。
Product Name Counter
Company Identifier com.rainbowapps
Device Family iPhone
Use Storyboard チェックを入れる
Use Automatic Reference Counting チェックを入れる
Include Unit Tests チェックを入れる


アプリの設定

新規プロジェクトを立ち上げたら、アプリの設定を行います。ここで、アプリのアイコンやアプリの表示タイトル（Bundle Display Name）、サポートするデバイスの向き（Device Orientation）を以下のように、設定します。

外部素材のインポート

今回使用する外部素材ファイルを一気にインポートしてしまいましょう。


今回使用する素材は以下の通りです。インポートの詳しいやり方については、第１講の「3.2.1」を参照してください。

 icon.png  アイコン画像
 plus.png  「増やす」ボタン用画像
 minus.png  「減らす」ボタン用画像
 reset.png  リセットボタン用画像




アイコン設定とサポートするデバイスの向きの設定

素材のインポートが完了したら、Project Editorを開き、アイコンをRetina Displayと書かれたエリアの上にドラッグします。
サポートするデバイスの向きとアプリの名前は以下の通り設定します。


Bundle display nameの設定

アプリの表示タイトルを決めている設定項目「Bundle Display Name」を変更します。
Project Editorの「info」タブをクリックして「Bundle Display Name」の項目を次のように変更していきます。
 Bundle Display Name  カウンター






画面のデザイン

Autolayoutの無効化

画面レイアウトを3.5インチ（iPhone4S以前）と4インチ（iPhone5以降）に対応させるための設定を行います。
まずはXcode4.5からデフォルトで有効になっているAutolayoutを無効にします。
※Autolayoutはまだ不安定ですので本講座はAutolayoutを無効にして画面デザインを行っていきます。
下記のように①View Controller全体を選択し、②「File Inspector」に変更して、③「Use Autolayout」のチェックを外してください。



背景色の変更

まず、画面の背景色をデフォルトの白から黒へ変更します。ナビゲーターエリアからMainStoryboard.storyboardを選択し、Interface Builderを立ち上げます。一度View上をクリックした後、Attributes Inspectorを開き、Backgroundの色を「Black Color」に変更します。


ラベルの配置

次に、カウントする際の計上値を表示するためのUILabelを用意します。ライブラリーエリアからLabelを選択し、画面上に配置します。配置したラベルを一度クリックした後、Attributes Inspectorを開き、フォントや文字色等のを好みのように設定します。最後にラベルをダブルクリックし、初期値を「0」とします。なお、ここで設定したラベル初期値はコード上から変更可能となります。



このようにUIオブジェクト（部品）の見た目や大きさなどを動的にコードから変更するためには、コード上で宣言する当該部品（UILabel、UIButtonなど）のインスタンスと部品そのものを紐付けする必要があります。その手法は後ほど詳しく解説します。

ボタンの配置

ラベルの次は、カウント数を増減させたり、初期値である「0」に戻したりするためのUIButtonを準備します。My Very First App同様、ライブラリーエリアからRound Rect Buttonを選び、3つのボタンを以下のように配置します。



このままでも、アプリの動作としては問題ないですが、やはり見た目が悪いですよね。そこで、配置したRound Rect Buttonを独自の画像に置き換えます。ボタンを一度クリックした上でAttributes Inspectorから「Type」と書かれたプルダウンをクリックします。



プルダウンが開いたら、「Custom」を選択します。今後、任意の画像をボタンとして用いる際は、ボタンの「Type」として「Custom」を選ぶことになります。次に、ボタンに用いる画像を選びます。ボタン用の画像は「Image」と書かれたブルダウンの中から、該当するものを選択します。なお、ここで表示されるのは、あらかじめインポートした外部素材となっています。




異なる画面サイズの対応

3.5インチ及び4インチ画面にて画面のレイアウトが崩れないよう対応していきます。
まずLabel要素を選択した状態で「Size Inspector」を選択しAutosizingの箇所を上の部分だけ赤色実践になるように変更します。
これでLabel要素が上とセンター揃えで固定されました。


次に３つのボタン要素を選択した状態で先程と同様に「Size Inspector」を選択してAutosizingを下だけ赤色実線になるように設定します。これで3つのボタンが画面の下で固定されました。


これで今回の異なる画面サイズの対応は完了です。Interface Builderの画面下にある下記赤色の矢印をクリックすると画面が3.5インチ、4インチに切り替える事ができますのでそれぞれの画面の表示確認をする事ができます。



これで画面デザインは完了です。
今回配置した3つのボタンは、それぞれ「増やす」、「減らす」、「リセット」の役割を持つことになっています。同じ要領で「増やす」には「plus.png」を、「減らす」には「minus.png」を、そして「リセット」には「reset.png」を割り当てます。全て正しくできた場合は、以下のような画面になるはずです。作業が完了したら、保存を忘れないようにして下さい。


変数と単純な条件分岐

このセクションでは、変数や条件分岐等についての解説を行うとともに、実際の処理の実装を行ないます。

変数

まずは、実際にコードの記述から行なっていきます。My Very First Appの時と同様、今回改変するコードのファイルも1つだけです。ナビゲーターエリアから、「ViewController.m」を選択し、以下のように書き換えます。

ViewController.m

 【変更前】

@implementation ViewController

  ↓

【変更後】

@implementation ViewController{

    

    // 合計値を管理する「変数」

    int count;

    

    // ラベル用の文字列を管理する「インスタンス」

    NSString *countLabelText;


    // ラベルの「インスタンス」

    IBOutlet UILabel *countLabel;

    

    // ボタンの「インスタンス」

    IBOutlet UIButton *plus;

    IBOutlet UIButton *minus;

    IBOutlet UIButton *reset;    

}

変数とデータ型

変数とは、いわば、データを一時的に蓄えておくための「箱」のようなものです。プログラム上でやり取りされる様々データは、このような変数に格納されることによって、様々な処理が行われるようになります。

プログラムが実行される際は、ソースコードに記述されたとおりに、コンピュータのメモリー上にデータを格納するための変数が確保されます。その後、CPUはメモリー上に確保された変数から様々なデータを読みだし、処理や演算を施した上で、その結果を再び変数に保存します。コンピュータを購入する際、メモリーの容量（例：4GB）を参考にする方も多いかと思いますが、データを一時的に保存する変数を確保することが、メモリーの大きな役目となっています。

通常、みかんを入れるためにはみかん箱が、牛乳をいれるためには牛乳瓶がそれぞれあるように、変数も格納するデータに応じて様々な形や大きさがあります。例えば、整数を格納するためには「int」型の変数（箱）を用います。このような変数の型はデータ型と呼ばれ、種類に応じて大きさも異なります。プログラムを記述する上で、頻繁に使用するデータ型とその大きさと以下に示します。



 データ型 データの種類  大きさ  表現できる値の範囲 
 int 整数  4Byte  -2147483648〜2147483648 
 float 小数  4Byte  およそ10-38～1038(有効数字7桁)
 double 小数  8Byte  およそ10-308～10308(有効数字15桁)


ここで、変数の宣言の仕方を見ていきたいと思います。コード上の以下の部分に注目してみてください。ここで宣言されている「count」という変数は、整数を格納するための「int型」の変数であるこということがわかります。なお、行末に「;」（セミコロン）がついていることにも注目してください。Objective-Cの場合、全ての命令文の終わりには「;」（セミコロン）が必要となります。

 // 合計値を管理する「変数」

int count;

インスタンスとは

次にインスタンスについて解説します。インスタンスとは、オブジェクトクラスに根ざした変数のようなものです。オブジェクト思考、及びクラスやインスタンスに関する詳細は第4講で解説しますが、現段階では少し特殊で「高機能なデータ型の変数」として認識しておいてください。

このコードで扱われているインスタンスの種類（データの型）には以下の3つがあります。

 NSStringクラス型  文字列を扱う（Objective-C固有の型）データ型
 UILabelクラス型  UI画面上のラベルを管理するデータ型
 UIButtonクラス型  UI画面上のボタンを管理するデータ型

C言語では、文字を扱うためのデータ型としてchar型の変数が用意されています。しかし、iOSが用いるObjective-Cはより簡単、かつ便利に文字列を扱うことのできるNSStringというクラスを装備しています。今後、iOSプログラミングを進めていく上で、文字列を扱う場合、特に断りの無い限り、このNSStringを用いることとします。

また、今回のコードでは、UILabelやUIButtonを宣言する際、先頭に「IBOutlet」と記述されていていることが見て取れます。この「IBOutlet」は、該当するインスタンスが「Interface Builder上のオブジェクトである」ということ明示するものです。UILabelやUIButtonで管理するボタンやラベルがStoryboard等に配置したオブジェクトである場合、必ずこの「IBOutlet」を先頭に記述する必要があります。

変数の宣言とメモリーの管理

変数をプログラム内で使用するためには、その変数を使うことを事前に「宣言」する必要があります。この宣言という作業を行うことで、その変数を保存するためのメモリー領域が確保されます。一方で、宣言後に手動でメモリーを確保する必要がある場合もあります。

特定の変数を宣言した後、手動でメモリーを確保する必要がある場合があると述べましたが、確保されたメモリーをしっかり管理する必要があります。なぜなら、メモリーはデバイス全体で共有するものであり、専有することができないからです。実世界で「共有物を借りて使い終わったら、しっかり返す」という理屈があるかと思いますが、メモリーにも同じことが言えます。メモリーでも「借りたら返す」を徹底しない場合、アプリが異常終了するなどの現象が引き起こされます。

幸い、iOS 5 SDKから、メモリー管理を格段に手軽にする手法が取り入れられました。それは「Automatic Reference Counting（以下ARC）」という機能です。詳しい原理は省きますが、ARCはアプリとは独立した、メモリーの管理人のようなものです。その管理人が、常にそれぞれのアプリの挙動を見張りつつ、メモリー管理を代行しているものとして認識してください。

iOSマスターコースでは、ARCを積極的に活用したアプリを作成します。今回、Xcodeプロジェクトを立ち上げる際、「Use Automatic Reference Counting」にチェックを入れたと思います。この段階でチェックを入れると、ARCが有効になります。

ARCが有効である場合、特に断りがない場合は、クラスの実装ファイル（.mファイル）冒頭の「@implementation」と書かれた部分の中で、以下のように変数やインスタンスを宣言します。ここで宣言されたものは、総じて「メンバー変数」という部類に入ります。メンバー変数の説明は第4講で詳しく述べますが、現段階では、アプリ全体から参照できたり、書き換えたりできる変数として認識してください。

@implementation  【クラス名（ViewControllerなど）】 {

    int count; 

    NSString *countLabelText;

    【以下、メンバー変数一覧】

}

変数への値の代入と起動時の初期処理

変数を定義した後は、その変数を用いた処理を実装していきます。まずは、起動時に行われる処理から実装していきます。ViewController.mのコード上にある、「viewDidLoad」と書かれている部分を以下のように改変してください。

//画面起動時に呼ばれる処理

- (void)viewDidLoad {

    [super viewDidLoad];

    // 画面起動時にcountを0に初期化

    count = 0;

}

この「- (void)viewDidLoad」というメソッド（処理）は、この画面が最初に立ち上がった時に最初に呼び出されます。今回の例では、カウント数を管理する「count」という変数に「0」を代入します。変数に値を代入する際は通常の数式と同様に、「=」（イコール）を使います。

加算処理と文字列の取り扱い

初期化が完了したら、カウント数の増減を掌る処理を実装します。まずは、以下に示す「増やす」処理をViewController.m上に記述してください。基本的に新しいメソッド（処理）を追加する際には、「@implementation」と「@end」の間に記述します。

@implementation ViewController {

    【メンバー変数一覧】

}

【様々なメソッドなど】

// プラスボタンが押された時

- (IBAction)plusPushed:(id)sender {

    // countに1を加算

    count = count + 1;

    // ラベル用に文字列を用意

    countLabelText = [NSString stringWithFormat: @"%d", count];

    // countLabelの値を更新

    [countLabel setText:countLabelText];

}

@end ←メソッドは必ずこの前に記述

上のコードは「増やす」ボタンが押された時に行われるIBAction型のメソッド（処理）をplusPushedという名前で定義しています。IBAction型のメソッドとは、UIButtonが押された時の処理であるという明示したメソッドとなっています。
変数を用いた計算を行う場合、左辺に代入先の変数、右辺に計算内容を記述します。今回はボタンが1回押される毎に「1」が「count」に加算されるので、以下のようになります。

// countに1を加算

count = count + 1;

カウント数を管理する「count」に「1」を加算し終わったら、次は画面の表示を更新する必要があります。差し当たり、まずは整数を文字列に変換する必要があります。その際、NSStringクラスの提供する「stringWithFormat:」というメソッド（処理）を活用すると大変便利です。最初のステップで宣言した様々な変数の中に、「countLabelText」という文字列を格納するためのインスタンスもあったかと思います。その中に「count」の値を文字列として格納します。

// ラベル用に文字列を用意

countLabelText = [NSString stringWithFormat: @"%d", count];

先ほど「stringWithFormat:」というメソッド（処理）が大変便利と言いましたが、なぜ便利なのかを解説します。このメソッドでは、任意のひな形を「引数」として指定し、ひな形の中にあらゆる変数の値を文字列に変換した上で、落としこむことができるのです。なお、「引数」に関しては第4講で詳しく解説します。

ひな形は「@”【ひな形の文字列】”」という形式になるように記述します。今回は単一の数字を画面に表示させるために、ひな形は「@”%d”」となります。すなわち、ここにある「%d」が「整数の変数の値をここに落とし込みます」ということを意味しています。このような特殊な記号をフォーマット指定子といいます。「%d」以外によく使うフォーマット指定子を以下に示します。

 フォーマット指定子  データの種類  挿入可能な代表的なデータ型
 %d  整数  int型
 %f  小数  float型・double型
 %@  文字列  NSString型


このようなフォーマット指定子は、ひな形の中にいくつでも含ませることができます。そして、そのフォーマット指定子の個数分だけ、そこに挿入する変数を「,」（カンマ）で区切って指定します。上の例では、「%d」が1つだけなので、その後に続いて指定されている変数は「count」の１つのみです。

最後に、「countLabel」というUI画面上のラベルの表示を更新します。その際は「setText:」というメソッドを用いて、先ほど用意した「countLabelText」というNSStringを「引数」として渡します。

// countLabelの値を更新

[countLabel setText:countLabelText];

ここまでで、カウント数を「増やす」処理は完了となります。

減算処理と条件分岐

「増やす」ことができるようになったら、次は、「減らす」ことを考えなくては行けません。やり方としては、「増やす」処理とほぼ同一ですが、大きく異なる部分が2つあります。

1つ目の違いは「増やす」かわりに「減らす」計算が必要なことです。増やす時は「count + 1」をしましたが、減らす場合は「count - 1」となります。

// countから1を減算

count = count - 1;

2つ目は、負の数に対する扱いです。今回のカウンターでは、0未満の数は計上しないものとします。そこで、減算を行う前に、処理前の値が正の数であることを確認する必要があります。
処理に対して、条件を指定するためには、if文というものを使用します。if文の構文を以下に示します。

if (【条件文】) {

    【処理内容】

}

ここにある「条件文」は、特定の処理内容が起こりうる条件を示したものです。今回は、「count」が正の数である場合のみ、減算を行うことなので、条件文は「count > 0」というようになります。なお条件文の中では、比較演算子というものを使用できます。このような比較演算子を用いることで、変数の値に応じた処理の場合分けを行うことが可能です。その例を以下に示します。


 比較演算子  使用例  「真」となる条件
 ==  count == 0  「count」は「0」と一致
 !=  count != 0  「count」は「0」と不一致
 <  count < 0  「count」小なり「0」
 <=  count <= 0  「count」は「0」以下
 >  count > 0  「count」大なり「0」
 >=  count >= 0  「count」は「0」以上


これらを用いて、「減らす」処理を実装してみてください。骨格は、「増やす」処理とほぼ同一です。「減らす」処理は「minusPushed」と呼ぶことにします。先ほど記述した「plusPushed」メソッドを参考に自分で考えて、記述してみてください。どうしてもわからない場合は次のページの解説をみてください。

以下に「減らす」ボタンが押された時の「minusPushed」メソッド（処理）を示します。記述するファイルは引き続き、ViewController.mです

ViewController.m

// マイナスボタンが押された時

-(IBAction)minusPushed:(id)sender {


    // もし、countが整数であれば...

    if (count > 0) {

        // countから1を減算

        count = count - 1;

    }

    // ラベル用に文字列を用意

    countLabelText = [NSString stringWithFormat: @"%d", count];

    // countLabelの値を更新

    [countLabel setText:countLabelText];

}

加算処理と減算処理の特殊な表記

変数を用いた加算処理や減算処理を行う場合、式の左辺に代入先の変数を、右辺に計算内容を記します。一方で、今回のように特定のint型の変数に対して「1」を増やしたり、減らしたりする場合、簡略化した特殊な表記を行うことも出来ます。その例を以下に示します。

// countに「1」を増やす

count++;

// countから「1」を減らす

count--;

丁寧に代入式を記述することも、もちろん大切ですが、このような単純な計算の簡易表記手法は非常に便利かつ、よく使うことになるので、覚えるようにしてください。

ユーザーによる値の初期化

これまでの処理で、ボタン操作によってカウント数を１つずつ増やしたり、減らしたりすることができるようになりました。一方で、ユーザーはカウント数の値を「0」にリセットする機能も望むはずです。そこで、「リセット」ボタンが押された時に押されるメソッド（処理）実装していきます。以下のコードを、ViewController.m上に記述してください。

ViewController.m

- (IBAction)resetPushed:(id)sender { 

    // countを0に初期化

    count = 0;

    // ラベル用に文字列を用意し、ラベルを更新

    countLabelText = [NSString stringWithFormat: @"%d", count];

    [countLabel setText:countLabelText];

}

このメソッド（処理）は「-(IBAction)plusPushed」や「-(IBAction)minusPushed」と同様、ボタンが押された時の処理を示すIBAction型のメソッドです。ボタンが押されると、「count」に「0」が代入され、ラベルの数字も「0」になります。

これで、最低限必要な処理の実装が完了となります。次のセクションでは、今回実装したメソッド（処理）をUI画面上のボタンやラベルと関連付け、アプリとしての体裁を整えていきます。

UI画面とコードの関連付け

ここまでの内容で画面のデザインと、必要最低限な機能の実装が完了しました。このセクションでは、これらを関連付けることで、画面上のボタンを押した時に、所定の処理が行われ、ラベルが更新されるようにしていきましょう。

UIButtonとIBActionの関連付け

まずは実際のボタンと、それが押されたの処理を結びつけていきます。ナビゲーターエリアからMainStoryboard.storyboardを開いてください。

今回結びつける必要のあるボタンとメソッド（処理）は全部で3つあります。それらを以下に示します。


 「減らす（-）」ボタン  - (IBAction)minusPushed
 「増やす（+）」ボタン  - (IBAction)plusPushed
 「リセット」ボタン  - (IBAction)resetPushed


関連付けの手法はMy Very First App同様、まず、ボタンオブジェクトを右クリックし、インスペクターを立ち上げます。



「Send Event」の一覧中にある、「Touch Up Inside」の右手にある円をクリックして、画面左手のView Controller上にドラッグします。



マウスを離すと、該当するView Controller内に宣言されているIBAction型のメソッドの一覧が表示されるので、所定のものを選んでください。



正しく関連付けできた場合は、ボタンのインスペクター（右クリックした時に出てくる一覧）が以下のように変化します。



この作業を3つ全てのボタンで繰返してください。これで、画面上のUIButtonとIBActionの関連付けは完了となります。

UIButtonの挙動と関連付け

これまでUIButtonに関しては、ボタンが押された時に、コード上のIBAction型のメソッドが実行させるように設定を施してきました。一方で、UIButtonはその他、様々な要素と関連付けることも可能となっています。それら要素について少し議論します。

画面上のボタンオブジェクトを、右クリックしたときに表示されるインスペクター画面の一覧には、以下のカテゴリーがあるかと思います。それらの役割は以下の通りです。
  • Storyboard Segues…ボタンを押す動作と、Storyboard上に定義されたSegue（画面遷移）と関連付ける（Storyboard使用時のみ有効）
  • Send Events…ボタンを押す動作と、コード上に宣言されたIBActionを関連付ける
  • Referencing Outlet…ボタンオブジェクトその物を、コード上に宣言されたUIButtonと関連付ける（処理に応じてボタンの形や表示等を変更する場合に使用）
  • Referencing Outlet Collections…複数のボタンオブジェクトを、コード上に宣言されたUIButtonの集合と関連付ける（複数のボタンの形や表示等を一括で同じタイミングで変更する場合に使用）

基本的に、コード上からUIオブジェクト（ボタンやラベル等）の見た目や体裁などを変更するときは、「Referencing Outlet」の中でコード上のUIオブジェクトのインスタンスと関連付けます。

一方で、UIButtonには「Storyboard Segue」や「Send Events」があるように、UIオブジェクトは種類や機能に応じて、色々な独自要素を持っている場合があります。iOSマスターコースでは、今後様々なUIオブジェクトを取り扱う際に、その使い方に関しての説明を行って行きます。

UILabelの関連付け

次にInterface Builder上にある、カウント数を表示するUILabelとコード上で宣言されているUILabelを関連付けます。一方で、その手法はボタンの時と少々異なります。ボタンの場合、「ボタンを押す」というイベントとコード上の処理を結びつけましたが、今回は処理によってラベルの表示内容を書き換えるため、Referencing Outletsの中で、コード上の「countLabel」と関連付けます。

まず、ラベルオブジェクトを右クリックし、インスペクターを表示させます。その後、Referencing Outletsの下にある、New Referencing Outletの右手にある円をView Controller上にドラッグし、「countLabel」を選択します。作業後、以下のような状態になれば、関連付け作業は完了となります。


ビルドと動作試験

ここまでの手順で、カウンターとして最低限必要な機能は揃いました。すべてのファイルを保存した上でアプリをビルドし、動作の検証を行いましょう。

まず、正常にビルドが完了し、アプリが起動することを確認しましょう。また、ボタン操作によって、カウント数が増えたり、減ったり、リセットできることも確認しましょう。


高度な条件分岐

これまでの内容で、１つの条件のみによる単純な条件分岐は扱ってきました。一方で、実際にはより複雑な条件によって、処理を切り分ける必要が出てきます。このセクションでは、多段階の場合分けや複数の条件を含む条件分岐に関して議論します。

多段階の条件分岐

条件分岐に用いるif文は、else文と組み合わせることで、多段階の比較処理を行い、複数通りの場合分けを行えます。以下にその例を示します。

 if (【条件文1】) {

    【条件文1が「正」の時の処理内容】

} else if (【条件文2】) {

    【条件文1が「偽」、かつ条件文2が「正」の時の処理内容】

} else {

    【条件文1、条件文2、共に「偽」の時の処理内容】

}

上の例では、3段階の比較処理を行うことで、3通りの場合分けを行なっていることがわかります。比較処理の段階には、特に制限はなく、状況に応じて、より細かく場合を分けて処理を行うことも可能です。

複数条件を含む条件分岐

さらにif文では、論理演算子を用いることによって、1つ条件文に複数の条件を指定することができます。以下にその例を示します。

if (【条件文1】 && 【条件文2】) {

    【条件文1、かつ、条件文2、が共に「正」の時の処理内容】

}

この例における「&&」は「かつ」を意味する論理演算子です。「&&」以外に、よく使う論理演算子を以下に示します。


 論理演算子  使用例  「真」となる条件
 &&  count > 0 && count < 11  「count」は「0」より大きく、かつ、「11」より小さい
 ||  count < 0 || count > 11  「count」は「0」より小さい、または、「11」より大きい


高度な条件分岐を用いたカウンターの改良

それでは、多段階の場合分けや複数の条件を含む条件分岐を用いることで、カウンターの機能を工夫してみましょう。現状では、カウント数に応じてラベルの値のみが更新される設計となっていまが、それに一工夫を加えて、カウント数に応じて、ラベルの色を変える処理を追加します。

ラベルの文字色の変更

ラベルの色をコードから動的に変える際は、ラベルを掌る「countLabel」というインスタンスのメンバー変数の１つである、「textColor」に「UIColor」で表現された色データを代入することで実現できます。

クラスやメンバー変数の詳細は第4講で取り扱いますが、現段階では、以下のようにコードを記述すればラベルの文字色が変えられると覚えてください。

 // ラベルを「緑色」に変更

countLabel.textColor = [UIColor greenColor];

UIColorには、緑以外にも、以下のような色が予め定義されています。

 [UIColor blackColor]  黒
 [UIColor blueColor]  青
 [UIColor brownColor]  茶
 [UIColor clearColor]  透明
 [UIColor cyanColor]  シアン
 [UIColor darkGrayColor]  濃い灰
 [UIColor grayColor]  灰
 [UIColor greenColor]  緑
 [UIColor lightGrayColor]  薄い灰
 [UIColor magentaColor]  マゼンタ
 [UIColor orangeColor]  オレンジ
 [UIColor purpleColor]  パープル
 [UIColor redColor]  赤
 [UIColor whiteColor]  白
 [UIColor yellowColor]  黄


ここに使用したい色がない場合、UIColorクラスを用いて、自分の好きな色を合成することも可能です。その手法に関する詳しい説明は割愛しますが、興味が有る場合は、Apple社の提供するiOS SDKのドキュメント（※）を参照してください。

場合分けに応じた文字色の変更

それでは、このUILabelのtextColorというメンバー変数と、条件分岐を組み合わせ、以下のようにラベルの文字色を変更できるように改良してみましょう。なお、解答例は後述しますが、まずはそれを見ずに実装してください。
  • カウント数が「0以上10未満」…「白色」
  • カウント数が「10以上20未満」…「緑色」
  • カウント数が「20以上30未満」…「黄色」
  • カウント数が「30以上」…「赤色」
答えを見ることなく、指定通りの動作をさせることに成功した方は条件分岐の概念を大方理解していると言えるでしょう。

それでは、実際の解答例を見ていきます。まずは、「増やす」ボタンが押されたときに呼ばれる「- (IBAction)plusPushed」というメソッドの中で、「count」を増加させ後、「count」の値に応じて場合分けを行い、色を変更させる処理を記述します。なお、以下に示す手法は数多くある実装方法の一例であり、唯一絶対の解答例ではありません。

ViewController.m

- (IBAction)plusPushed:(id)sender {

    【中略】※countを増加

    // countの大小に応じて、ラベルの色を変更

    if (count >= 0 && count < 10) {

        countLabel.textColor = [UIColor whiteColor];

    } else if (count >= 10 && count < 20) {

        countLabel.textColor = [UIColor greenColor];

    } else if ( count >= 20 && count < 30){

        countLabel.textColor = [UIColor yellowColor];

    } else {

        countLabel.textColor = [UIColor redColor];

    }

}

この例では、2つの条件を含む条件文を用いて「count」の範囲を指定するとともに、else文を用いて4通りの場合分けを行なっています。

次に、「減らす」ボタンが押されたときに呼ばれる「- (IBAction)minusPushed」というメソッドの中でも、「count」を減少させ後に、「count」の値に応じて場合分けを行い、色を変更させる処理を記述します。以下の例では、計算処理を行った後に「count」の値を比較して、ラベルの色を変更しているため、場合分けを行う部分は「- (IBAction)plusPushed」と同一です。

ViewController.m

- (IBAction)minusPushed:(id)sender {

    【中略】※countを減少

    // countの大小に応じて、ラベルの色を変更

    if (count >= 0 && count < 10) {

        countLabel.textColor = [UIColor whiteColor];

    } else if (count >= 10 && count < 20) {

        countLabel.textColor = [UIColor greenColor];

    } else if ( count >= 20 && count < 30){

        countLabel.textColor = [UIColor yellowColor];

    } else {

        countLabel.textColor = [UIColor redColor];

    }

}

ここまでで、カウント数を増減する毎に値に応じて色が変化するという処理の実装が完了しました。しかし、本当の完成まではもう1ステップの処理が必要となります。それは、「リセットボタンを押した時に、文字色を白に戻す」という処理を実装することです。その例を以下に示します。

ViewController.m

- (IBAction)resetPushed:(id)sender {

    【中略】※countを「0」にリセット

    //ラベルの色を白に戻す

    countLabel.textColor = [UIColor whiteColor];

}

お疲れ様でした。これですべての処理の実装が完了となります。もう一度ビルドとアプリの実行を行い、正常にラベルの文字色が変更されることを確認してください。以下にアプリの実行例を示します。


さらなる工夫

プログラミングを上達させる近道は、「積極的に自分で考えて手を動かす」に限ります。今回は簡単な足し算、引き算、条件分岐を学んだので、それらを応用して、独自にカウンターアプリに工夫を加え、アレンジしてみましょう。アレンジ例を以下に示します。

より細かい場合分けに応じたラベルの文字色の変更
「0,2,4,6,8,10,…」というように、2の倍数でカウントする

これらのアレンジは、ほんの一例にしか過ぎません。失敗を恐れず、様々なコードを入力し、それぞれの挙動を確認してみてください。アレンジを行えば行うほど、プログラミングの概念に対する理解が深まることでしょう。

まとめ

第2講では、プログラミングで最も重要な要素である「変数」の扱いかたをカバーしました。また、その変数を用いた簡単な計算や、変数の条件に応じた場合分け等に関する議論も行いました。さらに、UIオブジェクトの概念を説明するとともに、コード上からUIオブジェクトの表示を変更させる例を取り扱いました。

今回カバーした内容は、プログラミングを上達させる上では必要不可欠の知識ばかりです。積極的にコードをアレンジし、その都度アプリの挙動を見極めることで、全体的な概念の理解を一層深めましょう。

Comments