1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. 【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

変数は、数値や文字列などのデータを入れておける箱です。
プログラミングをはじめて、最初のほうで覚えるものですが、変数は意外と奥が深いものです。

そこで今回は、JavaScriptにおける変数の使い方を、多少のおふざけも混ぜて、詳しく紹介していきたいと思います。

分かりやすく、対話形式で解説していきます。

JavaScriptの基本編は、こちらの記事を御覧ください。

R

師匠! 今回もJavaScriptの解説お願いします!

りこ

あら、久しぶりね。前回教えたことは覚えてる?

R

はい、覚えてます! JavaScriptで……えっと、カレーを作るんでしたっけ?

りこ

そうそう、JavaScriptで美味しいカレーの作りかた……

りこ

……って、全く覚えてないだろー!!!(蹴

R

ぎえええええええっっ!

りこ

今回は前回の講座の、変数の使い方部分をより詳しく解説していくわよ!

※JavaScriptでカレーは作れません。

目次
  1. 変数の使い方
  2. 変数の宣言
  3. var、const、letの違いについて
  4. ブロックスコープとは?
  5. 文字列の中で変数を使う
  6. まとめ

変数の使い方

まずは変数の使い方について、おさらいしておきましょう。

りこ

前回も勉強したけど、変数の使い方は覚えてる?

R

覚えてますとも。変数は箱みたいなもので、いろんな値を入れておけるんでしたね!

りこ

そうそう。たとえば、変数animal"dog"を代入するならこういうふうね

sample.js

animal = "dog";
console.log(animal);

実行結果

dog
R

変数の宣言、なんてのもありましたね

りこ

変数の宣言にはvarを使うわ!

sample.js

var animal;
animal = "dog";
console.log(animal);

実行結果

dog
りこ

変数の宣言と代入を同時にすることも可能よ!

sample.js

var animal = "dog";
console.log(animal);

実行結果

dog

変数の宣言

つづいて変数の宣言方法を見ていきましょう。

りこ

変数を宣言するときはvarも使えるんだけど、でも最近はvarよりもconstletの方が便利だから、そっちを使う人の方が多いと思うわ

R

えぇっ、varなんて覚える必要なかったんですか!?

りこ

でも、JavaScriptの勉強しようとしてると、varで宣言されてるものも多いのよ
constletを使えばいいと思うけど、ソースを読むためにはvarも覚えておく必要があるってことね

var

varによる変数宣言の方法です。

R

varは前回も使いましたね!

りこ

うん。だからこれは前回のおさらいね

sample.js

var animal = "dog";
console.log(animal);

実行結果

dog
R

animalという変数をvarで宣言して、そのなかにdogを代入
console.log()で、animalに入ってるものをコンソールに表示しているんですね

const

つづいて、constによる変数宣言の方法です。

りこ

さっきの例で、そのままconstを使ってみるわ!

sample.js

const animal = "dog";
console.log(animal);

実行結果

dog
R

ただvarconstに変えれば使えるんですね

let

つづいて、letによる変数宣言の方法です。

りこ

こんどはletを使ってみるわよ

sample.js

let animal = "dog";
console.log(animal);

実行結果

dog
R

おなじようにvarletに変えれば使えるんですね

var、const、letの違いについて

つづいて、varconstletの違いを見ていきましょう。

R

ちょっと待ってください、師匠!
varconstlet、いったいなにが違うんですか?

りこ

そうね……いろいろ違うわ

R

たとえば?

変数の値を変更できるかどうかの違い

変数を宣言するときに使う、varconstletですが、変数をあとから変更できるかどうかの違いがあります。

りこ

varletは代入した値をあとから変更することができるんだけど、constはできないの

R

そんな! 変数の値を変更できなかったら困らないですか?

りこ

逆に間違って変数を書き換えちゃうようなバグを防げるのよ

R

なるほど……でも変数なのに数が変わらないって、変ですね
数字じゃなくても変数っていうのも十分変ですけど……
変数って言葉は偏見ですね。なんで変更せーへんのか
あ、変な返答してもうたわ……すんまへん

りこ

へんへんうるさいわね……でもconstで宣言されたものは変数っていうよりも定数って言ったほうがいいのかな

R

定数!?

りこ

うん。定数は値が一定のものね
JavaScriptのconstは、正確にはちょっと定数と違うんだけど……これを解説しようと思うとよけいに混乱しちゃうから、とりあえず、constは値が変更できない変数って覚えておいて

R

じゃあ、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"を代入しようとしたものよ

R

実行結果がエラーになってる!

りこ

ふふっ、値を書き換えたくないものはconstを使っておけば、間違えちゃったときにエラーになって、バグを防げるでしょ?

R

そういうことだったのか!

有効範囲(スコープ)の違い

変数の有効範囲(スコープ)の違いがあります。

りこ

変数には有効範囲があって、宣言した場所によって、変数を使える範囲が変わってくるの

R

使える範囲があるんですか?

りこ

そうなの。使える範囲を制限することで、間違えて同じ名前の変数を作っちゃった、とか、そういったバグが防げるのよ

R

なるほど。お風呂にはいるとき、履いていたパンツと着替えのパンツを同じところに置いておくと、どっちがどっちだか分からなくなるのと一緒ですね

りこ

そうそう。ちゃんと決めたところに置いておかないと、たまに帽子と間違える……

R

……それはないでござる

りこ

あ、あんたに合わせたのよ
それより、スコープについての違いの例は、こんな感じね

sample.js

var x = 24;

if ( x === 24 ) {
	var y = 30;
}

console.log(x);
console.log(y);

実行結果

24
30
R

これは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
R

さっきのvarletに変えただけじゃないですか
実行結果も同じ……

R

……あれ? エラーになってる!

りこ

そう。yif文の{}のなかで宣言されてるでしょ?
だからyは、{}の外から呼び出すことができないの

いまはletを使ったけど、constでも同じ結果になるわ!

R

でも、varを使ったときは呼び出せましたよね

りこ

それがvarと、letconstの、有効範囲(スコープ)の違い。一見、varのほうが便利そうだけど、有効範囲を制限できるletconstのほうが、あとからプログラムが複雑になりにくいの

あと、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
R

本当だ。関数の{}のなかだと、varを使って宣言された変数も、{}の外からは呼び出せないんですね

りこ

つまり、簡潔に言うと、letconstはブロックでスコープが有効varは関数でスコープが有効、ってこと

変数の複数回宣言の違い

変数は、同じブロックで複数回宣言すると、エラーになる場合があります。

りこ

じゃあ、このソースを見て

sample.js

var x = 10;
var x = 15;
console.log(x);

実行結果

15
R

varで宣言したxに10を代入して、もういちどxを宣言しなおしてるんですね
結果はあとから代入した15が表示されていますね

りこ

でもletを使うとこうなるの

sample.js

let x = 10;
let x = 15;
console.log(x);

実行結果

Uncaught SyntaxError: Identifier 'x' has already been declared
R

あ、エラーになってますね

りこ

そう。letは同じ変数を同じスコープで2度宣言してしまうと、エラーになるの
もちろん、constでもエラーになるわ

R

こうやって、バグを防ぐんですね

ブロックスコープとは?

つづいて、ブロックスコープについて詳しく見ていきましょう。

R

りこ師匠。さっき言ってた、letconstはブロックでスコープが有効、っていうのの、ブロックってどういうことですか?

りこ

もともとJavaScriptにはブロックスコープがなかったの。それが今はletconstができて、ブロックスコープが使える様になったわけね
ブロックってのは、{}で囲われた部分のこと。if文は{}で囲うでしょ? まぁ、さっきはとりあえずif文を使ったんだけど、本当は{}だけでいいの

R

というと?

りこ

つまり、こういうこと

sample.js

let x = 5;
{
    let x = 17;
}

console.log(x);

実行結果

5
R

へぇ。{}を書くだけで有効範囲がつくられるのか
letを使っていれば、{}のなかで代入しても、外には影響しないんですね

りこ

うん、そういうこと
これは即時関数と似た様なものだから、即時関数もあまり使う必要がなくなるわ

R

即時関数!?

りこ

即時関数っていうのは、こういうの

sample.js

var x = 5;
(function (){
    var x = 17;
})();
 
console.log(x);

実行結果

5
R

なるほど。varは関数でスコープが有効になるから、{}の代わりにこういった関数を使う必要があったんですね!

りこ

うん。そういうこと

文字列の中で変数を使う

つづいて、文字列のなかで変数を使う方法を見ていきましょう。

りこ

前回やった文字列の計算は覚えてる?

R

はい。文字列同士で足し算ができるんでしたよね

sample.js

const name = 'りこ';
console.log('私の名前は' + name + 'です。');

実行結果

私の名前はりこです。
りこ

JavaScriptでは、文字列同士を「+」を使って足し算することができるの
だけど、こんな方法もあるわ!

sample.js

const name = 'りこ';
console.log(`私の名前は${name}です。`);

実行結果

私の名前はりこです。
りこ

文字列を囲う時に、シングルクォーテーション(')やダブルクォーテーション(")の代わりに、バッククォート(`)を使うの
そして、${}の中に変数名を入れれば、その変数に代入されている値を表示することができるわ

R

へぇ、こんな方法もあるんですね!

まとめ

今回はJavaScriptでの変数の使い方を、詳しく解説しました。

R

りこ師匠!!今日師匠に教えて貰ったことを使って、ソース書きました。見てください!

りこ

あ、すごーい。見せて!

R

これです。毎日書いていこうと思います

sample.js

{
  const panty = "ピンク";
  console.log(`りこ「昨日の私のパンツは${panty}です。」`);
}
{
  const panty = "白";
  console.log(`りこ「今日の私のパンツは${panty}です。」`);
}

実行結果

りこ「昨日の私のパンツはピンクです。」
りこ「今日の私のパンツは白です。」
りこ

そうそう、今日のあたしのパンツは……

りこ

……って、なんじゃこのプログラムは!!! (蹴
てか、なんであたしに言わせてんだよ!!! (蹴
それ以前に、なんでパンツの色知ってんだよ!!!! (蹴
てめー、ミキサーにかけるぞ!! (蹴 (蹴 (蹴

R

ぎえええええええええええええっ! ふざけすぎた。一週間は口をきいてくれないだろうな……

この企画の一覧はこちら

  1. JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!
  2. 【初心者向けJavaScrip入門】変数を使いこなすための、かなり詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

オブジェクトを使ってみよう!

【JavaScript】オブジェクトを使ってみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう!前回の講座《こうざ》では、HTMLやCSS、JavaScriptを分けて管理《かんり》す

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

Pug

PugでPHPが使える! gulpfile.jsをちょっと工夫するだけだよ

HTMLを書くときPugを使うととても便利なのですが、PHPを書きたいと思ったときは少し工夫が必要になります。 PugでPHPを書くためのプラグインを使う方法もありますが、使うプラグインが増えれば増

webpackを使ってゲームエンジンを作ろう!(JSライブラリの作り方)

みなさんこんにちは。今回もたのしくプログラミングを学んでいきましょう! 前回の「JavaScriptでRPGを作ろう!スマホにも対応したゲームの作り方」では、JavaScriptでゲームエンジ

キー入力で文字を切り替えるべ

【JavaScript】ノベルゲーム風にキー入力で文字を切り替える方法! 小学生からのプログラミング入門

小学生からのJavaScript講座です。 前回、文字を一文字づつ表示させる方法と改行の方法を紹介しました。今回はこのプログラムに、キー入力によって文字を切り替えられる機能をつけてみましょう。

【 WordPress 】functions.php で色んな機能を使ってみよう!【基本】

馬鹿は風邪を引かないといいますが、どうやら引いたようです。@It_is_Rです。 ちなみに、「馬鹿は風邪を引かない」ということわざは、「馬鹿は風邪を引いても気がつかない」という例えだって知ってました

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。管理画面をカスタマイズするこ

迷路やRPGで使えるマップを作ってみよ!

【JavaScript】迷路やRPGで使えるマップを作ってみよう! 小学生からのプログラミング入門

小学生からのプログラミング講座《こうざ》、今回もはじめていきましょう! 前回はHTML5とCanvasを使って、キャラクターがキーボードの入力《にゅうりょく》で移動《いどう》するところまで、紹

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です