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