本​ PDFは、2016 10 25日に発 された、書籍「これからつくる iPhoneアプリ開発入
Swiftではじめるプログラミングの一」の​ 用 ​です。

本PDFで学習する前にiOSアプリ開発が初めての方は、書籍「これからつくる iPhone
アプリ開発入Swiftではじめるプログラミングの 一」を学習されたの に、本PDFに取りと効果的です！
書籍は、のットショップから購入することができます。

Amazonでの購入：
http://amzn.to/2dKYSMk
ブックスでの購入：
http://bit.ly/2e42nDh
SBクリ イテ ブでの購入：
http://bit.ly/2edAN4i

本PDFにするお問い合わせお問い合わせは、のサートサイトよりおいいたします。

サ ートサイト：お問い合わせhttps://swiftbg.github.io/swiftbook/contact/
字

字や要 がご いましたらご連 ください。ご要、
していきたいと思います。
PDFが更新されたときは、
サ ートサイト、SNS で

の内

に

させて

して

し、PDF

きます。

サイトのSNS（
ローして けると、情報の入手が くなります。）
Facebook ージ：​https://www.facebook.com/swiftbgbook/
Twitterアカウント：​https://twitter.com/swift_bg
YouTubeで、「Swiftナーズ部」として、​チャン ル！
​©2016 Haruhito Fuji, Kanako Kobayashi, Yoshinori Kobayashi
本書の内 は 作 法上の保 を けています。 作 者・出版 者の文書による書の一部または 部を無 で・・ 載することは じられております。

を得ずに、本1

用Lesson 1型じゃんけんアプリ

このレッスンでできるようになること
本書の「1日目 Lesson 3 じゃんけんアプリを作ろう」の 用 として、型じゃんけんアプリにしていきましょう。また、本書のじゃんけんアプリでは、「カスタマイズ ①
動画面（
LaunchScreen）を設定しよう 」、「カスタマイズ ② アイコンを設定しよう 」がありますが、
カスタマイズ の学習を えていなくても、 用 を実 することは可能です。
プログラムとユーザーでじゃんけんをして、結果が表示されるアプリを制作していきます。
これまでのじゃんけんアプリにSwiftの列挙型であるenum（イーナム）を使って、プログラムコード
をわかりやすく整理していきます。enumの基本的な使い方を学習していきましょう。
また、新しく タンを つ追加し、AutoLayoutを用いてUI タンがの になるように設定していきます。

Lesson 1-1
Lesson 1-2
Lesson 1-3
Lesson 1-4

成イメージを確認しよう
enum（列挙型）で整理しよう
画面を作成しよう型 カスタマイズしよう

2Lesson 1-1

成のイメージを確認しよう［このレッスンで学ぶこと］［できるようになること］

型じゃんけんアプリの 成イメージを確認します。 成をイメージすることでこれから行
なう作 の見 しを てます。
型に変更するときの イントも確認しま
しょう。

型じゃんけんの使い方が理解できるようになります。 成イメージからどのような制作を行なうのか、イメージができるようになります。

1:型じゃんけんアプリとは

この では、「1日目Lesson 3 じゃんけんアプリを作ろう」のサンプルアプリを更にカスタマイズして、型じゃんけんアプリを作っていきます。
まずは、 成イメージを確認してみましょう。
◎

型じゃんけんアプリの

アプリ

アプリが

動

成イメージ

じゃんけんスタート

じゃんけん結果

動すると今までどおり初期画面となります。

に「グー」「チョキ」「パー」のいずれかの タンをタップするとランダムにアニメーションを開します。
また、「グー」「チョキ」「パー」のアニメーションが り わるに、いずれかの タンをタップするとアニメーションがし結果が表示されます。
またアニメーション
するときに最後に表示した結果のまますると、目で見て いすることができてしまい、必ず ててしまいます。じゃんけん結果を表示するとき、する前にもう 度
表示更新してから
結果を表示します。（ したあとに、もう一度、して出しています。）
3Lesson 1-2

enum（列挙型）で整理しよう［このレッスンで学ぶこと］［できるようになること］

