JavaScript | 基礎構文：変数・定数 – 初期化と未定義

JavaScript
2025.12.11
スポンサーリンク

「初期化」と「未定義」を一言でいうと

まず言葉のイメージからはっきりさせます。

「初期化（しょきか）」は、
「変数を作ったタイミングで、最初の値をちゃんと入れてあげること」 です。

「未定義（undefined）」は、
「“変数は存在するけど、まだ中身が決まっていない状態” を表す特別な値」 です。

ここが重要です。
変数は「宣言しただけ」の状態だと中身は undefined。
何か意味のある値を入れた瞬間に“初期化された”状態になる。
この区別をしっかり持っておくと、エラーやバグの原因が見えやすくなります。

変数の「宣言」「初期化」「再代入」を分けて考える

宣言だけした変数はどうなるか

まずは「宣言だけ」してみます。

let x;
console.log(x); // 何が出る？
JavaScript

このとき、x は「存在はしているけれど、中身はまだ何も決めていない」状態です。
JavaScript は、こういうときに 自動的に undefined を入れます。

実際の出力：

undefined

つまり、

  • let x;
    → 変数 x を「宣言」しただけ（箱を用意しただけ）
    → 中身は自動で undefined

という動きです。

ここが重要です。
「宣言」と「初期化」は別。
宣言だけだと、値は “まだない” ことを表す undefined になる。

宣言と同時に値を入れる（初期化）

次は「初期化」されたパターンです。

let y = 10;
console.log(y); // 10
JavaScript

これは一気に

  • 変数 y を宣言
  • 最初の値 10 を代入（これが初期化）

の 2 つをやっています。

もう少し細かく書くとこういうイメージです。

let y;    // 宣言（中身は undefined）
y = 10;   // ここで初期化
JavaScript

宣言と同時に初期化するか、あとから初期化するか、
動きとしては同じです。

再代入との違い

一度初期化したあと、値を変えることもあります。

let count = 0;      // 初期化
count = 1;          // 再代入（上書き）
count = count + 1;  // 再代入（1 → 2）
JavaScript

整理すると、

  • 宣言：箱を作る
  • 初期化：その箱に「最初の意味のある値」を入れる
  • 再代入：一度入れた値を、別の値に上書きする

という段階があると考えてください。

undefined とは何者か：「何も入っていない」を表す値

undefined は「エラー」ではなく「値」

さきほど、

let x;
console.log(x); // undefined
JavaScript

という例を出しました。

ここで出てくる undefined は、
「JavaScript に最初から用意された“特別な値”」 です。

「エラーのメッセージ」ではなく、あくまで「値」です。

他の例でも出てきます。

function hello() {
  console.log("こんにちは");
}

const result = hello();
console.log(result); // undefined
JavaScript

hello() は return で何も返していないので、
関数の戻り値も自動的に undefined になります。

ここが重要です。
「何も決まっていない」「何も返していない」という状態のとき、
JavaScript はよく undefined という値を使ってその状態を表現する。

undefined と null の違い（軽く触れる）

よく一緒にされる null と比べてみます。

ざっくり言うと：

  • undefined
    → 「まだ値が“決まっていない”」
    → 変数を宣言しただけ
    → 関数で何も return しない
    ときなどに、JavaScript が自動で使うことが多い
  • null
    → 「意図的に“何もない”ことにした」
    → 開発者が「ここには今、値がありません」と自分で入れることが多い

初心者のうちは、

「undefined は JavaScript 側の“まだ決まってない”」
「null は 人間側の“空です”」

くらいの感覚でいいです。

初期化されていない変数を使うと何が困るか

「意図せず undefined のまま計算してしまう」パターン

よくあるバグの種がこれです。

let price;
let taxRate = 0.1;

let total = price + price * taxRate;
console.log(total); // どうなる？
JavaScript

price を「宣言したけど初期化していない」状態で計算しています。

実行すると：

NaN

NaN は「Not a Number（数ではない）」という意味です。
つまり、計算結果が「まともな数値ではありません」という状態。

なぜこうなるかというと、

  • price は undefined
  • undefined + undefined * 0.1
  • undefined を数値として計算しようとしておかしくなる
  • 結果 NaN

という流れです。

「変数の中身が undefined だと気づかずに使ってしまう」
これが、初期化抜けでよく起きるトラブルです。

文字列との結合でも気持ち悪い結果になる

let name;
console.log("こんにちは、" + name + "さん");
// "こんにちは、undefinedさん"
JavaScript

エラーにはなりませんが、
ユーザーに「undefinedさん」と表示されるのは、かなり変です。

