Welcome to Mashykom WebSite



XcodeとSwift コーディング入門


 Swiftは、macOS、iOS、watchOS、tvOSのためのパワフルかつ使いやすいプログラミング言語です。Swiftのコーディングはインタラクティブで楽しく、構文はシンプルでいて表現力に富んでいます。安全性を重視しつつ非常に軽快に動作するソフトウェアを作り出すことができます。Worldwide Developers Conference (WWDC) 2014で発表された。

 SwiftはiOSなどで使えるアプリケーションを開発するために開発された言語で、Objective-Cに代わる言語として作られているため、基本的にそれに比べてSwiftは扱いやすくなっています。具体的には、簡単で直感的にコードが書ける、Objective-Cよりも高速である、などObjective-Cを意識して作られている分、それよりも優れた言語になっています。文法や記述の様式は、C++に類似しています。

 Swiftは、マルチパラダイムのコンパイラプログラミング言語ですが、XcodeのPlaygroundsの上やターミナルでインタラクティブにデバッグする事が可能です。また、スクリプト言語に近い感覚で設計ができ、非常に簡単にアプリケーションを作ることができる言語です。基本的にMacOSでの開発を想定されている言語ですが、Linux(Ubuntu)でも開発が可能です。

 実はXcodeには、iPad版のSwift Playgroundsの元になった機能「Playground」が含まれています。使い勝手や機能がまったく同じというわけではありませんが、少なくともSwiftの学習を始めるにあたって、Xcode版のPlaygraoundを活用することが簡単です。このXcode版のPlaygroundを使って今からSwiftのプログラミング学習を始めて見ましょう。

 Xcode版のPlaygroundを使うには、言うまでもないことですが、まずXcodeをインストールする必要があります。Xcodeは2012年代以降のMacにはすでにインストールされています。バージョン9.2以降のXcodeをインストールするためには、OS 10.12をインストールしたMacが望ましいです。ただし、Xcodeのバージョンがあまり古いと、プログラミング言語Swiftのバージョンも古く、現在のSwiftとは書き方や動作が異なることがあります。さらに古いXcodeでは、Playground自体が使えません。

 最新のMac OS10.14ではXcode 11がインストールできます。Xcode 11にはSwift 5.1が含まれています。Xcode9.2以降の新しいXcodeを用意してください。できるなら、2017年にリリースされたXcode 9.4以降が動く環境を整えてください。

 なお、iPadを使って、Swiftを子供達のプログラミング教育に利用するためのツールやAppが多数提供されています。アップル社の説明では、「Swift Playgroundsアプリケーションは、iPadが持つすべてのMulti-Touch機能を最大限に活用します。だから、生徒たちはコードを指でドラッグして動かすだけで、その結果がすぐに反映される様子を見ることができます。iPadを使ってロボットやドローンをコントロールすることで、現実の世界でコードがどのように機能するかを体験することさえできます。」と謳われています。詳しくは、公式サイトを参照ください。iPad向けのSwift Playgrounds AppはApp Storeから無料でダウンロードすることができます。これらのAppはプログラミングの初心者から自己学習できる構成になっていますので、小学生のプログラミング教育には便利かもしれません。ここでは、PCを使用することを前提としているので、iPadを用いたSwift Playgroundsの活用については触れません。

Last updated: 2019.2.10



XcodeのインストールとSwiftの使い方



 Xcodeは、Mac App Storeからダウンロードしてインストールすることができます。ダウンロードサイズからして約10GBと大きいので、インストールして使用するためには、だいたい20GB程度は起動ディスクに余裕があるMacが必要となります。Appleの公式websiteからダウンロードして、インストールしてください。

Xcode10_1.png


インストールしたXcodeは、通常のアプリと同様にLaunchpadから起動できます。Xcodeのメニューバーから'File' -> 'New' -> 'Playground'と行って「Get started with a Playground」を起動しましょう。