後のカスタマイズを行いやすくするために、
enum（列挙型）を使って、プログラムコードを見やすく整理していきます。
Swiftのenum（列挙型）の使用方法を学んでいきます。

enumの基本の使い方がわかるようになり、わ
かりやすいプログラムコードを作ることができるようになります。

1:enum（イーナム）とは(1-1)

enumを使う理由

じゃんけんアプリをカスタマイズする前に、enumについて理解しておきましょう。
enumは、一連の値を効率よく変数定義できることから「列挙型」​と呼ばれます。
本書の「1日目Lesson 3 じゃんけんアプリを作ろう」（P96）では、answerNumberが「0」なら「グー」、「1」なら「チョキ」、「2」なら「パー」と数値で表現していました。
◎answerNumberの値とその意味
じゃんけん結果

グー

チョキ

パー

answerNumberの値

0

1

2

ですが、プログラムコードだけを見ると、「0はグーで、1はチョキ・・・」などと、どの数値がどのようなじゃんけん結果を示しているのかがわかりづらいです。このようなプログラムコードは読み手に負担がかかり、効率が悪くなります。
本書のプログラムコードは短いコードですし、簡単な3択としてすぐに思い出せるかもしれません。
でも、実際は、このプログラムコードより、はるかに多くのプログラムコードを書いてiOSアプリを開発していきます。どんな記憶力が良いアプリ開発者でも、時間が経てば数字の意味を忘れてしまいます。さらに、コードを修正する人が変われば、「この数字の意味は何だろう？」と疑問に思います。

マジックナンバー
プログラミングの世界では、一般的にこのような数字を​「マジックナンバー」​と言ったりもします。
プログラミングの世界の「マジックナンバー」は、​プログラムを書いた本人以外は、分からない数
字​のことを指します。

そこでenumを利用することによって、じゃんけん結果と値を紐付けて定義し、わかりやすくすることができます。

4

(1-2)

enumの使い方◎enumの記述例1:定義// Jyankenという名前のenumを定義
enum Jyanken {/​/ 値：グーcase j_gu/​/ 値：チョキcase j_choki/​/ 値：パーcase j_pa}// 変数answerはJyanken列挙型で定義し、初期値は.guとする
var answer : Jyanken = .j_gu
enumを利用する際には、「enum Jyanken」のように変数の型（例：String型）と同様にenum定義
名を型として指定します。
また、値を参照するときは先頭に「.（ドット）」を記述する必要があります。
◎enumの記述例2：値の設定と取得// Jyankenという名前のenum定義// 値はUInt32の値で保持する
enum Jyanken : UInt32{// 値：グー(値は0)case j_gu = 0// 値：チョキ(値は1)case j_choki = 1// 値：パー(値は2)case j_pa = 2}// 変数answerはJyanken列挙型で定義し、初期値は.guとする
var answer : Jyanken = .j_gu// 変数answerの値を表示する// 0が取得できる
print(answer.rawValue)
またEnumの各値の詳細を定義することも可能です。
Enumで値を格納する場合は、「Jyanken:UInt32」のように型を指定します。
上記の例の場合は、「.j_gu」なら「0」、「.j_choki」なら「1」という値を設定することも可能です。
値はString型など文字列型にすることも可能です。
enumの値を取得するときは、​「.rawValue」メソッド​
を利用します。

5◎enumの記述例3：メソッドの追加
enum Jyanken : UInt32{// 値：グー(値は0)case j_gu = 0// 値：チョキ(値は1)case j_choki = 1// 値：パー(値は2)case j_pa = 2// 値を文字に変換するメソッド
func string() -> String {switch self {case .j_gu:
return "グー"case .j_choki:
return "チョキ"case .j_pa:
return "パー"}return "不明"}}// 変数answerはJyanken列挙型で定義し、初期値はグーとする
var answer : Jyanken = .j_gu// 変数answerの値を文字に変換するメソッドを使って表示する// グーが取得できる
print(answer.string())

enum内部には、最後にメソッドを記述することができます。
メソッドを記述することによって、値の表現方法を変化させることが可能です。
上記の例では、じゃんけんの定義をユーザーがわかる文字列に変換しています。
SwiftのEnum（列挙型）はとても機能が豊富です。これ以上の解説は、初心者の域を超えてしまうた
め、本書では割愛していますが、もし、学習してみたいという方は「The Swift Programming
Language」（書籍）を片手にチャレンジしてみてください！

「The Swift Programming Language」（書籍） のご紹介
Swift言語を更に学習したい方のために、「The Swift Programming Language」をご紹介します。
この書籍は、Appleが出版しているSwift言語のマニュアル（英語）です。
iBookから無料で購入することができます。
英語で記載もされていますので、難易度が高いです。ですが、Swift言語としては、もっとも新しい書籍になり、慣れるとわかりやすいと思います。

62:enumを使ってコードを整理してみよう
本書の「1日目 Lesson 3 じゃんけんアプリを作ろう」で制作した「じゃんけんアプリ」を、さらにカスタマイズしていきます。
(2-1)

enumを定義します◎enumを定義

まずは、enumでJyanken列挙型を定義します。数値を設定するため、Jyanken列挙型はUInt32数値型を指定しています。
「j_gu」は「0」、「j_choki」は「1」、「j_pa」は「2」を代入します。

Apple開発者向けWebサイト「Apple Developer」 のご紹介
Appleが開発者向けに情報をまとめているサイトが、「Apple Developer」（​
https://developer.apple.com/​）です。
WWDCでのセッション動画が掲載されていたり、開発版である「Xcode beta」のダウンロードが行えます。それ以外にもたくさんの開発情報が掲載されていますので、ぜひ、サイトに訪れてみてください。サイトを閲覧しているブラウザがSafariでないと動画の再生が行えないなどの制約がありますので、Safariを使ってサイトを閲覧してください。

7

(2-2)

enumを利用します◎enumを利用する①じゃんけん結果を格納している変数「answerNumber」をUInt32からenum定義したJyanken型に置き換えます。初期値で「グー」を指定しています。
②「anserNumber」の値（数値）は「.rawValue」メソッドを利用して取得します。
③新しいじゃんけんの結果を、if文を利用して格納します。
④今まで数値で「0」「1」「2」と指定していましたが、「.j_gu」「.j_choki」「.j_pa」とenumに置き換えます。
じゃんけんの結果を「0」や「1」などの数値で記載するよりも、「.j_gu」「.j_choki」のように記載することで、遥かに読みやすくなっていることがわかります。
8

(2-3)

enumにメソッドを定義して整理します◎テキストの表示と画像の表示
コードを確認すると、「answerLabel.text = "グー"」のように画面に表示する箇所と、「
answerImageView.image = UIImage(named:"gu")」のように画像に変換している箇所があります。
このコードは、enumを活用することで、もっとスッキリと記述できます。また、後の変更に強く、不具合が発生したときもメンテナスが行
いやすくなります。

◎enumにメソッドを定義
enum定義内にメソッドを追加します。
「self」を利用すると、自分自身のインス
タンスを参照しますので、enumに代入している値を取得できます。
enumの値からじゃんけん結果の文字列に変換するメソッドでは、変換後のじゃんけんの文字列を配列に格納しています。「
self.rawValue」で、enumの値を取得して、配列の添字として指定することで、じゃんけんの文字列を返却しています。
同様にして、enumの値から画像の名前を取得するメソッドも作成します。

9◎enumメソッドを利用

じゃんけんの結果を画面に表示する箇所のif文分岐を削除します。
先程、Jyanken型に定義した「string()」「imageName()」メソッドを利用して、じゃんけん結果の文
字列と画像名を取得するコードに修正します。
以前のif文で分岐するコードと比べると、enumのメソッドを活用することでスッキリしたプログラムになったことがわかります。

10Lesson 1-3

画面を作成しよう［このレッスンで学ぶこと］［できるようになること］

型じゃんけんアプリ とカスタマイズするために画面の タンの削除方法と、 数の タンをに配置していく方法を学 ます。
新しいAutoLayoutの設定方法を学 ます。

数のUIパー の配 の設定ができるようになります。 数のUIパー をなサイズで配置するためのAutoLayoutの活用もできるようになります。

1:「じゃんけんをする！」

タンを削除しよう

型じゃんけんアプリの画面を作っていきます。 に配置されている「じゃんけんをする！」
タンを削除して、「じゃんけんをする！」 タンの箇所に「グー」、「チョキ」、「パー」 タンを配置します。
(1-1)

Main.storyboardを択します◎Main.storyboard

択①
Main.storyboardを 択します。
②もし、［Document Outline］が表示されていないときは、［Document Outline］ タンをクリックします。［Document Outline］で、［View Controller Scene］ → ［View Controller］と▼をクリックしてを 開します。
③［View］を 択します。

(1-2)

「じゃんけんをする！」

リー

タンを削除します◎「じゃんけんをする！」を削除［Document Outline］から「じゃんけんをする！」を択します。
「delete」キーを して削除します。

11

2:「グー」、「チョキ」、「パー」(2-1)

タンを配置しよう

Buttonを配置します◎Button追加①［Object Library］を 択してください。
②に「button」と入力後に「enter」キーを実行しパー をします。
③表示された タンを、Storyboardの「じゃんけんをする！」 タンがあった箇所にドラッグロップし、 タンを 一列に配置します。

(2-2)

ド

タイトルを設定します◎Title設定

タンのタイトルをルトの「Button」から「グー」、「チョキ」、「パー」に変更します。
①［Attributes inspector］を 択してください。
②の タンを 択します。
③［Titile］に「グー」と入力します。
④ タンのントサイズを24に変更します。
同様に、 ん の タンの［Title］は「チョキ」、の タンの［Title］は「パー」と入力します。それ れ、ントサイズは24に変更します。
ントサイズを きくしたことで「グー」「チョキ」「パー」の文字が「...」と表示された
場合は、 タンパー の表示 リアをて文字が見えるようにしてください。
12

(2-3)

配を変更します◎テキストの配まずは、タンのタイトル変更

を変更します。

①Buttonを、「command 」キーを しながら、「グー」、「チョキ」、「パー」を 択します。
②［Text Color］の「Default」を 択してください。
③ ップアップした一覧より「White Color」を択してください。

◎
に、

タンの

タンの配

変更

を変更します。

①［View］→［Background］ の 択 部分を択します。
②［Color Palettes］タブを 択します。
③リストより「RGB Silders」を 択します。
④最後に［Hex Color #］に「6699FF」と入力します。
つの タンのテキストがイトになり、がブルーになっていることを確認します。

13

3:AutoLayoutで、レイアウトを整えよう
AutoLayoutとは、画面の

(3-1)

タンの

きさに合わせて、配置したUIパー

を自動にレイアウトする機能です。

と高さを設定します◎

つのタンのAutoLayout設定「グー」、「チョキ」、「パー」の つのタンを画面 部にに配置するためのと高さを設定します。
①［Document Outline］の「グー」、「チョキ」、「パー」を「command 」キーをしながら、同時に 択します。
② ［Add New Constraints］をクリックします。
［Add New Constraints］では、UIパーのサイズや、 のUIパー との
を設定
できます。
［Add New Constraints］という画面が表示されます。
③［Constrain to margins］のチ ックを外し
ます。
④［上
の
］に「0」と入力します。
入力後は「Tab」キーで 動します。
［Height］をチ ック入れて、「100」と入力します。
［Add 13 Constraints］をクリックして、制約を追加します。
もし、この でのAutoLayoutの設定が難しいと じた方は、書籍の「1日目Lesson 3 じゃんけんアプ
リを作ろう」の「3 各パー の表示 置、 や高さを設定しよう」（P69）を参 にしてみてください。

14

(3-2)
◎

つの

つの

タン

タンの
が

を

になるように設定しますになるように AutoLayoutを設定①「グー」 タンから「チョキ」 タン 「control」キーを しながらドラッグ&ドロップ 作をします。 作がすると い ップアップ画面が表示されます。
② ップアップした画面の［Equal Widths］をクリックします。これが、 をにする設定になります。
③同じ 作を「グー」 タンから「パー」 タンも行ってください。

(3-3)

AutoLayoutの

を解

します（

この

作は、最新のXcodeでは不要です。）◎​［Document Outline］の［View Controller Scene］に
ます。

の表示

が表示され

こ れ は 、パー にAutoLayoutの制約として設定した 置と、実際の置が一 していないためマークが表示されています。
これを、「

ューの

配置」と言います。

マークをクリックして、「

ューの

配置」を解

します。

◎Misplaced Views［Document Outline］がスライドされて、「Misplaced Views」か表示されます。
さらに、をクリックします。

15

◎配置のズレを解ラジ
タン「Update freams」が 択されています。
その にある文言「Set the frame in the canvas
to match the constraints.」 は、「画面の表示を設定した制約に合わ せます」という意味です。
「Fix Misplacement」をクリックして、 置のズレを解 します。
ひとつめのが解 できたら、がなくな
るまで、同じ手 で解 していきます。

◎

置のズレ解

後

が解 できたら、「グー」「チョキ」「パー」の タンが高さ「100」 イント、
いっ いに設定されるようになります。

4:

連付けをしよう

新しく追加した(4-1)

タンとプログラムとの連付けをしていきます。

Assistant Editorを表示します◎Assistant Editor

り

え

①

［Assistant Editor］②［Navigator］③［Utilities］

ここから、タンをクリックして、タを表示します。

タンをクリックして［Navigator］を
タンをクリックして［Utilities］を

じます。

じます。

連付けを行います。
16

(4-2)

つの

◎「グー」

タンの
タン

連付け

連付け

「グー」 タンを 択して、 「control」キー を しながら、ます。
一の「}」の上でドラックを して配置してください。

