押入れが部屋になっている@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文)の真偽値による使い方。（実践編）
