2025.05.08 2025.05.21

【オウル先生の基礎講座】Vol.1「変数と定数の違い」

progmraming

プログラミングの基本、変数と定数について解説します！

なぜ変数と定数の2種類があるの？違いがよく分からないなぁ…

フォックン

いい質問だね、フォックン！変数は値が変わるもの、定数は一度決めたら変えられないものなんだ。使い分けを理解すると、より安全で読みやすいコードが書けるようになるよ😊

オウル先生

Contents

変数と定数の基本概念
- 変数（Variable）とは
- 定数（Constant）とは
JavaScriptにおける宣言方法
使い分けのガイドライン
- constを使うべきケース
- letを使うべきケース
スコープについて理解しよう
- ブロックスコープ（let, const）
- 関数スコープ（var）
実践的な使用例
- 適切な使用例
よくある誤解と注意点
- 誤解その1：constはイミュータブル
- 誤解その2：var、let、constの混在
まとめ
- 次回予告

変数と定数の基本概念

変数（Variable）とは

変数は、値を入れておく箱のようなものです。その箱の中身は、必要に応じて何度でも変更できます。

let age = 25;     // ageという箱に25を入れる
age = 26;         // 箱の中身を26に変更
console.log(age); // 26と表示される

定数（Constant）とは

定数は、一度値を設定したら変更できない箱です。初期化時に設定した値は固定されます。

const PI = 3.14159;  // PIという箱に円周率を入れる
PI = 3.14;           // エラー！定数は変更できない

なるほど！変数は何度でも変えられるけど、定数は最初に決めた値から変えられないんだね

フォックン

JavaScriptにおける宣言方法

JavaScriptでは以下の3つの方法で変数や定数を宣言できます：

キーワード	用途	再代入	スコープ
`let`	変数宣言	可能	ブロックスコープ
`const`	定数宣言	不可	ブロックスコープ
`var`	変数宣言（非推奨）	可能	関数スコープ

// モダンなJavaScriptの推奨パターン
let userName = "Alice";      // ブロックスコープの変数
const API_KEY = "abc123";    // ブロックスコープの定数

// 非推奨パターン（互換性のために残されている）
var oldStyle = "legacy";     // 関数スコープの変数

現在のJavaScript開発では、letとconstを使うのが一般的だよ。varは昔の記法で、思わぬバグを引き起こす可能性があるから注意が必要なんだ。

オウル先生

使い分けのガイドライン

constを使うべきケース

設定値や定数として扱いたい値

const MAX_RETRIES = 3;
const API_ENDPOINT = 'https://api.example.com';

初期化後に変更する必要がない値

const userProfile = { name: 'Bob', age: 30 };
const colors = ['red', 'green', 'blue'];

関数や矢印関数

const calculateTotal = (price, tax) => { return price * (1 + tax); };

letを使うべきケース

値が変化する可能性がある変数

let counter = 0; let isLoggedIn = false;

ループやカウンターなど、明示的に変更が必要な場合

for (let i = 0; i < 10; i++) { console.log(i); }

じゃあ、基本的にはconstを使って、本当に値が変わる必要がある時だけletを使えばいいんだね！

フォックン

その通り！「Constファースト」の考え方なんだ。これにより、コードの意図が明確になり、予期しない値の変更を防ぐことができるよ。

オウル先生

スコープについて理解しよう

スコープとは、変数や定数がアクセス可能な範囲のことです。

ブロックスコープ（let, const）

function example() {
  if (true) {
    let blockVariable = 'これはブロック内でのみ有効';
    const blockConstant = '同じくブロック内でのみ有効';
  }
  
  // ここではblockVariableとblockConstantにアクセスできない
  console.log(blockVariable); // エラー！
}

関数スコープ（var）

function legacyExample() {
  if (true) {
    var functionVariable = 'これは関数内のどこからでもアクセス可能';
  }
  
  console.log(functionVariable); // '関数内なのでアクセス可能'
}

varを使うと予期しない動作が発生する可能性があるため、現在はletやconstのブロックスコープの方が安全で推奨されているんだ。

オウル先生

実践的な使用例

適切な使用例

// ユーザー情報管理システム
const MAX_LOGIN_ATTEMPTS = 5;  // 変更されない設定値

let loginAttempts = 0;         // カウントとして使用（値が変わる）
let isLocked = false;          // ログイン状態（値が変わる）

const user = {
  name: 'Alice',
  email: 'alice@example.com'
};

// オブジェクトの値は変更可能（オブジェクト自体は再代入不可）
user.name = 'Alice Johnson';   // OK
user.lastLogin = new Date();   // OK（新しいプロパティ追加）

// user = {};                  // これはエラー！

constで宣言したオブジェクトの中身は変更できるんだね！混乱しそうだな…

フォックン

その通り！constは変数自体の再代入を防ぐだけで、オブジェクトや配列の中身の変更は可能なんだ。この違いをしっかり理解しておくことが大切だね😊

オウル先生

よくある誤解と注意点

誤解その1：constはイミュータブル

const person = { name: 'Tom' };
person.name = 'Thomas';    // これは可能！
person.age = 25;           // これも可能！

// オブジェクトを完全に固定したい場合
const frozenPerson = Object.freeze({ name: 'Tom' });
frozenPerson.name = 'Thomas';  // 無視される（Strictモードではエラー）

誤解その2：var、let、constの混在

// 非推奨：同じ変数名での再宣言
var x = 10;
var x = 20;    // OK（varは再宣言可能）

let y = 10;
let y = 20;    // エラー！（ブロック内で再宣言不可）

// 推奨：適切な宣言方法の選択
const CONFIG = {...};
let dynamicValue = 0;