のコードにドラック

◎「グー」

タン

ドロップし

連付け

画面のような ップアップが表示されます。
①［Connection］を「Action」を 択します。
②［Name］を「guAction」と入力します。
③［Connect］を 択します。

◎「チョキ」

タン

連付け

同じく「チョキ」
ロップします。

タンを択して、 「control」キー をしながら、◎「チョキ」のコードにドラック

タン

連付け

画面のような ップアップが表示されます。
①［Connection］を「Action」を 択します。
②［Name］を「chokiAction」と入力します。
③［Connect］を 択します。

17ド◎「パー」

タン

連付け

「パー」
ます。

タンを

択して、 「control」キー をしながら、のコードにドラック

◎「パー」

タン

ドロップし

連付け

画面のような ップアップが表示されます。
①［Connection］を「Action」を 択します。
②［Name］を「paAction」と入力します。
③［Connect］を 択します。

以上で、AutoLayoutの設定と、パーお れ様でした！

とプログラムの

連付けは

しました。

18

Lesson 1-4

対戦型へカスタマイズしよう［このレッスンで学ぶこと］［できるようになること］

ランダムにじゃんけん結果を表示していく方法
や、タイマーを用いたアニメーションを学びます。
また、アニメーションの状態を管理するためにenumを利用します。

