In 'n' Out

値を管理する

JavaScriptでは、処理の途中で使う情報を「値」として扱います。
表示する文字や計算に使う数値などは、その場限りで使い捨てるのではなく、名前を付けて管理することができます。
値に名前を付けておくことで、同じ情報を何度も使ったり、処理の結果を後から参照したりできるようになります。
この考え方が、JavaScriptで処理を書くうえでの基本になります。

変数と定数とは

値を管理するための仕組みには、変数と定数があります。
どちらも値に名前を付けるという点は同じですが、扱い方に違いがあります。
変数は、後から中身を変更できるものです。
処理の途中で値が変わる場合に使用されます。
定数は、一度決めた中身を変更しないものです。
途中で値が変わらないと決めている場合に使用されます。
JavaScriptでは、用途に応じてこれらを使い分けます。

変数

変数は、後から値を変更できる入れ物です。
JavaScriptでは、変数を使うことで処理の途中結果や一時的な情報を保持できます。

let

構文

let 変数名 = 変数の中身;

letを頭に置くことで、変数名が変数として扱われるようになります。
変数名、変数の中身は自分で決められます。
変数の中身には数字のみでなく、文字も入れられます。

コード例

//variableNumber1.js
let number = 1;
let string = 'おはようございます';
        
alert(number);
alert(string);

動作例

ボタンを押すとポップアップが2回、それぞれの変数の中身が表示されます。
numberとstringの変数を2つ作り、numberには数字を、stringには文字を宣言したため、別の内容のポップアップが表示されます。
しかし、この例では変数を使わずに、alertに直接文字を書いても同じ結果になります。
では、変数という名前を実感できるコードを見てみましょう。

//variableNumber.js
let number = 1;
let string = 'おはようございます';
        
number = 12;
string = 'こんにちは';

alert(number);
alert(string);

動作例

変数を宣言後に、numberに12を、stringにこんにちはを代入しました。
するとポップアップの内容が代入した値に変更されます。
代入することで初期値から値を変えられるという変数の特徴です。

var

構文

var 変数名 = 変数の中身;

varもlet同様、頭に置くことで変数名が変数として扱われるようになります。
変数名、変数の中身は自分で決められます。
変数の中身には数字のみでなく、文字も入れられます。

コード例

//variableNumber3.js
var number = 1;
var string = 'おはようございます';
        
alert(number);
alert(string);

動作例

ボタンを押すとletで宣言したものと同じ挙動です。
代入しても挙動はletの場合と同じ結果となります。
varは古い書き方のため、既存のコードを読む目的で知っておく程度で問題はなく、変数はletで宣言すると考えてもらってかまいません。
ただし、varが完全に使われなくなったわけではありません。
letとvarには挙動の違いがありますが、最初に理解する必要はありません。

定数

定数は、一度決めた値を変更しないための仕組みです。

構文

const 変数名 = 変数の中身;

このように宣言した値は、後から別の値に変更することはできません。
定数は、途中で内容が変わらないと分かっている値に使用します。

コード例

//constantNumber1.js
const number = 1;
const string = 'おはようございます';
        
alert(number);
alert(string);

動作例

ボタンを押すと変数の中身が同じなので、letで宣言したものと同じ挙動です。
定数は本当に変わらないか代入して確認してみます。

コード例

//constantNumber2.js
const number = 1;
const string = 'おはようございます';
        
number = 12;
string = 'こんにちは';

alert(number);
alert(string);

動作例

ボタンを押しても実行されません。
開発者ツールで確認してみます。

定数として宣言された値に再代入しようとしたため、エラーが表示されています。
このようにconstを宣言すると定数となることがわかったと思います。
意図しない変更を防ぐために使い分けるようにしましょう。