プログラミング基礎・変数とは何か | TypeScript + PhaserJS ゲーム開発

📚 この章で学ぶこと

変数の基本概念

• 変数とは何か（箱の概念）
• なぜ変数が必要なのか
• const（定数）とlet（変数）の違い
• 変数の命名ルール

実践的なスキル

• 分かりやすい変数名の付け方
• コードの読みやすさの向上
• プログラムの保守性の向上
• 実際にコードを書いて体験

💡 プログラミングの第一歩

変数は、プログラミングにおける最も基本的で重要な概念です。この章では、身近な例を使って変数の概念を理解し、ゲーム開発での実際の使用例も見ていきます。

📦 変数とは何か？

変数は、プログラミングで最も重要な概念の一つです。まずは身近な例から理解していきましょう。

🏷️ 現実世界での「箱」の概念

変数は「名前のついた箱」のようなものです。この箱に様々な情報を入れて、後で取り出すことができます。

📚 学校のロッカーを例にすると：

ロッカー番号「15」 → 変数名

中に入っている教科書 → 変数の値

「15番ロッカーに数学の教科書を入れる」 → 値の代入

「15番ロッカーから教科書を取り出す」 → 値の取得

🏪 お店の商品棚を例にすると：

棚の名前「りんご売り場」 → 変数名

棚に並んでいるりんごの個数 → 変数の値

「りんご売り場に50個並べる」 → 値の代入

「りんご売り場から1個取る」 → 値の操作

🎮 ゲームでの変数活用例

プレイヤーのスコア： 「score」という箱に点数を保存

プレイヤーの位置： 「playerX」「playerY」という箱に座標を保存

残りライフ： 「lives」という箱に残り回数を保存

ゲーム状態： 「gameStarted」という箱にゲームが始まっているかを保存

🤔 なぜ変数が必要なのか？

❌ 変数を使わない場合

// スコアを表示
console.log("現在のスコア: " + 1250);

// スコアをチェック
if (1250 > 1000) {
    console.log("ハイスコア達成！");
}

// スコアを保存
saveToDatabase(1250);

問題点：

• 同じ数値を何度も書いている

• スコアが変わったら全部書き換えが必要

• ミスタイプのリスク

• コードの意味が分かりにくい

✅ 変数を使った場合

// スコアを変数に保存
let currentScore = 1250;

// スコアを表示
console.log("現在のスコア: " + currentScore);

// スコアをチェック
if (currentScore > 1000) {
    console.log("ハイスコア達成！");
}

// スコアを保存
saveToDatabase(currentScore);

利点：

• スコアは1箇所で管理

• 値を変更するのも1箇所だけ

• ミスタイプのリスクが減る

• コードの意味が明確

💡 変数の真の価値

🔄 再利用性： 一度定義すれば何度でも使える

🛠️ 保守性： 値を変更するのは一箇所だけ

📖 可読性： 意味のある名前でコードが読みやすくなる

🚫 エラー防止： タイプミスや書き間違いを減らせる

🔧 const（定数）とlet（変数）の違い

📌 const（コンスト）

意味：

constant（定数）の略

「変わらない値」を保存する箱

特徴：

• 一度値を入れたら変更できない

• 作成時に必ず値を設定する必要がある

• 変更しようとするとエラーになる

使用例：

const gameTitle = "モグラたたき";
const maxPlayers = 4;
const pi = 3.14159;

🔄 let（レット）

意味：

「変わる可能性のある値」を保存する箱

プログラムの実行中に値を変更できる

特徴：

• 値を後から変更できる

• 最初は空の状態で作ることもできる

• ゲーム中に変わる値に使う

使用例：

let score = 0;        // 初期値は0
score = 100;       // 100に変更
score = score + 50; // 150に変更

🎯 どちらを使うべき？

constを使う場面：

• ゲームのタイトル、設定値

• 画像ファイルのパス

• ゲームのルール（最大ライフ数など）

• 数学定数（円周率など）

letを使う場面：

• プレイヤーのスコア

• キャラクターの位置座標

• 残りライフ、残り時間

• ゲームの状態（開始中、終了など）

💡 基本ルール：

迷ったらまずconstを使い、後から変更が必要になったらletに変える

🏷️ 変数の命名ルール