タイマー機能を応用してゲームを作れるようになります。
簡単な状態遷移について理解できるようになります。

1:アニメーションをしてみよう
ボタン押したらアニメーションを開始してもう１度ボタンを押したらアニメションを停止するようにしてみましょう。

(1-1)

プロジェクトナビゲータを表示します◎Standard Editor切り替え①［Navigator］ボタンをクリックして［Navigator］を開きます。

②［Standard Editor］ボタンをクリックして、エディタを表示します。

(1-2)

ViewController.swiftを選択します◎ViewController.swift選択［Project navigator］からます［ViewController.swift］を選択し19

(1-3)

アニメーションの状態を管理するenumと変数を作成します◎enumで作成する状態と役割

アニメーションを管理するための状態を表す「enum」を作成します。
３つの状態「アニメーション停止」、「アニメーション開始中」「アニメーション停止中」を作成します。
アニメーションの停止をすぐに行わない理由は、プレイヤーが最後に表示したじゃんけん結果をもとに後出しじゃんけんをする可能性があるからです。
必ずランダムになるようにするためにタップ後に、もう１度じゃんけん結果を再表示する必要があります。
そのために「アニメーション停止中」の状態があります。
ここでも、もう一度「enum」の利用方法を復習していきましょう！
◎enumの定義
アニメーションの状態を管理するenum「Jotai」を定義しています。Int型を指定する
ことで、メンバの「start」「stopping」「stop」に「0」「1」「2」と順番に値がセットされます。
また、変数animationStateを、enum型Jotaiを指定して作成します。
初期状態としては、アニメーション停止を表す「.stop」を指定しています。

