Swift初心者 - Xcode / Playground / iOS Simulatorの使い方

1. はじめてのiOSアプリ開発

2. 自己紹介
About
• Hiromasa Nagamine
Work
• LINE Corporation
• iOS Engineer
Events
• Swift勉強会

3. Swiftをつかって
iOSアプリをつくろう

4. iOSアプリとは
iOSアプリとは、
iOS上で動作するアプリケーショ
ン
iPhoneのカメラやGPS、マイクな
どの様々な機能を利用して様々な
機能を提供
SwiftやObjective-Cを使って開発

5. Swift
Swiftとは？
OS X, iOSアプリを開発に使う
プログラミング言語
Objective-Cの次世代となる
関数型言語を思想に持つ形で開発
Xcodeのバージョンによって
Swiftのバージョンも異なる

6. アプリをつくる準備

7. iOSアプリ開発の環境
iOSアプリを開発するには、以下の環境が必要です。
Macintosh PC Xcode Apple ID
※リリース

8. Macintosh PC
Intel PCのMacintoshが必要
※ Power PCでは、Xcodeがインストールできない

9. Xcodeとは？
Xcode
iOSアプリやOS Xのアプリを
開発する開発環境
プロジェクトの作成、ビルド、構
文チェックなど様々な機能を提供
iOSアプリは基本的にXcode必須

10. 開発言語
開発言語は主に２つ
Objective-C
Swift
今回は、Swiftを使って開発

11. Xcodeダウンロード
Xcodeは以下ページから
ダウンロード可能
Mac App Store -> View in Mac App Store
公式ページ
今回は、6.4以上のバージョンを利用
※ Xcodeをダウンロードするには、Apple IDが必要になります。もし、持っていなけ
れば作っておきましょう。

12. まとめ
ポイント
① SwiftはAppleが開発したモダン言語！
② "Intel PC のMacintoshを用意しよう！
③ XcodeのバージョンによってSwiftのバージョンも違う！

13. Xcodeの使い方を知ろう

14. Xcodeで出来ること
Xcodeでは、主に以下のような機能が利用できます。

15. プロジェクトの種類

16. プロジェクトの種類
Xcodeで作ることができるプロジェクトは２種類
• Playground
• Xcode Project

17. できること

18. まずは、Playgroundを触ってみましょう。

19. Playgroundの作り方

20. Playground作成
最初はPlaygroundを作成してい
きます。
• Xcodeを起動します
• 右の画面が表示されるので
Get started with a playground を
選択

21. Playground作成
次の画面が出てきます。
ここで設定するのは次の項目
です。
• プロジェクトの名前
• Platformのタイプ(iOS, OS X)

22. Playground作成
Create"ボタンを押すとファイル
の保存先を指定します。
プロジェクトを作成することがで
きます。
右下のようなファイルが生成され
ます。

23. Playground作成
XcodeでPlaygroundを開いた状態の
画面が表示されます。
Swiftで"Hello, playground! という文
字列を出力するプログラムが書かれて
います。
これで、Playgroundの作成は以上で
す。

24. Playgroundを使って
Swift言語を学ぼう

25. Playgroundとは？
こんなことができる！
実際にXcodeプロジェクトを作成しなくても、簡単なプログラムを試せる。
プログラムを書くと即時にコンパイルするので、実行結果をすぐに確認できる。
UIの実装など、簡単なものであればすぐに確認できる。
連続で変化する変数の値をグラフとして表示することができる。
入力やアニメーションなど一部試すことのできない機能がある。
変更するたびビルドをしたり、シミュレーターを起動したりする手間が省けます。
実際にPlaygroundを使ってSwiftの書き方を練習してみましょう。

26. Playgroundを使って
Swiftを練習しよう

27. Playground
Playground画面の構成は以下のようになっています。

28. Playgroundの画面構成
コーディングエリア
実際にコーディングをするエリアです。ここでコーディングしたものは、コンソールアウトプットに即時
反映されます。
コンソールエリア
コーディングエリアで書いたプログラムの結果を即時表示してくれます。プログラムが正しく結果を求め
られているか確認をすることができます。
アウトプットエリア
コンソールアウトプットの右側にある、丸いマークをクリックすると表示されます。より詳しく結果を確
認することができます。
❖ これから、Swiftの書き方を練習していきましょう。

29. コーディングしてみよう

30. 課題ファイル
• GitHubから落としてくることができます
• URL : https://github.com/hayate1996/swift_ios_study_01

31. Hello,world!
① はじめての"Hello, world!"
まずは、"Hello, world!"をコンソールエリアに出力してみましょう。
コンソールに文字を出力するためには、次のメソッドを利用します。
printlnメソッドは、コンソールエリアへ出力するためのメソッドです。
"Hello, world"をコンソールへ出力するコードには以下のようになります。

32. 変数と定数

33. 変数と定数
変数とは？
なぜ変数を使う？
変数は、プログラム内で扱うデータを保存しておくための箱です。必要な時に用意
してあげることで、より柔軟にコーディングすることができます。
変数の書き方
変数の特性は、箱の中の値を変更することができることです。駐車場に止まってい
る車の台数など常に変化する値を持っておくために使います。