playground_02.png


'choose a template for your new playgroud'のパネルで'macOS' -> 'Blank'と選択します。

playground_03.png


 その後、名前とプラットフォームを設定したPlaygroundを保存する場所を聞いてくるので、適当な場所を指定して「Create」ボタンをクリックします。保存場所は、これから作るPlaygroundはみんなそこに保存するようにすると良いでしょう。

 これでXcode版Playgroundのウィンドウが開きます。このウィンドウの左側には、MyPlaygroundという表示の下に、SourcesとResourcesという名称のフォルダー名が表示されています。そして中央にはSourceの内容が以下の通り表示されています。

import Cocoa

var str = "Hello, playground"

//print(str)

この後に、コードを書き入れて行きましょう。Swiftの公式ページのチュートリアルの例を入力してみましょう。文章の中に数値を含めて使用するときは、記号\() を使用します。letは定数を定義するときに使用されます。以下のコードを入力してみましょう。


let apples = 3
let oranges = 5
let appleSummary = "I have \(apples) apples."
let fruitSummary = "I have \(apples + oranges) pieces of fruit.”
print(appleSummary)
print(fruitSummary)

Xcodeの画面の右上に下のような表示ありますので、


swift_1.jpg


中央部分の表示をクリックすると、下側に「Debugger Area」がせり出します。デバック時などに使えます。下側のウインドウの▶️ボタンをクリックして、これをコンパイルすると、そのウインドウに

I have 3 apples.
I have 8 pieces of fruit.

という結果が表示されます。これがSwiftの基本的な使用方法です。

Xcodeの終了方法は、このPlaygroundファイルを"save"してから、終了します。

 Commandline でSwiftを利用するときは、ターミナルから"$ swift"と打つと、エラーがなければ、


$ swift
Welcome to Apple Swift version 4.2.1 (swiftlang-1000.11.42 clang-1000.11.45.1). 
Type :help for assistance.
  1> 


と返ってきます。プロンプト”1>"の後にコマンド文を入力します。
	
var myVariable = 42
myVariable = 50
let myConstant = 42


と打ってみましょう。"var myVariable = 42"はmyVariableという名称の変数を定義して、その値を42にすることです。その後で、値を50に変更しています。 以下のような表示が出ます。
myVariable: Int = 50
myConstant: Int = 42
  4>  

プログラムの終了は":eixt"と打ちます。"Int"は値が整数になっていることを意味します。


Swiftの文法と記述様式



Swiftの基本的な文法について説明します。いきなりですが、"https://ja.wikipedia.org/wiki/Swift"から引用した以下のコードをコピペしてください。C++と類似の記述方法なので、C++の知識がある人には容易に理解できます。


/*
* コメントはCスタイルの複数行コメントと…
*/
// C++スタイルの一行コメントの双方をサポートしている

// var name:Type = value でType型の変数nameを宣言し、valueで初期化する
var explicitDouble:Double = 70 // 70.0
	
/// 型が省略された場合は、型推論により初期値の型が適用される
var implicitInteger = 70    // Int
var implicitDouble = 70.0   // Double
	
// let name:Type = value でType型の定数nameにvalueを設定する。
// 型推論可能な場合、型の表記は省略できる。
let theAnswer = 42
	
// 識別子にはたいていのUnicode文字を用いることができる。
let リンゴの数 = 3
let みかんの数 = 5
	
// 文字列リテラル"..."の中にある\(expr)には、式exprの内容が展開される
let リンゴ説明 = "私は\(リンゴの数)個のリンゴを持っている。"  // ”私は3個のリンゴを持っている。"
let 果物説明 = "私は\(リンゴの数 + みかんの数)個の果物を持っている。" //"私は8個の果物を持っている。"

// Swiftでは辞書も組み込みでサポートされている。
// 以下は Dictionary 型の定数辞書の定義の一例である。
let people = ["Anna": 67, "Bety": 8, "Jack": 33, "Sam": 25]
	
