変数に入れることができる「データの種類」を理解して、安全なプログラムを書こう
TypeScriptは、JavaScriptに「型」という概念を追加した言語です。 データ型を理解することで、バグの少ない安全なゲームを作ることができます。
データ型とは、「変数に入れることができるデータの種類」を決めるルールです。 現実世界では、異なる種類のものを異なる方法で扱いますよね。
// JavaScriptでの問題例 let score = "100"; // 文字列として保存 let bonus = 50; // 数値として保存 // 足し算のつもりが... let total = score + bonus; console.log(total); // "10050" （文字連結） // 期待した結果は 150 だったのに！
// TypeScriptでの安全な記述 let score: number = 100; // 数値型 let bonus: number = 50; // 数値型 // 安全な計算 let total: number = score + bonus; console.log(total); // 150 （正しい数値計算） // 型が違う値を入れようとするとエラー score = "abc"; // ❌ エラー！
// number型の例 let playerScore: number = 1500; // 整数 let playerSpeed: number = 2.5; // 小数 let temperature: number = -10; // 負の数 let infinity: number = Infinity; // 無限大 // ゲームでの使用例 let maxHealth: number = 100; let currentHealth: number = 85; let damage: number = 15; currentHealth = currentHealth - damage; // 70
// string型の例 let playerName: string = "勇者"; let gameTitle: string = '大冒険ゲーム'; let message: string = "ゲームオーバー！"; // 文字列の連結 let greeting: string = "こんにちは、" + playerName + "さん！"; // テンプレートリテラル（バッククォート使用） let scoreMessage: string = `あなたのスコア: ${playerScore}点`; // ゲームでの使用例 let itemName: string = "回復ポーション"; let description: string = "HPを50回復する";
// boolean型の例 let gameStarted: boolean = true; // ゲーム開始中 let isPaused: boolean = false; // 一時停止していない let hasKey: boolean = true; // 鍵を持っている let isAlive: boolean = true; // 生きている // 条件分岐での使用 if (gameStarted) { console.log("ゲームプレイ中..."); } if (hasKey) { console.log("扉を開けることができます"); } else { console.log("鍵が必要です"); }
// 配列型の例 let highScores: number[] = [1500, 1200, 980, 750]; let playerNames: string[] = ["太郎", "花子", "次郎"]; let levelCompleted: boolean[] = [true, true, false, false]; // 配列の操作 highScores.push(1800); // 末尾に追加 let topScore = highScores[0]; // 最初の要素を取得 let length = highScores.length; // 配列の長さ // ゲームでの使用例 let enemies: string[] = ["スライム", "オーク", "ドラゴン"]; let inventory: string[] = ["剣", "盾", "回復薬"];
: 型名を明示的に書いて、その変数がどの型かを指定する方法
// 型注釈の基本形 let 変数名: 型名 = 値; // 具体例 let score: number = 0; let name: string = "プレイヤー"; let alive: boolean = true; let items: string[] = ["剣", "薬"];
// 型推論の例 let score = 0; // number型と推論 let name = "プレイヤー"; // string型と推論 let alive = true; // boolean型と推論 let items = ["剣", "薬"]; // string[]型と推論 // 型推論でも安全 score = "abc"; // ❌ エラー！number型なのに文字列
TypeScriptでデータ型を体験してみましょう。 VSCodeで新しい TypeScript ファイルを作成し、以下のコードを入力してみてください。
// data-types-practice.ts // ゲームプレイヤーの情報を型安全に管理 // === プレイヤーの基本情報 === let playerName: string = "勇者アキラ"; let playerId: number = 12345; let isLoggedIn: boolean = true; // === ゲームの状態管理 === let currentLevel: number = 5; let experience: number = 2750; let health: number = 85.5; // 小数も可能 let maxHealth: number = 100; // === ゲームフラグ === let hasKey: boolean = true; let bossDefeated: boolean = false; let canFly: boolean = false; // === インベントリ（所持品） === let weapons: string[] = ["鉄の剣", "魔法の杖", "弓矢"]; let potions: string[] = ["回復薬", "魔力回復薬"]; let scores: number[] = [1200, 950, 1800, 1100]; // === 型推論の例（型注釈なし） === let autoPlayerName = "自動推論プレイヤー"; // string型と推論 let autoScore = 999; // number型と推論 let autoIsActive = true; // boolean型と推論 // === プレイヤー情報の表示 === console.log("=== プレイヤー情報 ==="); console.log(`名前: ${playerName} (ID: ${playerId})`); console.log(`レベル: ${currentLevel} (経験値: ${experience})`); console.log(`体力: ${health}/${maxHealth}`); console.log(`ログイン状態: ${isLoggedIn ? "ログイン中" : "オフライン"}`); // === アイテム一覧の表示 === console.log("\n=== 所持武器 ==="); for (let i = 0; i < weapons.length; i++) { console.log(`${i + 1}. ${weapons[i]}`); } console.log("\n=== 所持薬品 ==="); for (let potion of potions) { console.log(`- ${potion}`); } // === 条件分岐での型活用 === if (health < 30) { console.log("\n⚠️ 警告: 体力が低下しています！"); } else if (health === maxHealth) { console.log("\n✅ 体力は満タンです！"); } if (hasKey) { console.log("🔑 宝箱を開けることができます"); } if (bossDefeated) { console.log("👑 ボスを倒しました！"); } else { console.log("⚔️ ボス戦に挑戦しましょう"); } // === 型安全性のテスト（これらはエラーになります） === // playerName = 123; // ❌ string型なのにnumber // currentLevel = "高レベル"; // ❌ number型なのにstring // hasKey = "yes"; // ❌ boolean型なのにstring // weapons.push(999); // ❌ string[]なのにnumber
この章では、TypeScriptの型システムについて詳しく学習しました。 データ型を理解することで、より安全で保守性の高いゲームを開発できるようになります。
データ型をマスターしたら、次はnull と undefinedについて学習しましょう！ 「存在しない値」を安全に扱う方法を理解することで、 より堅牢なプログラムが書けるようになります。