変数は、数値や文字列などのデータを入れておける箱です。
プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。
そこで今回は、JavaScriptにおける変数の使い方を、多少のおふざけも混ぜて、詳しく紹介していきたいと思います。
分かりやすく、対話形式で解説していきます。
JavaScriptの基本編は、こちらの記事を御覧ください。
あら、久しぶりね。前回教えたことは覚えてる？
……って、全く覚えてないだろー！！！（蹴
ぎえええええええっっ！
※JavaScriptでカレーは作れません。
変数の使い方
まずは変数の使い方について、おさらいしておきましょう。
sample.js
animal = "dog";
console.log(animal);実行結果
dogsample.js
var animal;
animal = "dog";
console.log(animal);実行結果
dogsample.js
var animal = "dog";
console.log(animal);実行結果
dog変数の宣言
つづいて変数の宣言方法を見ていきましょう。
えぇっ、varなんて覚える必要なかったんですか！？
var
varによる変数宣言の方法です。
varは前回も使いましたね！
うん。だからこれは前回のおさらいね
sample.js
var animal = "dog";
console.log(animal);実行結果
dogconst
つづいて、constによる変数宣言の方法です。
さっきの例で、そのままconstを使ってみるわ！
sample.js
const animal = "dog";
console.log(animal);実行結果
dog
ただvarをconstに変えれば使えるんですね
let
つづいて、letによる変数宣言の方法です。
こんどはletを使ってみるわよ
sample.js
let animal = "dog";
console.log(animal);実行結果
dogおなじようにvarをletに変えれば使えるんですね
var、const、letの違いについて
つづいて、var、const、letの違いを見ていきましょう。
ちょっと待ってください、師匠！var、const、let、いったいなにが違うんですか？
そうね……いろいろ違うわ
たとえば？
変数の値を変更できるかどうかの違い
変数を宣言するときに使う、var、const、letですが、変数をあとから変更できるかどうかの違いがあります。
varやletは代入した値をあとから変更することができるんだけど、constはできないの
定数！？
うん。定数は値が一定のものね
JavaScriptのconstは、正確にはちょっと定数と違うんだけど……これを解説しようと思うとよけいに混乱しちゃうから、とりあえず、constは値が変更できない変数って覚えておいて
やってみる？
sample.js
const animal = "dog";
animal = "cat";
console.log(animal);実行結果
Uncaught TypeError: Assignment to constant variable.
at script.js:2実行結果がエラーになってる！
ふふっ、値を書き換えたくないものはconstを使っておけば、間違えちゃったときにエラーになって、バグを防げるでしょ？
そういうことだったのか！
有効範囲（スコープ）の違い
変数の有効範囲（スコープ）の違いがあります。
使える範囲があるんですか？
なるほど。お風呂にはいるとき、履いていたパンツと着替えのパンツを同じところに置いておくと、どっちがどっちだか分からなくなるのと一緒ですね
そうそう。ちゃんと決めたところに置いておかないと、たまに帽子と間違える……
……それはないでござる
あ、あんたに合わせたのよ
それより、スコープについての違いの例は、こんな感じね
sample.js
var x = 24;
if ( x === 24 ) {
var y = 30;
}
console.log(x);
console.log(y);実行結果
24
30じゃあ、varじゃなくてletを使ってみるわね
sample.js
let x = 24;
if (x === 24) {
let y = 30;
}
console.log(x);
console.log(y);実行結果
24
script.js:8 Uncaught ReferenceError: y is not defined
at script.js:8さっきのvarをletに変えただけじゃないですか
実行結果も同じ……
……あれ？ エラーになってる！
そう。yはif文の{}のなかで宣言されてるでしょ？
だからyは、{}の外から呼び出すことができないの
いまはletを使ったけど、constでも同じ結果になるわ！
でも、varを使ったときは呼び出せましたよね
それがvarと、letやconstの、有効範囲（スコープ）の違い。一見、varのほうが便利そうだけど、有効範囲を制限できるletやconstのほうが、あとからプログラムが複雑になりにくいの
あと、varでも関数に関してはスコープが有効になるわ
sample.js
function test() {
var x = 1;
console.log(x);
}
test();
console.log(x);実行結果
1
script.js:7 Uncaught ReferenceError: x is not defined
at script.js:7変数の複数回宣言の違い
変数は、同じブロックで複数回宣言すると、エラーになる場合があります。
じゃあ、このソースを見て
sample.js
var x = 10;
var x = 15;
console.log(x);実行結果
15varで宣言したxに10を代入して、もういちどxを宣言しなおしてるんですね
結果はあとから代入した15が表示されていますね
でもletを使うとこうなるの
sample.js
let x = 10;
let x = 15;
console.log(x);実行結果
Uncaught SyntaxError: Identifier 'x' has already been declaredあ、エラーになってますね
こうやって、バグを防ぐんですね
ブロックスコープとは？
つづいて、ブロックスコープについて詳しく見ていきましょう。
りこ師匠。さっき言ってた、letやconstはブロックでスコープが有効、っていうのの、ブロックってどういうことですか？
もともとJavaScriptにはブロックスコープがなかったの。それが今はletやconstができて、ブロックスコープが使える様になったわけね
ブロックってのは、{}で囲われた部分のこと。if文は{}で囲うでしょ？ まぁ、さっきはとりあえずif文を使ったんだけど、本当は{}だけでいいの
というと？
つまり、こういうこと
sample.js
let x = 5;
{
let x = 17;
}
console.log(x);実行結果
5へぇ。{}を書くだけで有効範囲がつくられるのかletを使っていれば、{}のなかで代入しても、外には影響しないんですね
sample.js
var x = 5;
(function (){
var x = 17;
})();
console.log(x);実行結果
5うん。そういうこと
文字列の中で変数を使う
sample.js
const name = 'りこ';
console.log('私の名前は' + name + 'です。');実行結果
私の名前はりこです。sample.js
const name = 'りこ';
console.log(`私の名前は${name}です。`);実行結果
私の名前はりこです。文字列を囲う時に、シングルクォーテーション（'）やダブルクォーテーション（"）の代わりに、バッククォート（`）を使うの
そして、${}の中に変数名を入れれば、その変数に代入されている値を表示することができるわ
へぇ、こんな方法もあるんですね！
まとめ
今回はJavaScriptでの変数の使い方を、詳しく解説しました。
りこ師匠！！今日師匠に教えて貰ったことを使って、ソース書きました。見てください！
あ、すごーい。見せて！
これです。毎日書いていこうと思います
sample.js
{
const panty = "ピンク";
console.log(`りこ「昨日の私のパンツは${panty}です。」`);
}
{
const panty = "白";
console.log(`りこ「今日の私のパンツは${panty}です。」`);
}実行結果
りこ「昨日の私のパンツはピンクです。」
りこ「今日の私のパンツは白です。」そうそう、今日のあたしのパンツは……
……って、なんじゃこのプログラムは！！！ （蹴
てか、なんであたしに言わせてんだよ！！！ （蹴
それ以前に、なんでパンツの色知ってんだよ！！！！ （蹴
てめー、ミキサーにかけるぞ！！ （蹴 （蹴 （蹴
ぎえええええええええええええっ！ ふざけすぎた。一週間は口をきいてくれないだろうな……
このシリーズの一覧はこちら
- JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編！！
- 【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説
