どうも、シノだ。
新しく、正規表現講座も開始した。よかったらそちらも見てくれると嬉しい。
さて、今回はJavaScript講座だ。内容は、変数を扱おう。
変数っていうと、何をイメージされるだろうか。
多くの方は、中学にやった数式の変数だろう。xとかyとか。
実際、そんなイメージで構わない。ただ、プログラミングの変数は、その他にも文字列なども入れられる。
用意のしかたから使い方まで扱うので、是非マスターしてもらいたい。
前回の復習
前回は、そもそもJavaScriptとは何ぞやということを解説した。また、複数の表示方法も見てきた。
折角処理しても表示しないとあんまり意味ないので、表示は早めに押さえてしまおう。
変数とは
冒頭でほぼ言ってしまったが、改めて説明する。
変数とは、数字や文字列などを格納しておくための箱だと思ってもらっていい。
名前をつけた箱に入れておくことで、後でそれを取り出して使用することができる。
変数の使い方
早速、使い方を見ていこう。
変数宣言
まず、そもそも変数を用意してあげないといけない。
いきなり出てきても、パソコンからしたら「こいつ何？」となってしまうのだ。
変数を用意することを、「変数宣言」という。
書き方は以下の通りだ。
var 変数名;こう書くことで、その変数を用意してあげることができる。
変数への代入
さて、箱を用意しただけでは何もできない。
というわけで、実際に中身を入れていこう。
変数に中身を入れることを、「代入」といって、イコール一つを使う。
イコールの左に変数を書き、右に代入するものを書く。そうすると、右の内容が左に代入される。
変数名 = 代入するもの;代入するもの、と書いたが、ここには数字や文字列、あるいは変数も使うことができる。
このとき、数字や文字列の場合は直接そこにそのものを書く。
こういった、プログラム上で直接書かれる数字や文字列のことを「リテラル」と呼ぶので覚えておこう。
さて、いちいち宣言してそのあと代入するのも面倒だろう。
そこで、一度に宣言と代入を行うこともできる。
var 変数名 = 代入するもの;こうすれば、一度に両方をこなすことができる。
具体的な例
以下にサンプルソースを用意した。今回はページは用意してないので、よかったら自分で組んでみて欲しい。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>変数</title>
<script>
var a = 3;
var b = 5;
</script>
</head>
<body>
<h1>コンソールを見てね</h1>
<script>
console.log("a = " + a);
console.log("b = " + b);
</script>
</body>
</html>これを実行すると、以下のようになるはず。
左側がページとしての表示、右側が開発者ツールのコンソールだ。
このように、コンソール部分に「a = 3」と「b = 5」が表示されていればOKだ。
さて、補足説明を2つほどしていこう。
まず、ソースのconsole.log()の中身を見て欲しい。
ここでは、"a = "という文字列と、aという変数を足している。
JavaScriptでは、文字列に対して足し算をすると、両方を文字列としてくっつけてあげる働きになる。
つまり、aの中に入っている「3」が、"a = "という文字列に足されて、"a = 3"となるのだ。それが表示されている。
次に、変数宣言とそれを使っている場所。
別のscriptタグに分かれているが、問題なく使えている。
このように、タグを分けても変数は使えるので、覚えておくといい。
ちょっと発展
さて、突然だかクイズだ。
以下のように書いたとき、問題なく動くのだろうか。
もし動くと思った場合は、最終的に変数aには何が入っているだろうか。
var a = 3;
a = a + 5;少し改行を挟もう。考えてみて欲しい。
どうだろうか。
まず、動くかどうか。これは、問題なく動く。
では、何が入っているか。2行目を一個ずつ見れば簡単だ。
まず、イコールの右側。a + 5となっている。元々、1行目でaには3が入っているので、ここでは3 + 5となり、8を表す。
それが、aに代入されているので、最終的には8が入っていることになる。
このように、左辺に書いた変数を右辺にも書ける。ただ、これには省略形が用意されている。
変数名 += 足すもの;こう書けば、変数に、右辺を足したものがそのまま変数に入ってくれる。
これは足し算だけでなく、引き算、掛け算、割り算でも可能だ。
最後にオマケでもう一つ。変数に入っているものが数字で、1増やしたいとする。
このとき、特殊な書き方が用意されていて、これを「インクリメント」と呼ぶ。
変数名++;これだけで、変数の数字を1増やすことができる。なお、1減らす「デクリメント」もあり、これは+を-にするだけだ。
まとめ
いかがだっただろうか。ざっと、変数の使い方を解説してみた。
この変数は、ほぼ常に使うと思っていてくれて構わない。そのくらい頻出するものだ。
宣言のあたりなんかは、使っていれば勝手に覚える。色々書いてみよう。
さて、次回は条件分岐をやろうかと思う。いよいよ、プログラミングらしくなってきた。
更新情報はTwitterでも垂れ流している。画面下部のTwitterアイコンから私のプロフィールへ飛べるので、よかったらフォローしてほしい。
それでは。
コメント
[…] 前回は、変数というものを扱った。値を入れておいて、別の場所で使えるものだ。 […]