20

(1-4)

アニメーション行う処理を作成します◎アニメーション開始と停止を受け付ける// タイマーの変数を作成
var jTimer : Timer?
アニメーション開始と停止を受け付けるプログラムを記述しています。
アニメーション開始処理「startAnimation」メソッドは、まずタイマーが開始中かどうかをチェックしています。
アンラップに関しては、書籍の「1日目Lesson5 マップ検索アプリを作ろう ~UI パーツの扱いと delegate を学ぶ~」でも学びましたね。
タイマーが実行中の場合は処理をせずにプログラムを終了し、タイマーを実行していない時はタイ
マーを開始します。
そしてアニメーション状態の変数「animationState」を開始中「.start」に変更します。
ここでタイマースタートするコードがエラーとなっていますが、タイマー完了時のメソッド「timerInterrupt」が存在しないのでエラーとなっています。
後ほど作成しますのでここではエラーのまま先に進みましょう。

21

アニメーション停止処理「stopAnimation」メソッドは、アニメーション状態の変数「animationState」が開始中「.start」かをチェックしています。開始中の場合はアニメーション状態を停止中「.
stopping」に変更しています。

◎タイマータイムアウト時のプログラム

タイマー完了時のメソッドのプログラムを記述しています。
まず新しいじゃんけん結果を取得しています。
ここは、「じゃんけんをする！」ボタンのメソッド「shuffleAction」と同じ内容です。
最後に、アニメーション状態が停止中「.stopping」の時は、タイマーを停止してアニメーション状態
を停止「.stop」に変更しています。
22

(1-5)

ボタンをタップしたらアニメーション開始と停止するようにしよう◎ボタンをタップした時にアニメーション開始と停止するプログラム

各ボタンとも同じ処理です。
アニメーション状態を確認して停止していたら開始するメソッド「startAnimation」を実行します。アニメーションが開始していたらア
ニメーション停止するメソッド「stopAnimation」を実行しています。
アニメーションが開始と停止が行われるようになります。

ここで実行してみましょう。ボタンをタップするとアニメーションが開始し、もう１度タップするとアニメーションが停止します。

23

2:アニメーション停止する時に対戦結果を表示してみよう(2-1)

アニメーションする時にタップしたじゃんけんを覚えます

対戦結果を表示するためにはどのじゃんけんがタップされたか覚える必要があります。
アニメーションを停止する時に表示中にじゃんけん結果とタップしたじゃんけんを比べて勝敗を表示
します。
◎タップした時にじゃんけんを覚える変数を作成
タップした時にじゃんけんを覚える変数を作成します。こちらもenum「Jyanken」を使います。

◎タップした時にじゃんけんを覚えるプログラム
タップしアニメーション停止する前にタップされたじゃんけんを覚えています。
「グー」「チョキ」「パー」とそれぞれタップされたら、「tappedJyanken」にenumを代入して保持しておきます。
後ほど、保持された「tappedJyanken」の値を利用して勝負の判定を行います。

24

(2-2)

アニメーションを停止する時に対戦結果を表示します◎対戦結果を表示するプログラム「アニメーション停止中」時にタ
イマー停止する処理の後に、対戦結果を判定しています。
対戦結果の初期値は、「負け」にしています。
表示中のじゃんけん結果とタップしたじゃんけんが同じなら「あいこ」にしています。
次に対戦結果が「勝ち」条件を判定しています。
全ての条件分岐が完了したら対戦
結果を表示しています。

ここで実行してみましょう。タップしてアニメーションが開始します。もう１度タップしたじゃんけ
んとアニメーション停止した時のじゃんけん結果で対戦結果が表示されます。

以上で、対戦型じゃんけんの開発は終了です。

25