【高校情報Ⅰ】JavaScriptプログラミング 超入門講座 第５話 「変数」って何？
◆◆はじめに◆◆
高等学校情報Ⅰに完全準拠させた、JavaScript入門講座の５回目です。
今回は「変数」についてですが、別動画で出している、Python超入門講座の精度に合わせて作成しています。
教員研修用教材には、JavaScriptの基礎の解説がほとんど無いので、教員の方にも参考にして頂けると幸いです。
◆◆動画解説◆◆
◆◆文字おこし◆◆
前回はJavaScriptの、文字列表示、簡単な四則演算したから
今回は変数について学んでいこう。
変数って変な数のこと？
言葉からではわかりにくいから、
先に具体的なプログラミングを見ていこう。
問題！このプログラムを実行すると何が表示されると思う
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name = "ミライ";
document.write(name);
</script>
</body>
</html>
nameという文字列が表示されるかな
じゃあ実行してみよう。
ミライって表示されたね。 残念nameと表示されるのは不正解残念
う～ん、何でミライの文字が表示されるのかがイマイチ分からないんだけど。
これはね、変数っていうのを使っているんだ。
変数は数字や文字を入れる箱みたいなものなんだ。
今回のプログラムと照らし合わせながら見ていこう
varの後にあるname っというのが変数の名前で変数名なんだ。
前にあるvarはその後に続く文字が変数であることを宣言している。
nameという箱があって、その中にミライという文字列を入れているイメージなんだ。
この箱に値を入れる行為を代入というんだ。
そしてdocument.writeの中にあるnameで、箱の中身を表示させているんだ。
変数宣言とdocumen.writeのnameがお互いに関係していることを確かめるために変数宣言部分を無効化していこう
一番初めに 半角スラッシュを２つを入れてみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
//var name = "ミライ";
document.write(name);
</script>
</body>
</html>これはコメントアウトという行為なんだ。
スラッシュ以降にある文字はプログラム実行時は無視される。
プログラムを無効化するときにも使うけど
こんな感じで、この行は何をしているかを日本語などプログラム知識が無い人向けに説明がきを入れるためにも使われるんだ。
複数行纏めてコメントアウトしたい場合は
開始を/* 終了を*/で囲んであげる
実際、システム開発現場では一人ではなく大人数でプログラミングすることが多く、作った人が退職や他の現場に行くとかして、途中でいなくなることが多々ある。
このコメントがあるとそのプログラムが何を処理しているかが分かって、プログラム自体の解析もしやすくなるんだ。
なるほど！自分以外の人の為にもコメントは残しておくようにするよ。
あと、自分自身の為にもなるんだ、処理が複雑になるほど
プログラム自体複雑になる。
一度作り上げて、数か月間放置していると、浦島太郎状態で、
その処理が何をやっているのかが自分自身分からなくなることがある。
コメントをちゃんと残すのは自分自身の為でもあるんだ。
じゃあ、変数宣言をコメントアウトしたプログラムを実行してみよう。
何もでないよね
これは、nameという変数がどこにも定義されていないから、表示できませんという意味なんだ。
仮に変数ではなく、nameという文字列として扱い場合は、nameを
ダブルクォーテーションで囲むとnameという文字列が表示される。
これは前回やった内容だね。
今回は、nameという変数名を付けたけど、この名前にも決まりがあるんだ。
使える文字は、半角の英数字とアンダースコアとドルマークだけ
一応日本語文字列も使えるけど、非推奨
name_1 の様に組み合わせることも可能。
ただ、数字が先頭にくるものや、数字単独ではエラーになるんだ。
ちょっと試してみよう
変数名を1nameと打ちかえるね。これを実行してみよう。
エラーになったね。
他には、小文字と大文字はべつの変数名として扱われるんだ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name = "ミライ";
var NAME = "がっきー";
document.write(name);
document.write(NAME);
</script>
</body>
</html>
大文字のNAMEを定義してじっこうしてみよう。
大文字のNAMEには がっきー といれるね
実行してみよう。
あっ！ちゃんと別々の表示がされたね。
あと、英数文字でも変数として使えない文字列もある
例えば and False True などプログラム自体で用いられるものが該当するんだけど
これを予約語というんだ。
こんなにあったら覚えられないよ。
予約語を使うと、プログラム中で予約語ですとエラーになるから覚える必要はないよ。
ためしにtrueという変数名でやってみよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var true = "ミライ";
document.write(true);
</script>
</body>
</html>
ちゃんとエラーになったね。
さっきは、nameに ミライという文字列を使ったけど、今度は数字を扱っていこう。
priceという変数を用意してその中に 100を代入する。
数字の場合は、ダブルクォーテーションは不要だよ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
//変数priceに100を代入
//変数taxに0.1を代入して消費税を表示
price = 100;
tax = 0.1;
document.write(price * tax);
</script>
</body>
</html>そして、taxという変数を用意してその中に0.１を入れてみよう。
消費税を求めるには price×tax だから
document.writeの中にprice アスタリスク tax といれて、保存してプログラムを実行してみよう。
１０って消費税がちゃんと表示されたね。
じゃあ、変数を使った文字列の結合もしていこう
name1に ミライ
name2に がっきー
name3に やまだ
って代入しよう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name1 = "ミライ";
var name2 = "がっきー";
var name3 = "山田";
document.write(name1, name2, name3);
</script>
</body>
</html>document.write に それぞれの変数をカンマで区切って入れて実行してみよう。
document.writeに入れる前に文字列を結合する方法もあるんだ。
足し算で使った ＋ を使うんだ
name1 + name2 + name3 を
zenbuという変数に入れてみよう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>MyPage</title>
</head>
<body>
<script>
var name1 = "ミライ";
var name2 = "がっきー";
var name3 = "山田";
var zenbu = name1 + "<br>" + name2 + "<br>" + name3;
document.write(zenbu);
</script>
</body>
</html>zenbu = name1 + name2 + name3
document.write(zenbu)
ちゃんと結合されたね。
とちゅうで改行入れたい場合は<br>タグを途中に入れよう
変数ではなく文字列だからダブルクォーテーションまたはシングルコーテーションで囲むことを忘れないように
今日はここまで、次回は繰り返し構文のfor文について説明するね。