Swift Playground - コードを学ぼう2【変数】Part 1

Swift Playground「コードを学ぼう2」で変数について学習しましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

Swift Playground - コードを学ぼう2【変数】Part 1

変数の使い方を学ぼう

プログラミング言語 Swift を楽しく体験できる Swift Playground で、コーディングの基礎を学びましょう。

今回紹介するのは、「コードを学ぼう2」の第1チャプタ「変数」です。全部で8つのレッスンを3回に分けて解説していきます。

  • レッスン1〜3:この記事で取り上げます。変数とはどういうものかを知り、使い方を練習していきましょう。
  • レッスン4〜5:次回の Part 2 では、変数をループの条件に使ってコーディングします。
  • レッスン6〜8:Part 3 では、定数について説明し、変数との使い分けを学習します。

「コードを学ぼう1」は実習済みですか?まだの方は以下の記事からご覧ください。

Swift Playground - コードを学ぼう1【コマンド】Part 1
Swift Playground「コードを学ぼう1」でコマンドの使い方をマスターしましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

レッスンのポイント

変数とは、値・データを入れておくための「名前付きの箱」のようなものです。プログラムでは、数値や文字などのデータをそのまま使うのではなく、あとで使い回せるように名前をつけて保存しておくのが一般的です。そのために使うのが「変数」です。

  • 新しく変数を作ることを「変数を宣言する」といいます。
  • 変数の宣言は、キーワード var(ヴァー)を使って下のように書きます。
  • 変数名と値の間にある = は、イコール(等号)ではなく、変数に値を入れるための「代入演算子」です。
// 変数を宣言する
var 変数の名前 = 変数に入れる値

変数の名前は「どんな値を格納するのか」が分かりやすいものにすることが大切です。意味のある変数名を使うことでプログラムが読みやすくなり、何の値なのか、何をする処理なのかを一目で理解できるようになります。

// 例

// 値段を格納する変数
var price = 150

// ユーザー名を格納する変数
var userName = "Ken"

変数に格納した値は、あとから別の値に変更し上書きすることができます。「変数」という名前のとおり、状況によって変化する値を扱うことが変数の特徴です。

// 例

// 変数宣言(最初の値は0)
var score = 0

// 変数の値を10にする
score = 10

このチャプタでは、ただ単に宝石を集めたりスイッチを切り替えたりするだけでなく、宝石やスイッチの数を変数に保存・記録できるようにコーディングをしていきます。

さて、「コードを学ぼう2」からは新しいキャラクターが登場しますよ。「コードを学ぼう1」で活躍したバイト(Byte)に代わって、緑色のホッパー(Hopper)に動いてもらいましょう。

ステージに登場する緑色のキャラクター、ホッパー
ステージに登場する緑色のキャラクター、ホッパー

では、次のセクションからレッスン開始です!

※ この記事で紹介しているコードは、あくまで一つの例です(動作確認 Swift Playground 4.7)。プログラミングでは、同じ動きを作る方法がいくつもあります。いろいろなやり方を試しながら、自分なりの答えを見つけてみてください。

レッスン1「記録する」

【目標】

  • 変数の作り方を知る
  • 変数に値を代入する
Swift Playground/コードを学ぼう2/変数/記録する
Swift Playground/コードを学ぼう2/変数/記録する

課題解決の流れ

1. 入力済みのコードを確認しよう
このレッスンでは以下のコードがすでに入力されています。

// 入力済みのコード

var gemCounter = value

gemCounter は、集めた宝石の数を記録するための変数です。値は value となっていて、まだ設定されていません。

  • gemCounter:宝石カウンター

ホッパーを動かして宝石を取り、取った宝石の数を変数 gemCounter に記録するコードを書いていきましょう。

2. 変数の初期値を設定しよう
まずは、変数の初期値を設定します。

宝石を集める前なので、 gemCounter に入れる最初の値は 0 です。value の部分を選択して 0 を入力してください。

