1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)

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

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

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

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

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

オープニング

R

R

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


りこ

りこ

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


R

R

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


りこ

りこ

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


R

R

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


りこ

りこ

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


R

R

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


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

キャラクター
【りこ】

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

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

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

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

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

ECMAScriptとは?

りこ

りこ

ECMAScriptって聞いたことある?


R

R

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


りこ

りこ

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


R

R

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


りこ

りこ

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


R

R

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

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

りこ

りこ

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


R

R

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


りこ

りこ

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


R

R

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


りこ

りこ

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

りこ

りこ

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


R

R

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


りこ

りこ

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


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

R

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


りこ

りこ

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


R

R

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

ブロックスコープとは?

R

R

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


りこ

りこ

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


りこ

りこ

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


R

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

R

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


りこ

りこ

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


R

R

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


りこ

りこ

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


R

R

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


りこ

りこ

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


R

R

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

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

りこ

りこ

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

sample.js

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

実行結果

私の名前はりこです。

りこ

りこ

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


R

R

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


りこ

りこ

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

sample.js

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

実行結果

私の名前はりこです。

りこ

りこ

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


R

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

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

まとめ&次回予告

R

R

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


りこ

りこ

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


R

R

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

sample.js

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

実行結果

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

りこ

りこ

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


R

R

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

この企画の一覧はこちら

  1. JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!
  2. JavaScriptマンガ講座。初心者でも痛いほど理解できる変数の使い方。(実践編)
  3. JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

スポンサードリンク

関連コンテンツ

オススメ記事

bootstrap3

Bootstrap3でサイトのレイアウト。グリッドシステムの使い方と裏技。

開発中のゲームはサイト制作に入っております。@It_is_Rです。 前回に引き続き、Bootstrap3の記事です。 サイトを作るとき、CSSなどを使ってサイトのレイアウトを調節したりしますが

carousel

【Bootstrap 4】くるくる回転するUI、カルーセル機能のを実装方法!

Bootstrap4の使い方、第8回目です。 サイトをみていると、画像を横並びにしてくるくると回転するカルーセル機能を実装しているサイトがありますよね。 Bootstrap4には、カルーセルを

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

webpack-dev-serverの基本的な使い方と設定方法の詳しい解説

あとで見ようとブラウザのタブを開きすぎて、どれがどれだか分からなくなる@It_is_Rです。 webpack-dev-serverを使えば、とても簡単にwebpackでの開発サーバーを立ち上げる

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 WordPress テーマ自作シリーズ第五回目です。 今回から、本格的にテーマを作っていきます。 前回の記事はこちらです。 WordPres

リセットCSS は何を使う? 2018年ランキング5選紹介。

世間では年があけたと大騒ぎですが、私はいつでもオープンです。@It_is_Rです。 祝ってください。 Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあり

コメントをどうぞ!

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




オリジナルゲーム.com