null の概念
「何もない」を理解しよう
プログラムの「空っぽ」の状態を安全に扱う方法を学ぼう
nullって何？
null とは、「 何もない 」「 値が存在しない 」ことを表す特別な値です。空の箱とは違い、「箱そのものが存在しない」状態を表します。
❌ 勘違いしやすい例
- • 数値の 0
- • 空文字列 ""
- • false
- • 空の配列 []
これらは「値がある」状態
⚠️ null と undefined
- • null : 意図的に「空」
- • undefined : 未定義
どちらも「何もない」だが微妙に違う
✅ null の正体
- • 値が「存在しない」
- • 意図的な「空」状態
- • リセット可能な状態
プログラマが明示的に設定
🔍 null と他の値の違い
🏠 現実世界の例
財布の中身
- • 1000円 → 値がある
- • 0円 → 値はあるが金額は0
- • 財布を忘れた → null（何もない）
電話番号
- • 090-1234-5678 → 値がある
- • "" → 空文字（何も入力されていない）
- • null → 電話番号自体が存在しない
友達リスト
- • ["太郎", "花子"] → 友達がいる
- • [] → 友達はいない（リストは存在）
- • null → 友達システム自体が無効
💻 プログラムの例
// ========== 値がある状態 ========== let playerName = "太郎"; // 文字列 let playerScore = 0; //
数値（0だが値はある） let playerItems = []; // 空配列（配列は存在） let isAlive = false; // 真偽値 // ==========
null（何もない）状態 ========== let currentWeapon = null; // 武器を持っていない let targetEnemy = null; //
ターゲットなし let saveData = null; // セーブデータなし let selectedItem = null; // 何も選択していない //
========== 比較してみる ========== console.log(playerScore === 0); // true（値は0） console.log(currentWeapon
=== null); // true（何もない） // これらは全て異なる！ console.log(0 === null); // false console.log("" ===
null); // false console.log(false === null); // false console.log([] === null); // false
🎮 ゲームでのnullの活用例
ゲーム開発では、nullを使って「まだ設定されていない」「一時的に無効」「選択されていない」状態を表現します。
// ========== プレイヤーの装備管理 ========== let equippedWeapon: string | null = null; // 武器を装備していない let
equippedArmor: string | null = null; // 防具を装備していない let equippedAccessory: string | null = null; //
アクセサリーを装備していない // 装備を変更 equippedWeapon = "鋼の剣"; // 武器を装備 equippedArmor = "革の鎧"; //
防具を装備 // アクセサリーは null のまま（装備していない） // ========== バトルシステム ========== let targetEnemy:
string | null = null; // ターゲットなし let currentSpell: string | null = null; // 魔法を準備していない let
lastAttacker: string | null = null; // まだ誰も攻撃していない // バトル開始 targetEnemy = "ゴブリン"; //
敵をターゲット currentSpell = "ファイアボール"; // 魔法を準備 // バトル終了後 targetEnemy = null; // ターゲット解除
currentSpell = null; // 魔法リセット // ========== UI状態管理 ========== let selectedMenuItem: string | null = null;
// メニュー項目が選択されていない let openDialog: string | null = null; // ダイアログが開いていない let
hoveredButton: string | null = null; // マウスがボタンの上にない
nullを使う理由
- • 「未設定」の状態を明確に表現
- • 無効な値との区別
- • リセット可能な状態
- • エラーハンドリングの改善
null使用場面
- • 装備品の管理
- • ターゲット選択
- • UI状態管理
- • セーブデータの初期化
🛡️ nullチェック（安全な使い方）
⚠️ 危険：nullチェックを忘れると...
nullが入っている変数を、値があると思って使うとエラーが発生します：
let currentWeapon: string | null = null; // 武器なし // 危険な使い方 - エラーが発生！
console.log(currentWeapon.length); // Error: Cannot read properties of null
console.log(currentWeapon.toUpperCase()); // Error: Cannot read properties of null let weaponPower = currentWeapon
+ " +10"; // "null +10" という文字列になってしまう
✅ 安全：適切なnullチェック
nullの可能性がある値は、使用前に必ずチェックしましょう：
let currentWeapon: string | null = null; // ========== 方法1: if文でチェック ========== if (currentWeapon !==
null) { console.log(`武器: ${currentWeapon}`); console.log(`文字数: ${currentWeapon.length}`); } else {
console.log("武器を装備していません"); } // ========== 方法2: 三項演算子 ========== const weaponDisplay =
currentWeapon !== null ? currentWeapon : "素手"; console.log(`装備: ${weaponDisplay}`); // ========== 方法3: ||
演算子でデフォルト値 ========== const displayWeapon = currentWeapon || "武器なし"; console.log(`表示:
${displayWeapon}`); // ========== 方法4: オプショナルチェーニング（?.） ==========
console.log(currentWeapon?.length); // null の場合は undefined を返す console.log(currentWeapon?.toUpperCase());
// エラーにならない
❌ 危険なコード
// nullチェックなし function getWeaponPower(weapon: string | null) { return weapon.length * 10; // null
の場合エラー！ }
✅ 安全なコード
// 適切なnullチェック function getWeaponPower(weapon: string | null) { if (weapon === null) return 0; return
weapon.length * 10; // 安全！ }
実践例：インベントリシステム
安全なアイテム管理システム
// ========== プレイヤーの装備状態 ========== interface PlayerEquipment { weapon: string | null; armor: string |
null; accessory: string | null; } const playerEquipment: PlayerEquipment = { weapon: null, // 武器なし armor:
null, // 防具なし accessory: null // アクセサリーなし }; // ========== 装備の変更（安全な実装） ==========
function equipWeapon(weaponName: string): void { playerEquipment.weapon = weaponName;
console.log(`${weaponName}を装備しました`); } function unequipWeapon(): void { if (playerEquipment.weapon !==
null) { console.log(`${playerEquipment.weapon}を外しました`); playerEquipment.weapon = null; } else {
console.log("装備している武器がありません"); } } // ========== 装備情報の表示（nullセーフ） ========== function
displayEquipment(): void { console.log("=== 現在の装備 ==="); const weaponName = playerEquipment.weapon || "なし";
const armorName = playerEquipment.armor || "なし"; const accessoryName = playerEquipment.accessory || "なし";
console.log(`武器: ${weaponName}`); console.log(`防具: ${armorName}`); console.log(`アクセサリー:
${accessoryName}`); } // ========== 攻撃力計算（nullチェック込み） ========== function calculateAttackPower():
number { let basePower = 10; // 基本攻撃力 // 武器があれば攻撃力アップ if (playerEquipment.weapon !== null) {
const weaponBonus = playerEquipment.weapon.length * 5; // 文字数 × 5 basePower += weaponBonus; } return basePower;
} // ========== 使用例 ========== displayEquipment(); // 武器: なし, 防具: なし, アクセサリー: なし
console.log(`攻撃力: ${calculateAttackPower()}`); // 攻撃力: 10 equipWeapon("鋼の剣"); // 鋼の剣を装備しました
displayEquipment(); // 武器: 鋼の剣, 防具: なし, アクセサリー: なし console.log(`攻撃力:
${calculateAttackPower()}`); // 攻撃力: 25 (10 + 3*5) unequipWeapon(); // 鋼の剣を外しました displayEquipment();
// 武器: なし, 防具: なし, アクセサリー: なし
null の活用
- • 装備なし状態を表現
- • 意図的なリセット
- • 初期状態の管理
安全な実装
- • 全ての操作でnullチェック
- • デフォルト値の提供
- • エラーを防ぐ設計
ユーザー体験
- • 適切なメッセージ表示
- • 予期しないエラーなし
- • 直感的な動作
null の概念まとめ
⚠️ 注意点
- • null は 0 や "" とは違う
- • nullチェックを忘れるとエラー
- • 型注釈で | null を明示
- • オプショナルチェーニング活用
✅ ベストプラクティス
- • 使用前に必ずnullチェック
- • デフォルト値を用意
- • 意味のあるnull使用
- • エラーハンドリング実装
nullは 「何もない」状態を安全に扱う ための重要な概念です。適切なnullチェックを行うことで、エラーのない堅牢なプログラムが作れます。
次章からは、いよいよ PhaserJS を使った実際のゲーム開発に取り組みます！