📏 技術的なルール（必須）

✅ 使える文字：

• 英字（a-z, A-Z）

• 数字（0-9）※ただし最初の文字には使えない

• アンダースコア（_）

• ドル記号（$）

❌ 使えない文字・ルール：

• 日本語文字（ひらがな、カタカナ、漢字）

• スペース（空白文字）

• ハイフン（-）

• 数字で始まる名前

• 予約語（if, for, function など）

🎨 読みやすい命名のコツ

✅ 良い例：

playerScore - プレイヤーのスコア

enemyCount - 敵の数

gameStarted - ゲーム開始フラグ

maxHealth - 最大体力

❌ 悪い例：

a - 何の変数か分からない

x123 - 意味不明

temp - 一時的な値だが何の？

data - 抽象的すぎる

🐫 camelCaseという書き方

camelCase（キャメルケース）とは：

• 複数の単語をつなげる時の書き方

• 最初の単語は小文字、2番目以降は大文字で開始

• ラクダ（camel）のコブのように見えることから命名

例：

playerScore ← player + Score

gameOverMessage ← game + Over + Message

currentLevel ← current + Level

isGameStarted ← is + Game + Started

✍️ 実際にコードを書いてみよう

変数の概念を理解したところで、実際にコードを書いて体験してみましょう。 VSCodeで新しいファイルを作成し、以下のコードを入力してみてください。

// variables-practice.js
// ゲームの基本設定（変更されない値 → const）
const gameTitle = "はじめてのゲーム";
const maxLevel = 10;
const startingLives = 3;

// プレイヤーの状態（ゲーム中に変わる値 → let）
let playerName = "プレイヤー1";
let currentScore = 0;
let currentLevel = 1;
let remainingLives = startingLives;

// ゲーム開始時の表示
console.log("=== " + gameTitle + " ===");
console.log("プレイヤー: " + playerName);
console.log("現在のレベル: " + currentLevel + " / " + maxLevel);
console.log("スコア: " + currentScore);
console.log("残りライフ: " + remainingLives);

// ゲームプレイのシミュレーション
console.log("\n--- ゲーム開始！ ---");

// スコア獲得
currentScore = currentScore + 100;
console.log("敵を倒した！ スコア: " + currentScore);

// レベルアップ
currentLevel = currentLevel + 1;
console.log("レベルアップ！ 現在のレベル: " + currentLevel);

// ライフを失う
remainingLives = remainingLives - 1;
console.log("ダメージを受けた！ 残りライフ: " + remainingLives);

// 最終状態の表示
console.log("\n--- 現在の状態 ---");
console.log("プレイヤー: " + playerName);
console.log("レベル: " + currentLevel + " / " + maxLevel);
console.log("スコア: " + currentScore);
console.log("残りライフ: " + remainingLives);

🖥️ コードの実行方法

1. VSCodeで新しいファイルを作成（Ctrl + N）

2. ファイル名を「variables-practice.js」として保存

3. 上記のコードをコピー&ペースト

4. VSCodeのターミナルで以下のコマンドを実行：

node variables-practice.js

🎯 このコードから学べること

変数の使い分け： constとletの適切な使い方

命名の重要性： 意味のある変数名がコードを読みやすくする

値の変更： letで宣言した変数は後から値を変更できる

変数の再利用： 一度定義した変数を何度でも使える

🎉 まとめ

この章では、プログラミングの基礎となる「変数」について学習しました。変数は単なる技術的な概念ではなく、コードの可読性と保守性を大きく向上させる重要なツールです。

今回学んだ重要ポイント：

変数の本質： 名前のついた箱で、データを管理する仕組み
constとlet： 変わらない値はconst、変わる値はlet
命名の重要性： 意味のある名前がコードの理解を助ける
camelCase： 複数単語をつなげる標準的な書き方
実践的価値： 保守性、可読性、エラー防止の向上

📈 次のステップ：

変数の基本をマスターしたら、次はデータ型について学習しましょう！変数に入れることができる「データの種類」を理解することで、より安全で効率的なプログラムが書けるようになります。

🎯 次のステップ

変数の基本的な使い方をマスターしたら、次の章に進みましょう：

📖 Chapter 1b: データ型について

変数に入れることができる「データの種類」を学習します