![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/08/07
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、JavaScriptの変数宣言と動的型付け言語について説明いたします。
変数の種類
変数とは、プログラムで使用される値を、
一時的に保存しておくために領域に固有の名前を付けたものです。
変数は値そのものではなく、値の保管場所（アドレス）を保存しています。
JavaScriptには、以下の3つの変数を宣言するキーワードが存在しています。
・let（ES6～）
・const（ES6～）
・var
let
ES6（ECMAScript 2015）から使用できるようになった変数で、
宣言することによって使用できるようになる変数です。
|
1 |
let 変数名 = 値; |
【例】
|
1 2 3 |
let hello = "こんにちは"; console.log( hello ); // コンソールで出力 |
【出力結果】
＊値を変数に代入して、変数を関数に渡しています。
※プログラムでは、変数に値を代入するときに 「 = 」を使用しますが、
右辺の値を、左辺に代入するという意味で等しいことではありません。
let で宣言した変数は、
値を上書き（再代入）をすることができます。
|
1 2 3 4 5 |
let hello = "こんにちは"; console.log( hello );// コンソールで出力 hello = "Hello!!" console.log( hello );// コンソールで出力 |
【出力結果】
このように値を代入することができます。
＊注意＊
再代入と似た用語で、「変数の再宣言」というものがあります。
再宣言は、同じ変数名で再度宣言を行うことで、
「 let 」と「 const 」ではエラーになるので注意が必要です。
|
1 2 3 |
let hello = "こんにちは"; let hello = "Hello!!"; // エラーが発生 |
【出力結果】
変数が参照する値を変化させたい場合など、
変数への再代入が必要な場合はletを利用します。
また、letは初期値がなくても変数の宣言ができます。
（undefinedという値で初期化される）
undefinedは未定義という意味でnullや空白とは異なります。
undefinedという値が変数にセットされています。
const
let と同様に、ES6（ECMAScript 2015）で使用できるようになりました。
|
1 |
const 変数名 = 値; |
【例】
|
1 2 |
const hello = "こんにちは"; console.log( hello ); |
【出力結果】
constは宣言した後に、値の再代入ができません。
そのため、constには後で変更しない値など、
変動がない値を扱うときに使用されます。
|
1 2 |
const hello = "こんにちは"; hello = "Hello!!" // エラーが発生 |
【出力結果】
しかし、変数の値がオブジェクトまたは配列（参照型）であった場合は、
値を変更したり、削除したりすることができます。
|
1 2 3 4 5 6 7 8 |
const arr = ['A', 'B', 'C']; // これは値の代入になるので、エラー ↓ //arr = ['あ', 'い', 'う']; // OK ↓ arr[1] = 'い'; console.log( arr ); |
【出力結果】
var
ES6以前に使用されていましたが、
varでの変数宣言は、現在は非推奨となっています。
その理由がいくつかあるので、非推奨である理由をまとめてみました。
・ 宣言をしなくても変数として、使用できる。
・ 同じ名前の変数で再宣言ができてしまう。
・ 巻き上げという独自の挙動がある。
宣言をしなくても変数として、使用できる。
|
1 2 |
hello = "こんにちは"; console.log(hello); |
このように、変数宣言をしなくても
変数を宣言したように、使用できてしまいます。
一見、とても便利な機能に思えますが、
エラーが発生した際にエラーの原因がわからなくなってしまうことや、
バクが発生しやすくなってしまうため、
変数は必ず宣言してから使用するようにしましょう。
またJavaScriptには、strictモード(厳格モード)を有効にした開発が推奨されています。
strictモードで、宣言されていない変数に値を代入しようとするとエラーとなります。
特別な理由がない限り、strictモードを有効化して開発を行うようにしましょう。
同じ名前の変数で再宣言ができてしまう
|
1 2 3 4 5 |
var hello = "こんにちは"; var hello = "hello"; console.log( "hello" ); |
【出力結果】
letやconstで再宣言をすると、以下のエラーが発生しますが、
varでは再宣言が可能です。
【出力結果】
同じ変数名を使用してもエラーが発生しないため、
コードが肥大化した際など、同じ変数名で再宣言してしまい、
意図した値が取得できなくなってしまいます。
巻き上げという独自の挙動がある。
varには、巻き上げと呼ばれる独自の挙動があります。
varでは、現れる場所に関係なく、コードを実行する前に処理されます。
|
1 2 3 4 5 6 7 8 9 10 |
var hello = "こんにちは"; function <span>greeting</span> (){ console.log( hello ); var hello = "hello"; console.log( hello ); } <span>greeting</span>(); |
【出力結果】
実際には以下のように、関数の先頭で変数が
改めて宣言されている挙動になっています。
捉え方としては、先頭でundefined型の変数を宣言して、
後ろの行で再代入している、というイメージです。
|
1 2 3 4 5 6 7 8 9 10 11 |
var hello = "こんにちは"; function <span>greeting</span>(){ var hello; console.log( hello ); //undefined hello = hello; console.log( hello ); } <span>greeting</span>(); |
まとめ
これまでのことを表にまとめると、以下の違いがあります。
| let | const | var | |
|---|---|---|---|
| 再代入 | 可能 | 不可能 | 可能 |
| 再宣言 | 不可能 | 不可能 | 可能 |
| スコープ | ブロックスコープ | ブロックスコープ |
関数スコープ、 グローバルスコープ |
型付け言語について
また、プログラミング言語には、
動的型付け言語と静的型付け言語があります。
JavaScriptのデータ型は、
プログラム実行時に値が設定された時点で自動的にデータ型が決まります。
このようなプログラミング言語のことを動的型付け言語と呼びます。一方、開発者が明示的にデータ型を宣言する必要がある
プログラミング言語のことを，動的型付け言語と呼びます。
自動的に型が決まる動的型付け言語は、
表記が簡素になり便利に感じますが、
プログラムが実行された際に判断されるため、
バグが混入しやすくパフォーマンスが悪くなる傾向にあります。
そのため近年では、JavaScriptでデータ型の定義ができる
「TypeScript」というプログラミング言語が注目を集めています。
今回は、JavaScriptでの変数宣言の方法、静的型付け言語についての内容でした。
ここまで読み進めていただきありがとうございました。
