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入門】変数を使いこなすための、かなり詳しい解説

スポンサードリンク

関連コンテンツ

オススメ記事

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。 そんな時、ローカルにWebサーバを立ち上げ

キーボードで画像を動かすよ!

【JavaScript】キー入力でキャラを動かしてみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回は、りこちゃんの画像をクリックすると、前に一歩動くというのをJavaScri

画像を表示するよ

JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。 前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScrip

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を読み込む

gulp

gulp4完全攻略ガイド。インストールから使い方まで徹底解説!

幸せそうな人を見ると、転べって思います。@It_is_Rです。 Webページを制作するとき、sassをcssに変換して使用することが多いと思います。 今回はgulp4の使い方を、インストールか

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

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

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

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