【プログラミング入門】【JavaScript】4日目 変数とは？

ホームページにアニメーションなどの動きをつける時に使われるJavaScript(ジャバスクリプト)というプログラミング言語を使って初心者・入門者向けにプログラミングのキホンを解説していきます！

難しい設定などはほとんどなく手軽に本格的なプログラミングを学ぶ事ができます。

簡単なホームページの作り方も解説しますのでホームページ作りに興味がある方もぜひご覧ください。

プログラムの中で変化する数(ゲームで言うなら主人公の体力とか、残り時間とか、敵の居場所とかとにかく変化する数はなんでもです！)を使う時は「変数(へんすう)」という入れ物を用意してそこで管理します。

使う時はわかりやすいように名前をつけます！プログラムを書く時と同じでキホンは半角でアルファベットで小文字です。

おにぎりだったら「onigiri」みたいに、自分が使いやすい名前で大丈夫です。JavaScriptの命令と同じはダメです！

■こんなのが大丈夫です■

・○一文字だけ・・・a b c d e

・○番号をつける・・・a1 a2 a3 a4 a5

・○日本語のローマ字・・・ringo mikan enpitu

・○途中にアンダーバー・・・no_1 no_2

■こんなのがダメです■

・×数字だけ・・・1 2 3 4 5 6

・×数字が頭・・・1a 2a 3a 4a

・×日本語・・・りんご　みかん　えんぴつ

・×最初にアンダーバー・・・_no1 _no2

今回は「変数を用意して適当な値を入れて表示する」というトコロまでやってみます。

■4日目　プログラム１■

<script>

	/*jspgm4_1*/
	/*4日目　プログラム１*/

	var suji;

	suji = 100;

	alert("らっしゃい！\n今なら桃一個" + suji + "円だよ");

</script>

■実行結果■

■説明■

プログラムの中の「var suji」に注目してください。

変数を使う時は、この「var」(バー)を最初につけます。そして変数名をつけます。今回は「suji」が変数の名前です。

「変数「suji」を今から使います！」というのをコンピューターに伝えるワケです！

この事を「変数を宣言する」っていいます。変数を使う時は必ずその変数を使う前に行います！

プログラムの最初の部分にまとめて書いておくのが良いと思います。

■初期化(しょきか)■

変数を宣言した後に必ず何かしらの値を変数に入れてあげるのがきまりになってます。これを初期化するっていいます。

suji = 100;

ここで初期化してます。もし入れる値が決まってない時は「suji = 0」のように「0」でも入れておきましょう！

■変数の内容を表示■

ただ変数の内容を表示したい時は

alert(suji);

これだけで大丈夫です。

「"」ではさまないトコロに注意です。

■メッセージと一緒に表示■

他のメッセージと一緒に表示したい時は

alert("らっしゃい！\n今なら桃一個" + suji + "円だよ");

メッセージ部分は「"」で囲って、変数部分は「+」で結びます。

変数の中に文字や文章を入れる事もできます。

今は何に使うか想像しづらいかもしれませんが、大きいプログラムの中で文章なんかが色々な場所に散らばっていると、とてもわかりづらいので変数としてまとめておく事が多いです。

■4日目　プログラム２■

<script>

	/*jspgm4_2*/
	/*4日目　プログラム２*/

	var bunsyou;

	bunsyou = "おはようございます。";

	alert(bunsyou + "\n今日はいい天気ですね！");

</script>

■実行結果■

■説明■

使い方は数字の時とほとんど変わりありませんが、文字や文章を入れる時は「"」で囲みます。

javascriptでは「var」だけですべての変数を表すので意識する事がありませんが、変数には「型」というものがあります。

「数値型」

var suji = 100;

「文字列型」

var bunsyou = "あいうえお";

みたいな感じです。

他にも種類がありますが、ここでは簡単にこれだけ紹介します。

ここで注意点ですが

var suji = 15624;

これはもちろん「数値型」になりますが、これを「"」でかこむと・・・、

var suji = "15624";

「文字列型」として扱われます。

計算などをする時はこの違いには少し注意が必要なので頭のかたすみにでも入れておいてください。

実はコンピューターが表せる数には限界があります。

あまりに大きい数や小さい数は正常に表示できなくなります。

計算機もあまりに大きい数なんかを計算させようとするとエラーになって固まってしまいますよね、あんな感じです。

■4日目　プログラム３■

<script>

	/*jspgm4_3*/
	/*4日目　プログラム３*/

	var suji;

	suji = 7657646654684875486748764845636434535376548899;

	alert("sujiの内容\n" + suji);

	alert("正確に扱える最大値\n" + Number.MAX_SAFE_INTEGER);
	alert("正確に扱える最小値\n" + Number.MIN_SAFE_INTEGER);

</script>

■実行結果■

■説明■

長い話になるので細かい説明は省きますが、ここでは整数、小数問わずあまりに大きい桁数の計算などはできないとだけ覚えておいてください。

■4日目　プログラム４■

<script>

	/*jspgm4_4*/
	/*4日目　プログラム４*/

	var suji1;
	var suji2;

	suji1 = 100;
	suji2 = 150;

	alert("\nみかん１個\n" + suji1 + "円だよ！");
	alert("\nりんご１個\n" + suji2 + "円だよ！");

</script>

■実行結果■

■説明■

もちろん２つ以上の変数も使う事ができます。

■4日目　プログラム５■

<script>

	/*jspgm4_5*/
	/*4日目　プログラム５*/

	var suji1 = 100;
	var suji2 = 150;

	alert("\nみかん１個\n" + suji1 + "円だよ！");
	alert("\nりんご１個\n" + suji2 + "円だよ！");

</script>

■実行結果■

■説明■

いちいち分けて書かないで

var suji1 = 100;
var suji2 = 150;

宣言と初期化を一緒にする事ができます。

他にも

var suji1,suji2,suji3;

のように「,」で分けて書いたり

var suji1 = 100,suji2 = 200,suji3 = 300;

初期化も「,」で分けて一気に書く事もできます。

■4日目　プログラム６■

<script>

	/*jspgm4_6*/
	/*4日目　プログラム６*/

	var bunsyou = "テストの点数は";
	var suji1 = 100;

	alert(bunsyou + suji1 + "点でした。");

</script>

■実行結果■

■説明■

変数同志をつなげる事もできます。

それではなんとなく変数の事が分かったトコロで次回は簡単な計算をやっていきたいと思います。

5日目 計算のやり方(四則演算)