Zenn
📚

初心者によるJavascript講座1(変数と宣言)

に公開
JavaScript
tech

これは初心者によるjs講座です。（ChatGPTと会話して作りました）

目的

・JavaScriptにおける変数と宣言の基本を理解すること
・変数はプログラムでデータを扱うために欠かせないことを紹介する

まとめ（忙しい人向け）

・変数とは、データを保存するための名前付きの箱。

・変数を宣言するには、var / let / constを使う。

・基本は const、値を変えたいときだけ let を使う。

・varは再宣言できてしまうため、バグのもとになりやすいので基本使わない。

・変数にはスコープ（使える範囲）があり、letとconstはブロック単位、varは関数単位で管理される。

そもそも変数とはなにか？

「変数」とはデータに名前をつけて保存する箱のようなもの。例を示すとすれば次の２つのたとえがわかりやすい。

１、箱のたとえ

プログラムはたくさんのデータ（数字や文字など）を扱う。しかし、ただデータを置いておくだけでは、どれがどれだかわからなくなってしまう。そこで「変数」という名前付きの箱を用意して、分類し、しまうことで簡単に管理したり取り出したりできるようになる。

2、メモ帳のたとえ

プログラムは、何かを記憶しておく必要がある。例えば、計算結果を覚えて置いたり、ユーザーの名前を保存したりする場面だ。そんなとき、メモ帳に名前をつけてメモしておくようにプログラムでは「変数」をつかって情報を一時的に保存する。

なぜ変数が必要か

前述の例でもしめしたように、データを再利用、または管理しやすくするためだ。

変数を宣言する方法

結論から言うと、var、let、constの三つがあり、
・var→歴史的に古く、注意点がある
・let→現在主流の変数宣言方法
・const→値を変更しない（定数）のための宣言方法
それぞれについて以下で解説する。

varを使った宣言

例

var message = "こんにちは";
console.log(message); // 結果: こんにちは

varは古くから使われてきた宣言方法ではある。しかし、後述するスコープの問題で現在はあまり使われていない。また同じ名前の変数を再定義できてしまうことからも忌避される

letを使った宣言

例

let count = 5;
console.log(count); // 結果: 5

現在もっとも主流な宣言方法。あとから値を変更できるのが特徴。またvarのスコープの問題や同じ名前の変数を再定義できてしまう問題も解消さている。

constを使った宣言

例

const pi = 3.14;
console.log(pi); // 結果: 3.14

constは値を変更することができない変数を作るときに使う。一度値を代入すると基本的には変更できない。数値や文字列などのオブジェクト以外のデータを代入したときは定数になるが、オブジェクトそのものを宣言したときは違う。
例

// `const`でオブジェクトを定義している
const object = {
    key: "値"
};
// オブジェクトそのものは変更できてしまう
object.key = "新しい値";

どの変数を使うべきか？

基本はまずはconstで宣言して、「値を後から変えたい」ときだけletを使うのが無難。varはなるべく使わないほうが安全。

なぜletやconstは追加されたのか

constやletを追加し、varの動作を変更しなかったのは後方互換性のためである。すなわち、varの動作を変更してしまうとすでにvarで書かれたコードが動かなくなってしまうのを避けるためである。

変数名のルール

英数字、$、_ が使える。しかし、数字からはじめることや、予約語は使えない。意味のある名前をつけることも大切である。

意味のある名前を付けよう→「変数名だけで何を表しているか伝わるようにしよう」

悪い例

let a = 10;
let b = 20;
let c = a + b;
console.log(c);

なにを意味しているかわかりにくい。
良い例

let price = 10;
let tax = 20;
let totalPrice = price + tax;
console.log(totalPrice);

価格と税金を足して「合計金額」を出しているとすぐにわかる！

変数のスコープとは

結論からいうと、スコープとは変数がつかえる範囲のことである。varとlet/constのスコープは、それぞれ関数スコープ、ブロックスコープという違いがある。以下で詳しく解説する。

varのスコープ（関数のスコープ）

varで宣言した変数は関数の中だけで有効。関数外には影響しない。（関数外からはアクセスできない）
例

function greet() {
  var message = "こんにちは";
  console.log(message); // 結果: こんにちは
}

greet();
console.log(message); // エラー！messageは関数の外では使えない

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

letとconstで宣言した変数は、ブロック（{}で囲まれた範囲）内だけで有効。
これはif文やfor文の中も同じである。
例１

{
  let color = "blue";
  console.log(color); // 結果: blue
}

console.log(color); // エラー！colorはブロックの外では使えない

例２

if (true) {
  const number = 100;
  console.log(number); // 結果: 100
}

console.log(number); // エラー！numberはifの中だけで使える

ポイント

基本はconst/letを使う。変数の「生きている範囲」を意識し、無駄に広いスコープを持たせないようにする。varは思わぬバグを生むのでできるだけ使わない。

まとめ（再掲）

・変数とは、データを保存するための名前付きの箱。

・変数を宣言するには、var / let / constを使う。

・基本は const、値を変えたいときだけ let を使う。

・varは再宣言できてしまうため、バグのもとになりやすいので基本使わない。

Discussion