こちらの続きです

さて、今回は変数について学んでいきたいと思います。

変数

変数とは

普段HTML/CSSしか扱わない人には馴染みがない言葉ですが、
もしpugやscssを書いているなら、どんなものか分かる人もいそうですね。
まずchatGPT先生に聞いてみました。

JavaScriptにおける変数とはどのようなものですか？

chatGPTの答え
変数とは値を一時的に保存するための箱のようなものです。
変数に値を代入することで、その値を保持し、別の箇所でその値を参照したり、加工したりすることができます。
JavaScriptの変数は、動的型付け言語であるため、宣言時に明示的な型の指定が必要ありません。
変数の値に基づいて、型が動的に決定されます。

JavaScriptでは、変数を定義するにはvar、let、constといったキーワードを使います。
以下に変数を定義するための基本的な文法を示します。

JavaScript

// 変数の定義
var x;   //変数 x を宣言
let y;   //変数 y を宣言
const z; //変数 z を宣言

// 変数への値の代入
x = 10;       // 変数 x に 10 を代入
y = "world";  // 変数 y に world を代入

// 変数の宣言と初期化を同時に行うこともできる
var a = 1;
let b = 2;
const c = 3;

varはES5以前のJavaScriptで使用される変数宣言キーワードです。
宣言された変数は、宣言されたスコープ内で利用できます。
また、同じ名前の変数を再宣言することができます。

letとconstはES6以降で導入されたブロックスコープを持つ変数宣言キーワードです。

letは、宣言されたブロック内で利用できます。
同じ名前の変数を再宣言することはできません。
再代入することは可能です。

constは再代入が不可能な定数を宣言する場合に使用されます。
定数は、宣言時に初期化される必要があります。
また、宣言されたブロック内でのみ利用できます。

JavaScript

let x = 10;     // x に　10 を代入
x = 20;         // x に　20 を再代入
console.log()x; // 20が出力される

const y = 30;   // y に　30 を代入
y = 40;         // エラーが発生する

変数は、値を代入することで作成されます。
変数を宣言するだけで、その変数は「未定義（undefined)」となります。

JavaScript

// 変数の定義
let a;          //変数 a は未定義（undefined)
console.log(a); // undefinedが出力される

変数には以下のような命名規則があります。

変数名はアルファベット、数字、アンダースコア（_）、ダラー記号（$）で構成されます。
変数名の最初の文字には数字を使用することはできません。
変数名は大文字と小文字を区別します。

変数を宣言した後は、代入演算子（=）を使って値を代入します。
代入された値は、変数名を通じて参照できます。
変数に代入された値の型は、動的に決定されます。

...
varはES5以前に使用されていたと言っていますが、現場のコードではまだよく見かけますね。
ES5以前には変数を宣言するキーワードはvarしかありませんでした。

補足

varは再代入も再定義もできるのでしたね。
複雑で大量のコードの中で、再代入・再定義を繰り返すうちに混乱を招き
予期せぬエラーを起こすことがあったそうです。

再代入はできるが再定義はできないletと
再代入も再定義もできないconstが生まれたことで
こういった事故が起こりにくくなった...らしいです。

今から新たにコードを書く場合はletかconstの２択で良さそうですね。

動的型付け言語

JavaScriptの変数は、動的型付け言語であるため、宣言時に明示的な型の指定が必要ありません。
変数の値に基づいて、型が動的に決定されます。

という文言がありました。
「動的型付け言語」って何？
動的、ということは静的もあるのでしょうか？
chatGPT先生〜〜〜

動的型付け言語とはなんですか？

chatGPTの答え
動的型付け言語とは、変数のデータ型を宣言せずに、実行時に自動的に型を判定する言語のことを指します。
JavaScriptやPython、Rubyなどが代表的な動的型付け言語です。

一方、静的型付け言語は、変数の宣言時に型を指定し、コンパイル時に型のチェックを行う言語のことを指します。
JavaやC++、C#などが代表的な静的型付け言語です。

動的型付け言語と静的型付け言語の最も大きな違いは、型の判定のタイミングです。
動的型付け言語は実行時に型の判定をするため、コードの記述が簡潔で柔軟であり、開発のスピードが速いという特徴があります。
一方で、実行時に型エラーが発生する可能性があります。

静的型付け言語はコンパイル時に型をチェックするため、コードの信頼性が高く、バグの発生率を減らすことができます。
また、コンパイル時にエラーが検出されるため、実行前に修正できることが多いというのがメリットです。
一方で、型のチェックによるコンパイル時間の増加や、型の指定が冗長になりがちというデメリットもあります。

...
なるほど。
つまりJavaScriptでは変数の宣言時にデータの型を指定する必要がない。
けど、もしデータ型のせいでエラーが発生するとしても、それはコードを実行するまで分からないよ。
ということですね。
確かに、先ほどの例で見ても、変数名や値は書きましたが、データ型については何も書いていませんでした。
Javaなどの言語ではデータ型まで指定しなきゃいけないんですね。
大変そう...

スコープ

ところで、解説の中に「スコープ」という言葉が出てきました。
よく分からなかったので、chatGPTさんに解説してもらおうと思います。

JavaScriptにおけるスコープとはどういったものですか？詳しく説明してください。

chatGPTの答え
JavaScriptにおけるスコープは、変数や関数が参照可能な範囲のことを指します。
スコープは、変数や関数が宣言された場所によって決まります。

グローバルスコープ
グローバルスコープは、コードのどこからでもアクセスできる範囲です。
グローバルスコープで定義された変数は、どこからでも参照できます。
ローカルスコープ
ローカルスコープは、関数内部で宣言された変数が参照可能な範囲です。
関数内で宣言された変数は、その関数内でのみ参照可能です。
また、関数の引数もローカルスコープ内に含まれます。
ブロックスコープ
ブロックスコープは、中括弧（{}）でかっこまれたブロック内で定義された変数や関数がそのブロック内でのみ有効であるスコープです。
if文やfor文、while文などのブロック内で変数を宣言することでブロックスコープが作られます。

スコープのルールは以下のようになります。

変数を宣言すると、その変数はそのスコープ内でのみ参照可能となる。
外部スコープで定義された変数は、内部スコープから参照可能である。
内部スコープで定義された変数は、外部スコープから参照できない。
変数名が重複する場合、内部スコープで定義された変数が優先される。

スコープは、コードの読みやすさや変数の名前の重複を避けるために重要です。
正しくスコープを理解していることで、変数の意図せぬ上書きや競合を避けることができます。

...
スコープは変数などを参照する時のルールのようですね。

簡単に言ってしまえば、
関数や制御構文の中で定義した変数は、その中でしか使えないよ。
それ以外の、外で定義した変数はどこからでも使えるよ。
といった感じでしょうか。

慣れるまでは「？？？」って感じですね。
しかし、このルールがないと
変数をどこでも指定できて、どこからでも参照できるので
コードが長かったり、ファイル分割されていたりすると
「この変数がどこで定義されているのか、探すのが大変！」
「同じ名前の変数が複数あって、意図せず値を再代入してしまった！」
みたいな混乱が起こってしまうわけです。

想像しただけでパニックです。
こわ〜〜

データの参照について

さて、変数について見てきました。
基本的には上までの知識があれば変数は使えると思いますが、
マニアックだけど、知っておいた方がよさそうな概念があるので
もう少し詳しく見ていきたいと思います。

変数を定義するとき。
varやlet、constを使って宣言し、
代入演算子（=）を使って値を代入する。

JavaScript

// 変数の定義
let y = {hoge: 1, fuga: 2};   //変数 y を宣言し、{hoge: 1, fuga: 2}を代入している

これで宣言できましたね。
では参照するときはどうでしょう。

JavaScript

// 変数yを参照する
console.log(y);   //コンソールに{hoge: 1, fuga: 2}が出力される

上のコードでは、先ほど定義した変数yを参照して
コンソールに内容を出力しています。

先ほど、変数は値を一時的に保存するための箱とありましたが
正確にはちょっとニュアンスが違います。

変数に入れられた値の方によって箱の内容が変わります。
値を入れている箱というのは、メモリの中にあります。
そして、変数には
プリミティブ型（stringやnumberなど）は値が、
オブジェクト型（配列やオブジェクト）は、中の値が入っているメモリを参照するためのアドレスが保持されています。
つまり先ほどの例で言うと、
「hogeの中身がメモリ上のどこにあるのか」という情報を変数が持っている
ということになります。
めっちゃややこしいので、図を載せておきますね〜

おそらく今はピンとこないと思うのですが、変数と値の関係の本質を知っておくと
変数を参照するときに思ったような結果が返ってこないぞ？という混乱が減るかもしれません。

リンク

全てのカリキュラムへのリンクは導入編に置いております

導入編

JavaScriptとは何か、基本的な文法

データ型

変数 ⇦NOW!!

演算子

制御構文