// 初期値を設定する
var gemCounter = 0

3. 宝石を取りに行こう
変数を宣言できたら、宝石を取りに行きます。

// 2マス進んで、宝石を取る
moveForward()
moveForward()
collectGem()

4. 変数に新しい値を代入しよう
宝石を取ったら、gemCounter1 を代入しましょう。

// 変数に1を代入する
gemCounter = 1

変数に具体的な値を入れることを「値を代入する」などといいます。新しい値を代入するときは変数名の前に var を使わない、ということに注意してください。キーワードの var を使うのは、変数を宣言する(新しく変数を作る)ときだけです。

5. コードを実行しよう
「コードを実行」を押して動きを確かめます。宝石を取ったあとにステージ上部に表示されるカウンターの数が0から1に変わったら、ステージクリアです!

// コード正解例

var gemCounter = 0

moveForward()
moveForward()
collectGem()
gemCounter = 1
ステージをクリアする動き
ステージをクリアする動き

レッスン2「値を増やす- Bump Up the Value」

【目標】

  • 変数に新しい値を代入する
Swift Playground/コードを学ぼう2/変数/値を増やす
Swift Playground/コードを学ぼう2/変数/値を増やす

課題解決の流れ

1. 変数の初期値を設定しよう
このレッスンでは以下のコードがすでに入力されています。

// 入力済みのコード

var gemCounter = value

今回は集める宝石が複数あります。宝石を取るたびに、変数 gemCounter に新しい値を代入していくコードを書いていきましょう。

まずは、変数の初期値を設定します。value の部分を選択して 0 を入力してください。

// 初期値を設定する
var gemCounter = 0

2. 変数に新しい値を代入しよう
変数を用意できたら宝石を取りに行きます。宝石を取ったあとは、変数に新しい値を代入しましょう。

// 1つ目の宝石を取りに行く
moveForward()
collectGem()

// 変数に新しい値を代入する
gemCounter = 1

// 2つ目の宝石を取りに行く
moveForward()
collectGem()

// 変数に新しい値を代入する
gemCounter = 2

3つ目以降も同じように、宝石を集めたあとに変数の値が更新されるよう、コードを追加してくださいね。

3. コードを実行しよう
「コードを実行」を押して動きを確かめます。集めた宝石の数と同じくカウンターの数が増えたら、ステージクリアです!

// コード正解例

var gemCounter = 0

moveForward()
collectGem()
gemCounter = 1
moveForward()
collectGem()
gemCounter = 2
moveForward()
collectGem()
gemCounter = 3
moveForward()
collectGem()
gemCounter = 4
moveForward()
collectGem()
gemCounter = 5

レッスン3「値を増やす- Incrementing the Value」

【目標】

  • 変数の値を1ずつ増やす
  • while ループで繰り返す
Swift Playground/コードを学ぼう2/変数/値を増やす
Swift Playground/コードを学ぼう2/変数/値を増やす

課題解決の流れ

1. 変数の初期値を設定しよう
このレッスンでは以下のコードがすでに入力されています。

// 入力済みのコード

var gemCounter = value

まずは、変数の初期値を設定しましょう。これから宝石を集めに行くので、gemCounter の最初の値は 0 です。

// 初期値を設定する
var gemCounter = 0

2. while ループで繰り返そう
このステージは、コードを実行するたびに宝石がランダムに現れます。宝石があるかどうかを1マスずつ調べながらゴールまで進みましょう。

  • 外側のループで最後の行き止まりまで繰り返します。
  • 内側のループで途中の行き止まりまで繰り返します。
// 行き止まりではない間繰り返す(最後の行き止まり)
while !isBlocked {

	// 行き止まりではない間繰り返す(途中の行き止まり)
	while !isBlocked {

	}

}

while ループについては以下の記事で取り上げているので参考にしてください。

Swift Playground - コードを学ぼう1【while ループ】Part 2
Swift Playground「コードを学ぼう1」で while ループをネストする方法をマスターしましょう。本記事ではプログラミング初心者にも分かりやすいように解説し、コードの正解例を掲載しています。