// 辞書の内容の列挙は for (key, value) in dict { ... }
for (name, age) in people {
print("\(name) is \(age) years old.")
}
	
// メソッドや関数は "func"文法を使って宣言する。
// パラメータ名の付け方に注意。-> で戻り値の型を宣言する
func sayHello(personName: String) -> String {
let greeting = "こんにちは、" + personName + "さん"
return greeting
}
// "こんにちは、Johnさん"を出力
print(sayHello(personName:"John"))
	

このコードで大まかな文法がわかります。

	Jack is 33 years old.
	Sam is 25 years old.
	Bety is 8 years old.
	Anna is 67 years old.
	こんにちは、Johnさん
	

と表示されます。

 上記では条件分岐文の一つであるfor を使っていますが、if文も同様に利用されます。以下のコードをみて下さい。

let individualScores = [75, 43, 103, 87, 12]
var teamScore = 0
for score in individualScores {
    if score > 50 {
        teamScore += 3
    } else {
        teamScore += 1
    }
}
print(teamScore)
// Prints "11”

individualScoresの各要素の数値が50以上の時は、3を加算し、50以下の場合は1を加算すという操作を全要素に対して繰り返します。結果(teamScore)は11となります。以下に、辞書型配列の変数interestingNumbersの要素の数値の比較計算の例を挙げます。

let interestingNumbers = [
    "Prime": [2, 3, 5, 7, 11, 13],
    "Fibonacci": [1, 1, 2, 3, 5, 8],
    "Square": [1, 4, 9, 16, 25],
]
var largest = 0
for (kind, numbers) in interestingNumbers {
    for number in numbers {
        if number > largest {
            largest = number
        }
    }
}
print(largest)
// Prints "25”

このコードを実行すると、最大値が得られます。

関数funcを以下のように定義します。

func 関数名(引数) {
	関数の記述
}
以下のコードで、-> はreturnで返される変数の型とパラメータの型の定義を区別するために使用されています

func greet(person: String, day: String) -> String {
    return "Hello \(person), today is \(day)."
}
greet(person: "Bob", day: "Tuesday")”

結果は
"Hello Bob, today is Tuesday."
となります。


iOS用のアプリの作成



 Xcode を起動します。メニューから、「File」「New」「Create a new Xcode project…」を選択する。すると、choose a template の選択ウィンドウが出てきます。

「iOS」「Single View App」

を選び「Next」とします。最初は 「Single View Application」で始めましょう。


swift_2.jpg


「Product Name」にプロジェクトの名前を入れて、Organization Identifier に登録したApple ID名を入れます。「Language」はSwiftを選択します。「Next」とします。プロジェクトの保存先を聞いてきますので適当な場所を指定します。「create」をクリックします。

 Xcode が立ち上がりいよいよアプリ作成の準備ができました。表示画面は以下のように主に5つのエリアに分かれています。「display」にiphone名を入れ、「team」に自分のIDを選択します。

Toolbar
Navigator area
Editor area
Utility area
Debug area

swift_3.jpg


コードは最初のうちは主に、ViewController.swift に記述します。画面レイアウトはMain.storyboardを使います。

 これで、実際にアプリを作成できる段階になります。Xcode の左上にある三角印とその右側の iOS Simulator を見てください。Simulator を自分が所有するiPhoneに、例えば、「iPhone 8」 を選択して三角印をクリックします。Build Succeededと表示されて、Simulatorのiconがdockに表示されるので、これをクリックします。すると、何も描かれていないiPhone 8の画面がウインドウに表示されます。これは、空のアプリを作成したことになります。

 簡単なアプリを作成します。画面上にはボタンが1つ配置され、タップするとテキストフィールドに文字列が出力されるアプリを想定してください。鹿野さんのWebサイトを参考にしました。XcodeのバージョンがXcode8準拠なので注意してください。

 まずは、「storyboard」で画面を作成します。storyboardとは、Xcodeでアプリの画面を開発するためのファイルを意味します。1画面は「View Controller」とhttps://www.webprofessional.jp/lesson/swift4designers/という単位で区切られ、画面が増えるごとにView Controllerが増えていきます。


