Chapter 01.7

プログラミング基礎
nullの概念・「無」の表現

「何もない」状態を正しく理解して、エラーを未然に防ごう

📚 この章で学ぶこと

nullの基本

  • • nullとは何か?
  • • nullと0の違い
  • • undefinedとの違い
  • • 「何もない」状態の重要性

実践的なスキル

  • • nullの正しい使い方
  • • nullチェックの方法
  • • ゲーム開発でのnull活用例
  • • nullに起因するエラーの回避

nullとは何か?

`null`とは、プログラミングにおいて「意図的に値が存在しない」ことを示す特別な値です。 変数は存在するけれど、中身が「空っぽ」であることを明示するために使われます。

🏪 現実世界での例

お店の棚を想像してみてください。

棚に「在庫なし」の札がある状態

これが `null` です。棚(変数)は確かにそこにありますが、「商品(値)は意図的に置いていません」と示している状態です。

棚に「0円」の値札が付いた商品がある状態

これは `0` です。「0円」という価格が付けられた商品(値)が、確かに存在しています。これは「空っぽ」ではありません。

🚨 `null` と `0` の決定的な違い

`null` と `0` を混同すると、予期せぬバグの原因になります。この2つは全く異なるものです。

`null`: 存在しない状態

意味: 値が「ない」
型: `object` (歴史的な理由)
用途: 何もないことを意図的に示す
let selectedItem: string | null = null;
console.log(selectedItem); // null

// 意味:まだ何もアイテムが選択されていない

`0`: 数値のゼロ

意味: 数値の「0」
型: `number`
用途: スコア、座標、個数など
let score: number = 0;
console.log(score); // 0

// 意味:スコアが0点である

🤔 `null` と `undefined` の違い

`null` とよく似たものに `undefined` があります。どちらも「値がない」ことを示しますが、ニュアンスが異なります。

`null`: 意図的な「空」

• 開発者が「ここには値がない」と明示的に設定したもの。
// ターゲットがいないことを明示
let target = null;

`undefined`: 未定義の状態

• 変数を宣言したが、まだ何も値が代入されていない状態。
// 変数を宣言しただけ
let target;
console.log(target); // undefined

🎮 ゲーム開発での `null` 活用例

ゲーム開発では、「何もない」状態を管理することが頻繁にあります。

// null-practice.ts

// プレイヤーがクリックした敵キャラクターを格納する変数
// 最初は何もクリックされていないので null で初期化
let selectedEnemy: string | null = null;

// 敵をクリックした時の処理(シミュレーション)
function clickEnemy(enemyName: string) {
    selectedEnemy = enemyName;
    console.log(`${selectedEnemy} を選択しました。`);
}

// 何もない場所をクリックした時の処理(シミュレーション)
function clickEmptyArea() {
    selectedEnemy = null; // 選択を解除
    console.log("敵の選択を解除しました。");
}

// 攻撃ボタンを押した時の処理
function attack() {
    if (selectedEnemy !== null) {
        // selectedEnemy が null でない場合のみ攻撃
        console.log(`${selectedEnemy} に攻撃!`);
    } else {
        // selectedEnemy が null の場合
        console.log("攻撃する敵が選択されていません。");
    }
}

// --- 実行シミュレーション ---
attack(); // "攻撃する敵が選択されていません。"

clickEnemy("スライム"); // "スライム を選択しました。"
attack(); // "スライム に攻撃!"

clickEmptyArea(); // "敵の選択を解除しました。"
attack(); // "攻撃する敵が選択されていません。"

💡 このコードのポイント

状態管理: `selectedEnemy` が `null` かどうかで、敵を選択中かどうかの状態を管理しています。
nullチェック: `if (selectedEnemy !== null)` のように、処理を実行する前に `null` でないことを確認しています。これを「nullチェック」と呼び、エラーを防ぐための非常に重要なテクニックです。

🎉 まとめ

この章では、`null` の概念と、それが `0` や `undefined` とどう違うのかを学びました。

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

  • `null` は「意図的な空」: 開発者が明示的に「値がない」ことを示すための値。
  • `0` は数値: `null` とは全く違う、具体的な数値。
  • `undefined` は「未定義」: まだ値が代入されていない状態。
  • nullチェックの重要性: `if (variable !== null)` で変数が空でないことを確認してから処理を行うことで、多くのエラーを防げる。

📈 次のステップ:

基本的なデータ型と `null` を理解したところで、いよいよPhaserを使ったプロジェクトの準備に入ります。 次の章では、開発環境を整え、最初のPhaserプロジェクトをセットアップする方法を学びます。

🎯 次のステップ

プログラミングの基礎を学習したら、次はPhaserJSの学習に進みましょう: