【JavaScript】変数とは?

こんにちは、パキラです。
今回はJavaScriptでプログラミングをする上で大切な変数についてまとめていきます。
変数という初心者の私には馴染みがない使わない言葉です。
プログラミングを勉強していくと必ず聞く言葉になりますので、ものすごく重要ですので、まだ変数がよくわからない方、勉強中の方はぜひご覧になってください。

初心者のためのブログ始め方講座

JavaScript 第7版 [ David Flanagan ]

価格:5,060円
(2022/7/19 11:03時点)

変数

プログラミング言語の中には、文字列や数字を繰り返し使えるように変数という機能があります。
この変数には名前を付けることで、繰り返し使用ができるようになります。
まず、この変数のイメージは文字列や数字を収める箱である。
この様に表現されることが多いです。

スキルのフリマ【ココナラ】

  • 宣言
  • 代入
  • 参照

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]

価格:2,728円
(2022/7/19 11:04時点)

宣言

変数の宣言というのは、これから変数を入れる箱を作ります、用意をしますということになります。
この箱の種類には『const』、『let』、『var』があります。
それぞれの特徴は下記で紹介します。

まずはこの用意した箱を使いますと宣言をして、この箱に識別子という名前を付けます。
この名前を付けるルールがあります。
名前の必ず最初の文字は半角の英字、ドル記号『$』、アンダースコア『_』のいずれかでなければならない。
JavaScriptでは大文字、小文字を区別します。
続く文字には数字も使用できます。

プログラミングのオンラインスクールのCodeCamp

JavaScript逆引きレシピ 第2版 [ 山田 祥寛 ]

価格:3,080円
(2022/7/19 11:04時点)

const

再代入できない変数の宣言とその変数が参照する値(初期値)を定義できます。

const abc(変数名) = 初期値;
      abc(変数名)  = 変更した値;  エラーが出ます

『const』で代入した変数を、後から値を代入することはできません。再定義もできません。
再代入、再定義すると、エラーが発生してそれ以降の処理は行われなくなります。


一般的に変数への再代入は『変数の値は最初に定義した値と常に同じである』という参照透過性と呼ばれるルールを壊すため、バグを発生させやすい要因と知られています。
そのため、変数に対して値を再代入する必要がない場合は、『const』で変数宣言することを推奨しています。

しかし、ここで気をつけてほしいことがあります。
『const』は再代入、再定義ができませんが、変数に保持されている値は不変ではありません。
変数の中身がオブジェクトの場合、オブジェクトの内容は変更可能です。

SEO重視かつモバイルファーストのレスポンシブデザインでWebサイトの制作を行います。

図解! JavaScriptのツボとコツがゼッタイにわかる本 “超”入門編 [ 中田 亨 ]

価格:2,640円
(2022/7/19 11:05時点)

let

『let』は、値の再代入が可能な変数を宣言できます。
しかし、再定義はできません。

let abc(変数名) = 初期値;
    abc(変数名) = 変更した値

このように初期値が入っている変数に、後から値を再代入できます。
何度でも値の代入が可能です。

let abc(変数名) = 初期値;
let abc(変数名)  = 変更した値;

これは再定義となり、エラーとなります。

月額968円からの高速LiteSpeed採用クラウド型レンタルサーバー

いちばんやさしいJavaScriptの教本第2版 ECMAScript 2017(ES8)対応 人気 [ 岩田宇史 ]

価格:2,420円
(2022/7/19 11:05時点)

var

『var』は値の再代入が可能な変数を宣言できます。
と使い方はほとんど同じです。
しかし同じ名前の変数を再定義できてしまう問題があります。

『const』、『let』は再定義しようとするとエラーが出ます。
『var』は再定義ができます。
これが意図せずに同じ名前の変数名で定義してしまうと、値を上書きをしてしまいます。
この上書きがバグの原因となります。
さらに『var』には変数の巻き上げと呼ばれる意図しない挙動があります。
これは『var』⇒『const』・『let』に置き換えれば解消されます。
そのため、これからのコードには『var』は使用しないほうがよいと思います。

変数の宣言は2種類あります。
ローカル変数とグローバル変数の両方の宣言ができます。

JavaScript 第7版 [ David Flanagan ]

価格:5,060円
(2022/7/19 11:16時点)

ローカル変数

関数やメソッドの中で変数を宣言すると、そのブロックの中で使用できるようになる変数になります。
有効範囲(スコープ)といいます。局所化されます。
変数は、そのブロック内のコードからのみ参照や変更をできるようになります。
基本的にはローカル変数の寿命はブロックの開始から終了までです。
言語によっては内容を維持する指定する事ができる場合もあるそうです。
ただしECMAScript2015より前のJavaScriptにはブロック文のスコープがありません。
つまり関数内、メソッド内で宣言した変数が、ブロックを超えて影響を与えて、バグの原因となっていたということです。

グローバル変数

グローバル変数は同じプログラムのどこからでも参照や書換が可能な変数を宣言できます。
つまりブロックの中でも外でも使用ができるということです。

まとめ

ここまで読んでいただいてありがとうございます。
今回は変数について勉強したことをまとめました。
変数にいれる値というのは数字だけではなく文字や関数を入れたり、イメージがしにくいと思います。
私も少しずつ慣れてきましたが、初めての方は箱のイメージして、その中に値を出し入れして使用するように覚えるいいと思います。

確かな力が身につくJavaScript「超」入門 第2版 [ 狩野 祐東 ]

価格:2,728円
(2022/7/19 11:16時点)



コメント