JavaScript入門① - 変数について分かりやすく解説します
JavaScript、かじったことがある人、これから勉強する人、プログラミング言語を学ぶ上で変数はしっかり理解しなければいけません。
変数、と言っても、ただの文字列を入れたり、数字を入れるだけでなく、関数を代入したり、上書きしたり、再宣言したり。。といろいろなことができます。
？？？？
いま、頭の中がこうなってても大丈夫です。この記事を読み終える頃には、「JavaScriptでの変数って基本はconst一択だよね！varとか再宣言・再代入可能だし、バグの温床になるよね」と堂々といえる様になってます。
が、正直変数の概念は何となくわかっていれば良いです。おまけの欄で色々と話しますが、その辺りは実践になった時に思い出せるように頭の片隅に置いておけば良いです。
変数とは何か
HTML/CSSを学んで、次にJavaScriptを学ぶ人にとって初めてのプログラミング。
ここで出てくる【変数】という言葉にいきなり「うっ」となる人は多いんじゃないでしょうか。
でも至ってシンプルです。
JavaScriptの基礎 - 変数編
— スキプラ＠無料でコーディング徹底練習note公開中 (@riman_skillplus) June 1, 2020
宣言・代入・参照。って多分HTML/CSSからやってきた人からすると唐突過ぎて難しいきがする。
(自分はそうだった)
変数 = 箱
宣言 = 箱の用意
代入 = 箱に入れる
参照 = 箱から取り出す
な、イメージ#駆け出しエンジニアと繋がりたい #プログラミング初心者 pic.twitter.com/nHHxPNMCE8
変数というのは、箱のことで、この箱には文字(スキプラ)や、数字(20)などを入れることができます。
一旦ざーーっと説明して、次に実際にJavaScriptを書きながら説明しますね。
この箱は、最初【宣言=箱の用意】という形で用意しますが、中身は空の状態です。
この箱の中に文字や数字を入れるには【代入=箱に入れる】をする必要があります。
さらに、この箱に入れた文字や数字を表示するには【参照=箱から出す】します。
こう考えると、割りと簡単な気がしてきませんか？
実際箱ってどんなシーンで使われるのでしょうか？例えばTwitterを例に取ってみましょう。
今日のトレンドは【ネタバレ】らしく、60.4K(6万)もツイートされていますね。
これも実は、変数なんです。
この場合、【ネタバレ】という文字列を入れる箱と、【60.4】という数字を入れる箱が必要です。
それを使って、出し分けると、このようになります。
どうでしょうか？変数を使うと、場所によって表示を変えたい部分を、自分が設定した箱の中身を取り出して表示することができるようになるんです。
変数を使ってみる
と、言っても良く分からないと思いますので、実際に使ってみましょう。
JavaScriptは、ブラウザで動く言語ですので、今までのようにHTMLファイルを作ってブラウザ上で開けば確認できます。
まず、以下の記述をしたindex.htmlを自分のパソコンの中の好きなところに作成してください。
JavaScriptは、bodyタグの最後に書くのが慣例です。
alertというのは、ブラウザ上でアラートメッセージを表示するもので、実際に動かしてみるとどんなものか分かると思います。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数の練習</title>
</head>
<body>
<script>
alert('こんにちは');
</script>
</body>
</html>そして、これをブラウザ上で開きます。(以下のいずれかの方法で)
A. index.htmlをダブルクリック
B. index.htmlファイルをブラウザにドラック&ドロップ
このようなアラートが表示されたら無事にJavaScriptが動いてる証拠です。
では実際に変数を使ってみましょう。
上のこんにちは、だけだと無機質なので、「こんにちはスキプラさん あなたは20回目の訪問ですね！」と出してあげましょう！
<script>
const name = "スキプラ"
const visit_count = 20
alert('こんにちは' + name + 'さん あなたは' + visit_count + '回目の訪問ですね!');
</script>JavaScriptでは、文字列は【'】や【"】で囲みます。変数はそのまま使います。
これらをつなげるときは、【+】を使います。
何となく変数の使い方はわかってきたと思います。
ここで気づいたと思いますが、【宣言=箱の用意】と【代入=箱に入れる】は同時にできます。
そして、使う時(【参照=箱から出す】)は、単純に、変数名を使うだけ。
今回の例だと。例えば
alert(name)とするだけで、アラートで「スキプラ」と表示されます。
変数に使えるルールについて
変数にはルールがあります。
ルール①: 使える文字は以下だけ
英字、数字、アンダースコア（_）、ドル記号（$）
ルール②: 変数名は数字から始めちゃダメ
name1は使えるけど、1nameは使えない
ルール③: 予約語は使えない
後に紹介する予約語は使えない
でも、予約語を変数名の一部に含めるのはOK
ルール④: 大文字・小文字は区別されて、別の変数で扱われる
nameとNameでは別の変数
実際に使えない変数名を使うとどうなるのでしょうか？
実際にやってみましょう。
// 使える文字のみ利用
const name_$1 = "スキプラ" // 使える文字のみ
const name#$1 = "スキプラ" // 使えない文字(-)が含まれてるさて、どうなるか実際にディベロッパーコンソールで見てみましょう。
ディベロッパーコンソールは、以下のように見れます。
A. 開いてるページで右クリック → 「検証」をクリック
B. (Macの場合) Command + Option + Shift + i
C. (Windowsの場合) F12
実際に見てみましょう。
エラーになってるの確認できます。ちなみに、赤いエラー文字の右側に「index.html:13」と書いてますが、これはindex.htmlの13行目でエラーが出てるよ。という意味です。
予約語について
JavaScriptには、予約語といって、変数名に使うことができない名前が決まってます。
これは、JavaScriptの中で特別な意味を持つものなので、変数名として使っちゃダメですよ。というルールです。
もし、変数名でエラーが出てたら、使えない変数名をつかってないか？予約語をつかってないか？を、疑ってみてください。
break/case/catch/continue/default/delete/do
else/false/finally/for/function/if/in
instanceof/new/null/return/switch/this/throw
true/try/typeof/var/void/while/with
おまけ： varとletとconstの違いについて
JavaScriptで変数を宣言(箱を用意)する時、varとletとconstと3つあります。
良く見る入門書では、varが使われてると思いますが、実はvarはバグの温床になる危険な宣言の仕方なのです。
その違いについてみていきましょう。
ちなみに違いは3つです。
「再宣言」と「再代入」と「スコープ」の3つです。
よくわかりませんね。
再宣言: 2回以降宣言 (一回箱を用意して、次にもう一回箱を用意すること)
再代入: 2回以降宣言 (一回箱を用意して、次にもう一回箱を用意すること)
スコープ: 変数の有効な範囲
これでも難しいと思うので、実際にみてみましょう。
varを使った場合
var name = "スキプラ" // 1回目の宣言
name = "名無し" // 1回目の代入
console.log(name) // この時点でのnameを参照してみる
var name = "名無し2" // 2回目の宣言ディベロッパーツールで、「Console」をみてみましょう。
この、上のコードで、「console.log(name)」としましたが、これは、consoleのログにnameを吐き出す。という意味で、実際にはディベロッパーツールの「Console」で以下のように表示されます。
letをつかった場合
let name = "スキプラ" // 1回目の宣言
name = "名無し" // 1回目の代入
console.log(name) // この時点でのnameを参照してみる
let name = "名無し2" // 2回目の宣言先程とは違い、変数の宣言にvarじゃなくてletを使ってみました。
consoleがどうなってるかみてみましょう。
これがletに書かれた、【再代入】の禁止です。
もう一度コードをみてみましょう。
let name = "スキプラ" // 1回目の宣言
name = "名無し" // 1回目の代入
console.log(name) // この時点でのnameを参照してみる
let name = "名無し2" // 2回目の宣言1行目で、nameを宣言(箱の用意)してますが、最後の行でも、nameを再宣言(もう一回箱の用意)しており、これがNGというのがletの特徴です。
constの場合
const name = "スキプラ" // 1回目の宣言
name = "名無し" // 1回目の代入
console.log(name) // この時点でのnameを参照してみるこうすると、名無しと表示されてほしい気がしますが、どうでしょうか。
一回箱に値を入れたら、再代入はできないのがconstの特徴です。
さて、この「再宣言」「再代入」の何が問題になるんでしょうか。
問題になるケースをみてみましょう。
以下のコードをみてください。最初にnameという箱にスキプラさん。という文字列を入れてます。
これは最終的に「こんにちはスキプラさん」と表示するためにつかっています。
var name = "スキプラさん"
/* この辺りで長々と処理を書く */
console.log("こんにちは" + name)
キモになるのは、途中で入ってくる長々とした処理です。
この処理のことを忘れて、出力する前にもう一度再宣言(もう一回nameという箱を用意)したらどうなるでしょうか。
var name = "スキプラさん"
/* この辺りで長々と処理を書く */
// 前に宣言していることを忘れて再宣言してしまう
var name = "スキプラ"
console.log("こんにちは" + name)
おや、急に呼び捨てになって、あまりよろしくないですね。
これが、letやconstだとどうなるでしょうか。
let name = "スキプラさん"
/* この辺りで長々と処理を書く */
// 前に宣言していることを忘れて再宣言してしまう
let name = "スキプラ"
console.log("こんにちは" + name)再宣言に関しては、letもconstもできないので、letで宣言してみましょう。
ちゃんと怒られました。
これの何が良いのか？varを使うと、いつでもどこでも宣言し放題なので、自分で前に宣言したものを忘れてたり、他の人がうっかり上書きしちゃったりして、思わぬ結果が出てしまったりします。
(さっきのように、いきなり呼び捨てにしてしまったり)
でも、letやconstを使うことで、事前にエラーでこれに気づくことができて、バグを作るリスクを減らせるメリットがあります。
再宣言について
一度用意した箱に対して、2回目以降違う値を箱には入れれないという成約がconstにはありました。
では、varとletは同じなので、まずletでみてみましょう。
let name = "スキプラさん"
/* この辺りで長々と処理を書く */
// 前に宣言していることを忘れて再代入してしまう
name = "スキプラ"
console.log("こんにちは" + name)
普通にスキプラと呼び捨てにされちゃいました。
では、constだとどうでしょうか？
const name = "スキプラさん"
/* この辺りで長々と処理を書く */
// 前に宣言していることを忘れて再代入してしまう
name = "スキプラ"
console.log("こんにちは" + name)
エラーになって呼び捨てにされることはありませんでした。
このように、なるべく一回決めたことを後から変更できないようにすることで、思いもよらぬ上書きを防いで、バグを事前に防止することができます。
※ スコープについては関数の時に説明した方が理解しやすいと思うので次回にまわします。
最後にお願い
ぜひぜひ、今後のモチベーションのためにもお願いします！！
もしこのnoteが参考になったら....
■ 最後にたった2つのお願い
① このnoteを「スキ」してください 🙇♂️
② このnoteの感想、何でも良いので @riman_skillplus 宛にください 🙇♂️
いいなと思ったら応援しよう！
