furuta – ページ 3 – Swift Playgroundsの遊び場

動作確認Ver: 3.1 2017年6月16日2017年6月17日

配列 4. 順番に並べる

配列に後から要素を追加したり削除したりする練習です。
7行目までの部分でcharactersという配列が用意され、Blu型キャラクター、ワープポータル、Hopper型キャラクター、宝石が入れられます。キャラクター以外のものが混じってたりするので修正したいのですが、直接4行目や6行目を削除することはできません。ここでは一旦作って中身を入れてしまった後の配列に対し、.removeメソッドで要素を消したり.insertメソッドで追加したりする練習をするのが目的だからです。

まず正解例はこんな感じになります。

//最初に用意されるcharacters配列 （余分なものが含まれていますがここは編集できません）
characters = [
    Character(name: .blu),
    Portal(color: #colorLiteral(red: 0.91, green: 0.47, blue: 0.64, alpha: 1)), //ピンク
    Character(name: .hopper),
    Gem()
]

// Remove the portal. （ポータルを削除しなさい）
characters.remove(at: 1)
// Remove the gem. (宝石を削除しなさい)
characters.remove(at: 3) //配列の範囲外エラーになる
// Insert the expert. (expertを追加しなさい）
characters.insert(Expert(), at: 1)

var rowPlacement = 0 //毎回位置をズラすための変数
//characters配列の中の1つ1つをcharcter変数にセットして繰り返す
for character in characters {
    world.place(character, at: Coordinate(column: 1, row: rowPlacement))
    rowPlacement += 1 //row:パラメーターを1ずつズラす為、1を足していく
}

//最初に用意されるcharacters配列（余分なものが含まれていますがここは編集できません）

characters = [

Character(name: .blu),

Portal(color: #colorLiteral(red: 0.91, green: 0.47, blue: 0.64, alpha: 1)), //ピンク

Character(name: .hopper),

Gem()

]

// Remove the portal. （ポータルを削除しなさい）

characters.remove(at: 1)

// Remove the gem. (宝石を削除しなさい)

characters.remove(at: 3) //配列の範囲外エラーになる

// Insert the expert. (expertを追加しなさい）

characters.insert(Expert(), at: 1)

var rowPlacement = 0 //毎回位置をズラすための変数

//characters配列の中の1つ1つをcharcter変数にセットして繰り返す

for character in characters {

world.place(character, at: Coordinate(column: 1, row: rowPlacement))

rowPlacement += 1 //row:パラメーターを1ずつズラす為、1を足していく

}

■配列から要素を削除したり追加するには

配列名に対してドット記法で.removeや.insertメソッドを指定します。この際、.removeなら何番目の要素を削除するかをパラメーターとして指定してやります。

(配列名).remove(at: (何番目の要素を削除するか))

1	(配列名).remove(at: (何番目の要素を削除するか))

ここで非常に重要な注意点があります。3〜6行目をみると、余分な要素であるポータルと宝石は2番目と4番目にあります。配列の中身は0から数えるルールなので、

characters.remove(at: 1) //ポータルを削除
characters.remove(at: 3) //宝石を削除

1 2	characters.remove(at: 1) //ポータルを削除 characters.remove(at: 3) //宝石を削除

としてみたのではないでしょうか？そうすると宝石を削除する方が配列の範囲外エラーになります。どうしてでしょう？この理由をイメージできる感覚はプログラミングにとても重要な気がしますので、じっくり考えてみてください。正解は最後に。

でとりあえず次は挿入。.insertの場合は、なにを足すかと、どこに割り込ませるかを指定します。

(配列名).insert((追加するオブジェクト), at: (何番目に割り込ませるか))

1	(配列名).insert((追加するオブジェクト), at: (何番目に割り込ませるか))

■16行目以降について

今回はループ毎に配列の中身を順に読み出しても変化するのはキャラクターの種類だけです（Blu->Expert->Hopper）。それとは別に配置する位置は自分でズラしていかなければなりません。そこで、rowの値が繰り返し毎に1ずつズレていくよう別の変数rowPlacementを用意して工夫します。最初に16行目で0をセットしておくことで、初回のループではrow:パラメーターが0になり、(1,0)の位置にBluが出現します。そして繰り返しで戻る前の20行目で1を足しておくことで、2回目は(1,1)にExpertが、3回目は(1,2)にHopperが出てくるわけです。

■なぜ12行目は範囲外エラーになるのか？

さて、あえて正解例コードにバグを入れておいた「範囲外エラー」の答え合わせについてです。範囲外エラーなので試しに数字を小さくしてみれば上手くいっちゃったりするかも知れません。そう、正解は、3ではなく2ですね。大事なのは何故かです。これは直前の行でワープポータルを削除したことに関係します。
最初はこうでした。

characters = [
    Character(name: .blu),
    Portal(color: #colorLiteral(red: 0.91, green: 0.47, blue: 0.64, alpha: 1)), //ピンク
    Character(name: .hopper),
    Gem()
]

characters = [

Character(name: .blu),

Portal(color: #colorLiteral(red: 0.91, green: 0.47, blue: 0.64, alpha: 1)), //ピンク

Character(name: .hopper),

Gem()

]

その後で、

characters.remove(at: 1)

1	characters.remove(at: 1)

したらどうなるでしょう？

characters = [
    Character(name: .blu),
    Character(name: .hopper),
    Gem()
]

characters = [

Character(name: .blu),

Character(name: .hopper),

Gem()

]

こうですね。つまり、charactersの中のオブジェクト数は4から3に減りました。そして、Gem()の順番も4番目でなく3番目に繰り上げになっています。配列は0番スタートなので、3番目ということは0,1,2で2を指定する必要があるわけです。3を指定するということは存在しない4番目を削除しようとすることになるので、範囲外エラーというわけですね。
もちろん、.insertする場合も影響しますので、常にその時点で配列の中がどうなっているかを意識しましょう。

動作確認Ver: 3.1 2017年6月16日2017年6月17日

配列 3. ブロックを積む

配列の各部屋には

let columns = [0, 1, 2, 3, 4, 5]

1	let columns = [0, 1, 2, 3, 4, 5]

のように整数を入れるだけでなく、様々な型のオブジェクトを入れることができます。

このステージでは列番号と行番号をひとまとまりにしたCoordinate(座標)型というオブジェクトを配列に格納します。ちょっと入れ子のようでややこしいですが、「カンマで区切られた数だけ、同じ型のものが順番に入れられる」という意味では整数の時と全く同じなので気を楽にしてください。

まずは正解例はこんな感じになります。

// Add the two remaining corner coordinates.
// (残り2つの角の座標を追加してください)
var blockLocations = [
    Coordinate(column: 0, row: 0),
    Coordinate(column: 3, row: 3),
    Coordinate(column: 0, row: 3),
    Coordinate(column: 3, row: 0),
]
// Place 5 blocks at each coordinate.
// (それぞれの座標に5つのブロックを積み上げてください。)
for coordinate in blockLocations {
    for i in 1 ... 5 {
        world.place(Block(), at: coordinate)
    }
}

// Add the two remaining corner coordinates.

// (残り2つの角の座標を追加してください)

var blockLocations = [

Coordinate(column: 0, row: 0),

Coordinate(column: 3, row: 3),

Coordinate(column: 0, row: 3),

Coordinate(column: 3, row: 0),

]

// Place 5 blocks at each coordinate.

// (それぞれの座標に5つのブロックを積み上げてください。)

for coordinate in blockLocations {

for i in 1 ... 5 {

world.place(Block(), at: coordinate)

}

3行目から8行目は長いので改行していますが、[]でひとまとまりで、4つのCoodinate型オブジェクトをblockLocationsという名前の配列に入れていることになります。

もしピンとこなければこういうコードで考えてみてください。

var coodinate1 = Coordinate(column:0, row:0)
var coodinate2 = Coordinate(column:3, row:3)
var coodinate3 = Coordinate(column:0, row:3)
var coodinate4 = Coordinate(column:3, row:0)

var BlockLocations = [coodinate1,coodinate2,coodinate3,coodinate4]

var coodinate1 = Coordinate(column:0, row:0)

var coodinate2 = Coordinate(column:3, row:3)

var coodinate3 = Coordinate(column:0, row:3)

var coodinate4 = Coordinate(column:3, row:0)

var BlockLocations = [coodinate1,coodinate2,coodinate3,coodinate4]

正解例コードの14行目でもやっていますが、「後で名前で参照できなくて良いオブジェクトはいきなり型名を指定してもOK」でしたよね。「ステージを作る」章の「階段を置く」で出てきた省略記法です。これと同じことをすると、上のコードは、正解例コードの3〜8行目のように書けるわけです。

ということで、blockLocationには4箇所の座標（ステージの4隅）を示す4つのCoordinate型オブジェクトが入りました。これをfor〜in文を使って繰り返します。blockLocation配列から1つずつ取り出されてcoodinateという名前でループ内で利用可能になるので、13行目のworld.place文でat:パラメーターの中身が置き換えられます。最初のループでは、

world.place(Block(), at: Coordinate(column: 0, row: 0))

1	world.place(Block(), at: Coordinate(column: 0, row: 0))

としたのと同じことになります。2ループ目は

world.place(Block(), at: Coordinate(column: 3, row: 3))

1	world.place(Block(), at: Coordinate(column: 3, row: 3))

ですね。

動作確認Ver: 3.1 2017年6月15日2017年6月17日

配列 2. 反復処理を試す

for文によるループと配列の組み合わせを学ぶステージです。配列に入っているひとつひとつの要素（オブジェクト）に対して同じ処理をさせることができます。全く同じ処理というだけでなく、要素毎の違い活用した処理ができるのが強みです。
例えばこのステージでは、0〜5番目の各列に宝石とスイッチを配置します。今までのやり方だと、こんな風になります。

world.place(Gem(),atColumn:1, row:1)
world.place(Switch(),atColumn:1, row:1)
world.place(Gem(),atColumn:2, row:1)
world.place(Switch(),atColumn:2, row:1)
world.place(Gem(),atColumn:3, row:1)
world.place(Switch(),atColumn:3, row:1)
world.place(Gem(),atColumn:4, row:1)
world.place(Switch(),atColumn:4, row:1)
world.place(Gem(),atColumn:5, row:1)
world.place(Switch(),atColumn:5, row:1)

world.place(Gem(),atColumn:1, row:1)

world.place(Switch(),atColumn:1, row:1)

world.place(Gem(),atColumn:2, row:1)

world.place(Switch(),atColumn:2, row:1)

world.place(Gem(),atColumn:3, row:1)

world.place(Switch(),atColumn:3, row:1)

world.place(Gem(),atColumn:4, row:1)

world.place(Switch(),atColumn:4, row:1)

world.place(Gem(),atColumn:5, row:1)

world.place(Switch(),atColumn:5, row:1)

ほぼ同じパターンが5回繰り返されますが、残念ながらatColumn:パラメーターが違うので単純なfor文ループにはできません。
まさにこんな時に、配列を使った繰り返しが役に立ちます。
同じforで始まりますが、

for (ループ内での変数名) in (配列名) {
    (ループさせたい処理)
}

for (ループ内での変数名) in (配列名) {

(ループさせたい処理)

}

のように書きます。これで「(配列名)の中にある要素ひとつひとつを(ループ内での変数名)に入れつつ、(ループさせたい処理)を実行」という意味になります。
正解例のコードを見てみましょう。

//columnsという配列に0〜5の6つの整数(Int）値を入れておく。
let columns = [0, 1, 2, 3, 4, 5]

// Give your loop variable a name and pass in your array.
for column in columns {
    // Place a gem and a switch for each column.
    // (各列に宝石とスイッチを配置)
    world.place(Gem(), atColumn: column, row: 1)
    world.place(Switch(), atColumn: column, row: 1)
}

//columnsという配列に0〜5の6つの整数(Int）値を入れておく。

let columns = [0, 1, 2, 3, 4, 5]

// Give your loop variable a name and pass in your array.

for column in columns {

// Place a gem and a switch for each column.

// (各列に宝石とスイッチを配置)

world.place(Gem(), atColumn: column, row: 1)

world.place(Switch(), atColumn: column, row: 1)

}

columns配列の中身が前から1つずつ取り出され、columnという変数に入れられてループ内の処理が行われます。1ループ目はcolumnの中身は0です。なので、world.placeメソッドの中のatColumn:パラメーターには0と書いたのと同じことになります。
そして最初のループが終わって繰り返される時、columnには2番目の値の1がセットされます。つまり2回目のループではatColumn:は1になります。以下、atColumn:が2,3,4,5と変化しながら繰り返されていきます。最終的に全ての陸地にスイッチと宝石が並んでいることでしょう。
このように、ちょっとずつ違う処理を繰り返す時に、その違う部分を変数に置き換えておき、このfor〜in文で毎回変数の中身を変えてやる方法が利用できます。

動作確認Ver: 3.1 2017年6月15日2017年6月16日

配列 1. 情報をまとめて保存

配列とは変数の一種ですが、中に仕切りがあってそれぞれの部屋に通し番号がついているものを想像してください。仕切りがあるので中に複数の値やオブジェクトを格納しつつ、全体をひとまとまりとして扱うことができます。また中身を通し番号で指定できるのでループと非常に相性が良いのが特徴です。
出題文通り、まずはそのまま実行してみましょう。4体のキャラクターが出現します。これは、最後の行にある

placeCharacters(at:rows)

1	placeCharacters(at:rows)

がrowsという配列変数の中のひとつひとつの数字を座標にしてキャラクターを並べてくれます。placeCharactersコマンドについてはあまり深く考える必要はありません。ともかくrowsの中に0が入っていたら(0,0)に、1があれば(0,1)にキャラクターが出ると思っておきましょう。
さて、最初の状態では、4体しか出てきません。空いたコマが2つあります。(0,2）と(0,6）ですね。逆にいうと、(0,0)、(0,1)、(0,3)、(0,4)に出現しています。これがそのまま先頭行の

let columns = [0, 1, 3, 4]

1	let columns = [0, 1, 3, 4]

から来ているわけです。足りない数字を追加してやりましょう。数字と数字は半角カンマで区切ります。

// Add any missing rows to your array.
//（配列に足りない行を足してください）
var rows = [0, 1, 2, 3, 4, 5]

// Places a Character on each row in rows.
//(rowsの中のそれぞれの行にCharacterを配置してください)
placeCharacters(at: rows)

// Add any missing rows to your array.

//（配列に足りない行を足してください）

var rows = [0, 1, 2, 3, 4, 5]

// Places a Character on each row in rows.

//(rowsの中のそれぞれの行にCharacterを配置してください)

placeCharacters(at: rows)

（標準の各英文コメントの後ろに訳を入れてあります）

動作確認Ver: 3.1 2017年6月14日2017年6月14日

ステージを作る 7. 自分だけのステージ

ここは特にクリア条件もなく、world.place()メソッドで好きなオブジェクトを置いてみましょう、というステージなので、それこそ正解はないので今まで憶えたパターンをおさらいしてみましょう。
座標は列番号columnと行番号rowの組み合わせで指定します。マップ上の特定のコマをタップすると(0,0）のような形で表示されますので、自分で数えるよりも早いでしょう。

//■ブロックを配置
world.place(Block(), atColumn: 1, row: 3) //座標を指定

//■宝石を配置
world.place(Gem(), atColumn: 3, row: 2) //座標を指定

//■階段を配置
world.place(Stair(), facing: south, atColumn: 3, row: 1) //向きと座標を指定

//■Characterを配置（名前をつけてインスタンス化したものを指定する）
let ch = Character() 
world.place(ch, facing: north, atColumn: 3, row: 0) //向きと座標を指定
ch.moveForward() //名前を指定して操作

//■ポータルを配置（名前をつけてインスタンス化したものを指定する）
let greenPortal = Portal(color: #colorLiteral(red: 0.4, green: 0.7, blue: 0.2, alpha: 1)) //色を指定
world.place(greenPortal, atStartColumn: 1, startRow: 5, atEndColumn: 5, endRow: 1) //ワープ元座標とワープ先座標を指定
greenPortal.isActive = false //名前を指定して操作

//■ブロックを配置

world.place(Block(), atColumn: 1, row: 3) //座標を指定

//■宝石を配置

world.place(Gem(), atColumn: 3, row: 2) //座標を指定

//■階段を配置

world.place(Stair(), facing: south, atColumn: 3, row: 1) //向きと座標を指定

//■Characterを配置（名前をつけてインスタンス化したものを指定する）

let ch = Character()

world.place(ch, facing: north, atColumn: 3, row: 0) //向きと座標を指定

ch.moveForward() //名前を指定して操作

//■ポータルを配置（名前をつけてインスタンス化したものを指定する）

let greenPortal = Portal(color: #colorLiteral(red: 0.4, green: 0.7, blue: 0.2, alpha: 1)) //色を指定

world.place(greenPortal, atStartColumn: 1, startRow: 5, atEndColumn: 5, endRow: 1) //ワープ元座標とワープ先座標を指定

greenPortal.isActive = false //名前を指定して操作