【入門JavaScript】変数を使う方法について学ぼう

HTML・CSSを学んで、次はいよいよJavaScript！

でも、変数という概念が出てきました。

「変数って何？　基本的な考え方から勉強したい！」

「JavaScriptでの変数の使い方について教えて！」

そんなあなたに向けて、この記事ではJavaScriptでの変数の使い方について説明します。

是非最後までお付き合いください！

山田ねこ

現役システムエンジニアの山田ねこが解説します！

そもそもの話：変数とは

変数とは、プログラムで扱うデータに名前を付けて保存しておいて、後から使い回せるようにするためのものです。

よくデータを入れておく箱に例えられたりもしますね。

データを入れておく箱をあらかじめ作っておき、その箱の中にデータを入れます。

その値を、プログラムの中で参照します。

変数はJavaScriptだけではなく、プログラミングでは必ず出てくる基本の言葉だね！

変数の箱をひとまとめにして扱う配列という考え方もあります。

配列については次の記事を参考にしてください。

あわせて読みたい

【入門JavaScript】配列の基本をマスターしよう！ JavaScriptで配列を扱うにはArrayオブジェクトを使用します。この記事では、配列でできること、JavaScriptでの配列の扱い方を解説しています。

JavaScriptでの変数名のルール

おまたせしました。

いよいよここから、JavaScriptでの変数の基本について学んでいきます。

JavaScriptの変数名には、次のルールがあります。

• 大文字と小文字が区別される
• 変数の1文字目は、文字、_（アンダースコア）、$（ドル記号）から始める
• 変数の1文字目に数値を使うことはできない　※2文字目以降であれば使える

変数名でエラーになったときに解決できるようにこのルールを覚えておきたいね！

読みながら実際にJavaScriptを実行して試してみたい！という人には、PlayCodeというサービスがおすすめです。

コーディングしたその場でJavaScriptの実行結果を確認することができます。

JavaScriptで変数を宣言する方法は３つ

JavaScriptで変数を宣言するには、以下の3つの方法があります。

1. const
2. let
3. var

ざっくりいうと、箱の中にデータを入れるタイミングと、データを入れられる回数が違います。

方法その１：const

JavaScriptで変数を宣言する方法の1つめはconstです。

const message = "Hello, world!";

console.log(message);

実行結果

Hello, world!

constで宣言した箱には、値を最初の1度だけ入れられます。

再度同じ箱に値を入れ直したり、同じ名前で箱を作り直すことはできません。

このことから、constで定義する変数のことを定数といいます。

値が定まっている数ということだね。

方法その２：let

JavaScriptで変数を宣言する方法の2つめはletです。

let message = "Hello,";
const userName = "Alice";

message = `${message} ${userName}!`;

console.log(message);

実行結果

Hello, Alice!

letで宣言した箱には、複数回値を入れることができます。

変数の宣言と同時に値を入れる必要もありません。

同じ名前で箱を作り直すことはできないので注意が必要です。

方法その３：var

JavaScriptで変数を宣言する方法の2つめはvarです。

var message = "Hello,";
const userName = "Alice";

message = `${message} ${userName}!`;

console.log(message);

実行結果

Hello, Alice!

varで宣言した箱にも、複数回値を入れることができます。

変数の宣言と同時に値を入れる必要もありません。

varでは同じ名前で箱を作り直すことが可能です。

letとvarの違いがわからないよ…。

letとvarは、変数が適用される範囲が異なります。

箱のもう少し外側に注目してみましょう。

letとvarの違い

letとvarを比べると、varの方がより適用範囲が広いです。

まず、letの適用範囲を確認してみましょう。

function letTest() {
  let x = "first";
  {
    let x = "second";
    console.log(`local:${x}`);
  }
  console.log(`global:${x}`);
}

// 関数：letTestの実行
letTest();

出力結果

local:second
global:first

varの場合は次のようになります。

function varTest() {
  var y = "first";
  {
    var y = "second";
    console.log(`local:${y}`);
  }
  console.log(`global:${y}`);
}

// 関数：varTestの実行
varTest();

出力結果

local:second
global:second

letは1回目と2回目で値が変わっているね。
varは1回目も2回目も同じ値になっているね。

letの適用範囲は、ブロック、つまり{ }で囲った範囲内です。

※constの適用範囲もlet同様です。

それに対して、varは宣言が含まれる関数全体が適用範囲です。

それだとvarを使うと意図しないところで値が変わってしまいそうだね。

そのような問題があるので、varは極力使わないほうが良いでしょう。

const・let・varの使い分け

最後に、const、let、varの使い分けについて説明します。

まず、基本的にはconstを使うべきです。

同じ変数名で異なる性質のデータが入っているとわかりにくいコードになってしまいます。

値を変える場合は同じ名前で入れ直すのではなく、別の名前で箱を作り直すよ。

どうしても途中で値を変えないといけなかったり、宣言の段階では値をもたせられない場合にletを使います。

varは先程も伝えた通り、極力使わないようにします。

どうしてもvarを使わなければいけないのは、古いバージョンのJavaScriptで記載が必要なケースです。

letとconstはES2015というバージョンから使えるようになった宣言なので、古いバージョンでは対応していません。

参考サイト

• 文法とデータ型 – JavaScript | MDN