JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

公開 :  → 更新 :

押入れが部屋になっている@It_is_Rです。

今回の記事はJavaScriptマンガ講座、2回目となりました。
この企画はJavaScriptをフザケまくって覚えようというものです。

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

JavaScriptの基本編は、こちらの記事を御覧ください。
JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

オープニング

R

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


りこ

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


R

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


りこ

そうそう、JavaScriptで美味しいカレーの作りかた……って、全く覚えてないだろー!!!(蹴


R

ぎえええええええっっ!!!初めて蹴られたっ!!


りこ

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


R

まぁ、こんな感じの企画です。


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

キャラクター
【りこ】

JavaScriptにかなり詳しい現役JKギャル。JSは好きだが、JSと言われると怒る。ロリフェイスのくせに。。。

あだ名はジャバスク・りこ。

かなり性格が悪く、口も悪い。
しかし、天然でノリがいいので、からかうと面白い。

近い未来、このブログの管理人であるRによって、JavaScriptで操作されることをまだ知らない。

※JavaScriptで人の思考を直接操作することはできません。

ECMAScriptとは?

りこ

ECMAScriptって聞いたことある?


R

え、なんかマニアックな言語ですか?


りこ

JavaScriptには仕様があって、それをECMAScriptっていうの。


R

なんか、よく分かんないです。


りこ

ECMAScriptっていうから言語っぽいんだけど、これはEcma Internationalに標準化されたJavaScriptのバージョンなのよ。
まぁ、細かい話は置いておいて、今の最新が、ECMAScript2016なの。


R

なるほど。つまり、最新のJavaScriptのバージョンがECMAScript2016なんですね。

変数の使い方。letとvarの違いをより詳しく

りこ

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


R

覚えてますとも。letやvarで宣言するんでしたよね!


りこ

そうそう。でも最近はvarよりもletの方が便利だから、let使う人の方が多いと思うわ。


R

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


りこ

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

りこ

これは前回の復習よ。letとvarはどう違ったか覚えてる?


R

えーっと……(スマホを取り出す


りこ

検索するなーっ!!!(蹴


R

ぎえええええぇぇっっっ!!!スマホがスマートじゃ無くなったぁっ!!!!


りこ

letとvarの違いについて、少しだけ復習するわ。
前回はif文を使って解説したわよね。

sample.js

let x = 3;
let y = 14;
if(x === 3) {
    let y = 13;
}
console.log(y);

実行結果

14

sample.js

let x = 3;
var y = 14;
if(x === 3) {
    var y = 13;
}
console.log(y);

実行結果

13

りこ

これが前回の例ね。
最後のconsole.log(y)で、if文の外の値が表示されるか、それとも中の値が表示されるかの違い。有効範囲、つまりスコープを有効にするかどうかってことね。
でも気をつけて。関数内ではvarもスコープが有効になるわ。

sample.js

var x = 24;
(function() {
    var x = 30;
})();
console.log(x);

実行結果

24

りこ

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

りこ

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

sample.js

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

実行結果

エラー

sample.js

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

実行結果

15

R

letはエラーになってますね。


りこ

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


R

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

ブロックスコープとは?

R

りこ師匠、ブロックでスコープが有効ってどういうことですか?


りこ

もともとJavaScriptにはブロックスコープがなかったの。それが今はブロックスコープが使える様になったわけね。


りこ

ブロックってのは、{}で囲われた部分のこと。if文は{}で囲うでしょ?
まぁ、前回はとりあえずif文を使ったんだけど、本当は{}だけでいいの。


R

というと?


りこ

つまり、こういうこと。

sample.js

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

console.log(x);

実行結果

5

sample.js

var x = 5;
{
    var x = 17;
}

console.log(x);

実行結果

17

R

うわ、あまり見ない書き方だ。。。


りこ

これで同じ変数名を作っちゃったとか、そういったバグが防げる様になるの。
これが、varよりもletを最近は多く使うっていう理由ね。


R

この{}はどうやって使うんですか?


りこ

これは変数の有効範囲を作りたいときに書けばいいと思うわよ。
これは即時関数と似た様なものだから、即時関数もあまり使う必要がなくなるわ。
あっ、即時関数についてはまた、関数についての記事で解説する予定よ


R

思い出したかの様に見せかけて、告知ですね。解説したらどうせここにリンク貼ろうとしてるんですね!白々しい!!


りこ

そうそう、リンク貼ればそっちの記事のアクセスも増えるかなー……ってじゃかぁしいわっ!!!(蹴 (蹴 (蹴


R

ぎえええええぇぇぇっっ!!!!白々しい女だけに……白か。(鼻血

文字列の中で変数を使う。

りこ

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

sample.js

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

実行結果

私の名前はりこです。

りこ

JavaScriptでは、文字列同士を「+」を使って足し算することができるの。


R

なるほど。前回でも似たようなことやりましたね。


りこ

だけど、もっと便利な方法があるわ!

sample.js

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

実行結果

私の名前はりこです。

りこ

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


R

へぇ、これは凄い!!

定数を使う。

りこ

定数はあらかじめ値が決まってて、値を変更できない変数みたいなものよ。値を覚えておくのがメンドい時とか、長くて毎回コードを書くのが大変な時に使うの。

sample.js

const SIZE = 15;
console.log(SIZE);

実行結果

15

りこ

constは、letやvarみたいな宣言ね。でも、これは定数だから、あとから値を変更できないの。

sample.js

const SIZE = 15;
SIZE = 18;
console.log(SIZE);

実行結果

エラー

R

なるほど。性格が相変わらず凶暴なくせに、全然変えようとしない、りこ師匠のような奴ですね。


りこ

そうそう、あたしって性格凶暴なのに、全然変わら……って、てめー、ライオンの餌にするぞ!!!(蹴 (蹴 (蹴


R

ぎえええぇぇぇええええっっ!!!でも大丈夫。ライオンよりも凶暴な奴がここにいる。

まとめ&次回予告

R

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


りこ

あ、すごーい。見せて!!


R

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

sample.js

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

実行結果

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

りこ

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


R

ぎえええええええええええええっ!!!ふざけすぎた。一週間は口をきいてくれないだろうな。。。
はい、というわけで、次回は条件分岐あたりをもっと詳しく解説する……かも!!

この企画の一覧はこちら

スポンサードリンク

おすすめの記事♪

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

[email protected]_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

[email protected]_is_Rです。 今回の記事はJavaScriptマンガ講座、2回目となりました。 この企画はJavaScriptをフザケまくって覚えようというものです。


コメントを残す

メールアドレスが公開されることはありません。


Category

Games