「本当は名前を入れるつもりだったのに、初期化し忘れていた」

というバグに気づきにくくなります。

ここが重要です。
「宣言しただけで初期化していない変数」は、自動で undefined になる。
そのまま計算や表示に使うと、NaN や「undefined」が出てきて、“なんか変な結果” になる。
エラーにならないぶん、原因に気づきにくいのが怖い。

じゃあ「初期化」はどうやって意識すればいいか

できるだけ「宣言と同時に初期化」する

バグを減らす一番シンプルなコツは、

「変数を宣言するときは、なるべく同時に初期化する」
ことです。

悪い例：

let count;
if (条件) {
  count = 10;
}
// ここで count を使うが、条件によっては undefined のままかもしれない
JavaScript

良い例（初期値を決めておく）：

let count = 0; // まず 0 で初期化しておく
if (条件) {
  count = 10;
}
// ここで count を使っても、とりあえず undefined にはならない
JavaScript

「初期値として自然なもの」を考えておくとよいです。

  • 数値なら 0
  • 文字列なら ""（空文字）
  • 配列なら []
  • オブジェクトなら {}

など。

「まだ値が決まっていない」ことを明示したいときは null を使う

逆に、

「今はまだ値が存在しないことを、はっきり示したい」

というケースもあります。

例えば、「まだログインしていないユーザー」を表したいとき：

let currentUser = null; // まだログインしていない

// あとでログインしたら…
currentUser = { id: 1, name: "Taro" };
JavaScript

undefined のままだと、

  • 単なる初期化忘れなのか
  • 意図的に「まだ何もない」のか

が区別しにくいので、
「意図的な“空”」は null を使う のが分かりやすいです。

ここが重要です。
「本当は値があるはずなのに、初期化し忘れている」のと、
「まだ値がないことを、自分で分かっていて空にしている」のは違う。
前者は undefined にしないよう気をつけ、後者は null で明示する。

const の場合の初期化と未定義

const は「宣言時に初期化が必須」

let と違って、const は「宣言だけ」はできません。

const x;    // エラー：初期化が必要
x = 10;
JavaScript

必ずこう書く必要があります。

const x = 10; // 宣言と同時に初期化
JavaScript

これは、

「const で作る変数は、必ず最初から意味のある値が入っている状態にしろ」

というルールです。

ある意味で、
「未初期化・未定義の const 変数」というものは存在できない
ということになります。

だからこそ const は安全

const は「再代入できない」だけでなく、
「初期化抜けが起こらない」という意味でも安全です。

「この変数は絶対に undefined のまま使いたくない」と思うものは、
const にしておくと、

  • 宣言と同時に初期化を強制される
  • 途中で書き換えもできない

という「二重の安全」が得られます。

ここが重要です。
「未定義（undefined）のまま使うのが怖い値」は、const で必ず初期化しておく。
let は「どうしても値を変えたいものだけ」に絞る。
こうすることで、“初期化されないままの変数” を減らせる。

初心者として押さえておきたい「初期化と未定義」の核心

最後に、本当に大事なポイントだけを整理します。

「初期化」とは、変数を作ったときに「最初の意味のある値」を入れてあげること。

let x; だけだと、x は宣言されているが中身は自動的に undefined。
let x = 10; のように書くと、宣言と初期化を同時にしている。

undefined はエラーではなく、「まだ値が決まっていない」ことを表す特別な値。
宣言だけの変数、何も返していない関数の戻り値などがそうなる。

初期化されていない変数を計算や表示に使うと、NaN や「undefined」と表示されて、バグの原因になりやすい。
だから「変数はできる限り宣言と同時に初期化する」のが安全。

「意図的にまだ値がない」状態を表したいときは、undefined ではなく null を自分で入れると意図が伝わりやすい。

const は宣言と同時に初期化が必須なので、「未初期化のまま」を防げる。

ここが重要です。
変数を見るたびに、「この変数はいつ初期化された？ 今 undefined の可能性はある？」と意識するクセをつけると、
“なんか NaN になる”“なんか undefined が出る” というモヤっとしたバグを、かなり早い段階でつぶせるようになります。

もしよければ、小さな練習として、

let a;
console.log(a);

let b = a + 1;
console.log(b);

let c = null;
console.log(c);
JavaScript

のようなコードを自分で実行してみてください。

a と b と c に「どんな値が入っているか」「どう違うか」を自分の目で確認すると、
「初期化されていない」「undefined」「null」の違いが、一気に腑に落ちてくるはずです。

次へ
12
スポンサーリンク
タイトルとURLをコピーしました