swift_4.jpg


「Mainstoryboard」をクリックして開いてください。Webページでボタンやテキストフィールドを表示するときには、button要素や「type="text"」のinput要素を使用します。XcodeによるiOSアプリ開発では、画面右側にあるエリア(オブジェクトライブラリ)から必要な要素をドラッグ&ドロップすることで、要素を配置します。Xcode10から、libraryは右上のiconに移動しました。


swift_5.jpg


ボタン用の[Button]オブジェクト、テキストフィールド用の[Text Field]オブジェクトをそれぞれ配置してみましょう。右上に配置されたライブラリ(コインマーク)、これをクリックして、検索します。buttonと入力して、表示された「Button ..」をiPhone画面にドラッグ&ドロップします。次に、textと入力して、「Text ..」をドラッグ&ドロップします。ボタンとテキストの配置は好きなようにします。

 アプリの画面ができたので、プログラムで動きを実装しましょう。WebGLの場合は、HTML・CSSで作成した要素に対してJavaScriptで通信をしたり、アニメーションを実装したりします。iOSアプリでは、Swiftを使ってプログラムを作ります。右上の二つの円環マークをクリックすると、StroryboardのiPhine画面とViewController.swiftのエディターが並んで表示されます。

 次のようにして画面(View Controller)とプログラム(UIViewController.swift)を紐付けます。

① テキストフィールド上で右クリックしながら、ViewController.swiftまで線を引っ張ります(右クリック、ドラッグ&ドロップ)
② Connection(接続方法)を、[Outlet]に設定します
③ Nameの箇所に、テキストフィールドの名前を入れます(例として、myTextFieldと設定)
これで、Swift上から画面のテキストフィールドをmyTextFieldという名前で操作できるようになりました。このような接続方法をIBOutletといいます。

 次に、ボタンタップ時のイベントを設定します (IBAction)。
① ボタン上で[control]キーを押しながらViewController.swiftまで線を引っ張る
② [Connection]を[Action]に設定する
③ [Name]に、処理の名前を入力(例として、onButtonTapと設定する)

完了すると、onButtonTapという名前の関数ができます。ボタンをタップした際に実行される関数です。このような接続方法をIBActionといいます。

 最後に、追加の部分を挿入して、ViewController.swiftを以下のように修正します。


//
//  ViewController.swift
//  TestApp
//
//  Created by 増山幸一 on 2019/02/06.
//  Copyright © 2019 増山幸一. All rights reserved.
//

import UIKit

class ViewController: UIViewController {

@IBAction func onButtonTap(_ sender: Any) {
myTextField.text = "タップされました" // 追加の部分
}
@IBOutlet weak var myTextField: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}

}

 画面の作成、プログラムの作成が完了したので、実際にアプリとして動かしてみましょう。アプリの動作を確認するには、iOSシミュレーターを使う方法と、iOS実機端末を使う方法があります。iOSシミュレーターとは、macOS上でiOSの動作を確認できるツールです。処理が重く画面のアニメーションがやや遅い等の制限はありますが、コンテンツの挙動をすばやく確認したい場合に便利です。iOSシミュレーターで確認してみましょう。画面上部のツールバーより、シミュレートしたい端末を選択、iPhone 8を選択し、Xcode の左上にある三角印をクリックすると、iOSシミュレーターが起動します。シミュレータの画面をtapすると、以下の画面が表示されます。


swift_6.png


Xcodeの使い方, iOSアプリ作成の関するwebsiteは多数あります。例えば、以下のWebsiteも初心者には参考になります。


Metalでcomputer graphicsのページ

トップ・ページに行く