3. 変数の値を1ずつ増やそう
前のレッスンでは、宝石を取ったあとに変数に代入する値は「集めた宝石の合計数」でしたね。今回はそうではなく、宝石を1つ取るたびに変数の値が1ずつ増えるようにコーディングしていきます。宝石カウンターを1ずつ増やす文は次のとおりです。

  • gemCounter = gemCounter + 1:今の変数の値に1をプラスし、それを新しい値として変数に代入する

今いるマスに宝石があれば取って、変数の値を1増やします。宝石を取ったら次のマスへ進みましょう。宝石のないマスにいる場合は、ただ進むだけです。

while !isBlocked {

	while !isBlocked {

		// 宝石の上にいるなら取って、変数を1増やす
		if isOnGem {
			collectGem()
			gemCounter = gemCounter + 1
		}

		// 次のマスへ進む
		moveForward()
	}

}

4. ゴールまで進み続けよう
途中の行き止まりで内側のループの条件が false になり、ループから抜けます。右を向いて、先へ進めるようにしましょう。

while !isBlocked {

	while !isBlocked {
		if isOnGem {
			collectGem()
			gemCounter = gemCounter + 1
		}
		moveForward()
	}

	// 行き止まりなら右を向く
	turnRight()
}

右を向いたあとは外側のループに戻ります。右を向いたあとなので外側のループの条件は成立し、再び内側のループに入ります。

途中の行き止まりで右を向く
途中の行き止まりで右を向く

最後のマスで右を向いたあとは行き止まりなので、外側のループの条件が成立せず、ループ終了です。

5. コードを実行しよう
「コードを実行」を押して動きを確かめましょう。宝石を取るたびにカウンターの値が1ずつ更新され、すべての宝石を集められたらステージクリアです!

// コード正解例

var gemCounter = 0

while !isBlocked {
	while !isBlocked {
		if isOnGem {
			collectGem()
			gemCounter = gemCounter + 1
		}
		moveForward()
	}
	turnRight()
}

まとめ

今回は、Swift Playground の「コードを学ぼう2」で、変数について学習しました。

変数とは、値を入れておくための名前付きの箱のようなものです。プログラムには数値や文字など様々なデータが含まれます。これらをそのまま使うのではなく、変数に格納して扱うようにすると、コードが読みやすくなり、プログラムを管理しやすくなるというメリットがあります。変数の中に入れた値はあとから変更することが可能である、という特徴を覚えておきましょう!

次回予告

次のレッスンからは変数を使ってでできることがさらに増えます。変化する変数の値を利用して、「変数の値が 〇〇 になるまで繰り返す」という while ループを書いていきます。

最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです!

SNS で Pyxofy とつながりましょう! LinkedInThreadsBlueskyMastodon X (Twitter) @pyxofyFacebook

関連記事

スクラッチプログラミング - くるまをうんてんするゲームのつくりかた
車(くるま)をうごかして駐車場(ちゅうしゃじょう)にとめるゲームをつくってみましょう。やじるしキーで車(くるま)を操作(そうさ)して、失敗(しっぱい)しても、くりかえしやりなおせるようにプログラミングします。
JavaScript - ボタンを押して表示を切り替える方法
ボタンをクリックしてコンテンツの表示 / 非表示を切り替えたり、ウェブページの表示をダークモードにする方法を解説します。CSS に切り替えたいクラスを追加して toggle() メソッドで切り替えるだけなので簡単です。
CSS Art – How to Make a 3D Cube With CSS
Why settle for two dimensions when you can have three? Learn how to make a three-dimensional CSS cube and then rotate it into multiple angles.
CSS Animation – @property Linear Gradient Rotate Animation with cubic-bezier()
Yes, CSS linear gradients can be rotated! Join us in this step-by-step article to learn how to animate multicolor shapes with CSS @property.