34. 変数と定数
定数とは？
なぜ定数を使う？
定数の書き方
定数は、プログラム内で扱うデータのうち、変化しない値を保存しておく箱です。
サーバーのURLとか円周率などはいつも一緒なので定数として保存しておきます。
定数の特性上そこを参照すれば、いつでも同じ値を取得できます。常に決まった値
を取得したい場合などに定数を定義します。

35. 例
hensuに１をセットしたあと、２に変更する
teisuに１をセットしたあと、２に変更しようとするができない
変数
定数

36. UIを表示してみよう

37. UIを表示
UIとは？
frameとは？
• ユーザーが実際に操作する多くのパーツや画像パーツ
• iOSアプリの画面はUIで構成される
• UIKitというフレームワークを使う
• UIパーツの大きさと配置する位置を決める
• 各UIパーツごとに設定する

38. UIViewを表示
x, y, width, heightを指定する
実際にUIViewを表示
CGRectを使ってみよう
x, y, width, heightを持ったCGRectを作ってみる

39. 演算子

40. 演算子
演算子とは？
計算してみよう！
変数を使ってみよう
変数は、プログラム内で扱うデータを保存しておくための箱です。必要な時に用意
してあげることで、より柔軟にコーディングすることができます。

41. 関数

42. 関数
関数とは？
なぜ関数を使う？
• あらかじめ決めた一連の処理をまとめて書く場所
• その関数を呼び出したとき常に同じ処理をしてくれる
• 何度も同じコードを書く手間がなくなる
関数の特性は、関数を呼び出すだけで同じ処理を繰
り返し実行できるということです。
レジで商品を買うには、①②③の一連の流れが必要
です。 shopping という関数を作っておけば、コン
ビニでもスーパーでも、常に同じことができます。
① 商品を出す
② お金を払う
③ 商品を受け取る
“shopping”
コンビニ
レジ
スーパー
レジ

43. 関数
関数の書き方
例

44. エラー表示
何が間違っているのかを教えてくれているので確認しましょう！
文法や変数名が間違っている場合はエラーが表示されます。
※ エラーと一緒にメッセージが表示されます。

45. Xcode Projectの作り方

46. Xcode Project作成
次は、Xcodeプロジェクトの作
成です。
Xcodeを立ち上げます。
ここで、"Create a new
Xcode project"を選択します

47. Xcode Project作成
選択すると、次の画面が表示されます。
項目がいくつか用意されています
今回は iOS -> Application
-> Master-Detail Application
を選択します
※ 1から作る場合は Single View Applicationを選
択することが多いです

48. Xcode Project作成
次の画面が表示されるので、以下の項
目を設定します。
• Product Name : master_detail_sample"
• Organisation Name : "自分の名前"
• Organisation Identifier : "example.swift"
• Language : Swift
• Device : Universal
• Use Core Data : Check

49. Xcode Project作成
設定後、 Next"を押すと保存先を
選択する画面が出ます。
選択後 Create"を押すとプロジェ
クトが作成されます。
ファイルは右下のものが
生成されます。

50. シミュレーターで実行してみましょう！

51. Xcode Projectの
画面構成

52. Xcode Project画面
ここからは、各エリアの説明です。
Xcode Projectの画面には次の様なエリアがあります

53. Xcode Projectの画面構成
ナビゲーションエリア
ソースファイルやリソースファイ
ルを管理する
もっとも頻繁に使うエリア

54. Xcode Projectの画面構成
ユーティリティエリア
中央に表示されるファイルの細
かな設定をする
上部エリア：インスペクタ
下部エリア：ライブラリ

55. Xcode Projectの画面構成
ツールバー（ビルド）
シミュレーターに関する操作
• ▶：実行
• ：停止
• ターゲット、シミュレーター
選択

56. Xcode Projectの画面構成
ツールバー（エディタ）
各エリアの表示・非表示
ソースコードの変更履歴表示

57. シミュレーターを
操作してみよう

58. シミュレーター
Xcode Projectで作ったものはシ
ミュレーターで実行してみましょう
実行するには、ビルドボタンを押し
ます。
Command( ) + Shift + R
でも実行できます。

59. シミュレーター
シミュレーターの操作をいくつか紹介し
ます。
• Command( ) + 矢印(← →)
→ シミュレーターの回転
• Command( ) + H
→ ホームボタン
• Option + マウス操作
→ ピンチイン・アウト
• ホームボタン2回
→ 起動中のアプリのリスト
終わったら停止しましょう。

60. まとめ
ポイント
① プロジェクトには"Xcode Project"と"Playground"の２つがある！
② １からアプリを作るときは"Single View Application"を選ぼう！
③ シミュレーターの操作コマンドは覚えておこう！

61. まとめ
ポイント
① Swiftを練習をするならPlaygroundを使おう！
② 変数にはvar型とlet型がある！
③ エラーが出た時はメッセージを見よう！

62. Playground解答ファイル
• GitHubから落としてくることができます
• URL : https://github.com/hayate1996/swift_ios_study_01/tree/answer