押入れが部屋になっている@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マンガ風講座。初心者でも絶対に理解できる入門編!!
- JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)
- JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)