変数は難しい？

さて、このシリーズも第三回までやってきました。そしてついに出てきました。変数です。

変数、なんか数学っぽいですね〜。
「小学校の算数で挫折したって言ってるだろっ！脳みそついてんのかー！」と怒られそうですが、やはり変数は避けては通れない。すみません。いや、私のせいじゃないですが。

そんな難しい物でも無いんですが、難しそうに見えるのにも理由はあります。

普段の生活であまり聞かない（ので馴染みが無い）
変数を使っても別段何も新しく出来るようにならないので、盛り上がらない（楽しくない）

さて、ここでは変数の話に入る前に、上に挙げた二つの変数の難しさについて、軽くポエムを書いてみたいと思います。

変数は、普段の生活であまり聞かない

変数という言葉は普段の生活では、あまり出てきません。
たとえば、女子高生がマクドで「今日考えた変数、超イケてるじゃん？」とか言う話は、あまりしてない気がする。

わみたゃんとかが突然「私、変数大好き」とか言い始めたら相当ビビる。いや、ビビらないか？うーん、どうだろう。
「レモン倶楽部で変数の話するからみんな来い！」とか言ってたら、なんか意識高い勉強会みたいになっちゃう。

とにかく、日常生活であまり出てこない考え方というのは、やっぱり慣れるまでにちょっと練習が必要です。実際には大した事無くても。

世の中のプログラムの入門サイトとかは、数学とかで慣れている人向けの説明な事が多いので、算数とか分からない系男子にはちょっと説明が早い、と感じる事はあるかもしれません。

ただ、さいわいな事に、変数は結構簡単です。ゆっくりやればどうって事無いと思います。一見難しそう仲間として後に出てくる「関数」は、残念な事に実際にも結構難しいのですが、変数はぶっちゃけチョロい。

変数を使っても、新しい事は出来ない（からつまんない）

変数は、ループや関数まで行くといろいろ使いみちも出てくるのですが、この第三回の時点では何も新しく出来るようになりません。例もこれまで見たのと大差無いし、コードを書いていても面白くない。

だから、世の中の入門ページでは、変数の所は軽くざざっと終わらせて次に進みがちです。
でもそれが、必要以上に難しい感じをかもし出してしまっています。

そこでこのシリーズでは、あえて一回まるまるかけて、変数だけを扱う事にしました。こうする方がわかりやすいとは思いますが、その分退屈な回になると思います。退屈なのは頑張って気合で乗り切ってください！

変数ってなんなのさ

さて、ポエムはこの位にして、本題の変数についての話をしていきましょう。変数は、先程もいった通りあまり日常生活では出てきません。

そこでこの第三回では、幾つかのバラバラに見える特徴を幾つか説明して、それらを通して「変数ってこんな感じの物か〜」とふんわりと分かって欲しいと思います。

例えるなら、

朝にしか居ない事が多い
よく、「いくよ！いくよ！」って言っている
白くて丸っこくてなんか頭に!!がついている
最近はブレンダー修行中
お雑煮に入れて食べると美味しい

という説明をしていく事で、「ああ、あじゃってそういう物なのね」と分かってもらう感じです。

具体的には、変数を

名前をつけること
引っ越しの時に食器や服を入れる為のダンボール箱

という話を通して説明していきます。

変数とは、名前をつける事である

変数とは名前をつける機能です。実際に見てみましょう。

var message = "自意識チェックをしろ！";

このようなコードで、「自意識チェックをしろ！」という文字に、messageという名前をつける事が出来ます。 messageというのは英語でメッセージの事。
先頭にあるvarというのは変数を作る目印です。最初にこれをつけると、その次の単語がこれからつける名前となります。

で、イコール、つまり=を間に挟んで、右側に名前をつけたい対象を置きます。イコールの意味が普通の算数とはちょっと違うので注意が必要です。

なんだが言葉にするとややこしいですね。こういう時はいつものように、いくつも似たような物を見るのです。

「そば充した。」という文字に、lucyという名前をつけるなら、こうなります。

var lucy = "そば充した。";

「おつ鍵」という文字にtakamiという名前をつけてみると、こうです。

var takami = "おつ鍵";

こんな風に、var なんちゃら = うんちゃら ;と書くと名前が付けられます。

名前は、文字以外にもつける事が出来ます。たとえば数字につけてみましょう。「答え」という事でkotaeという名前をつけると、以下のようになります。

var kotae = 13-7;

こうするとkotaeには、13-7で6が入ります。

このように、 varの後にスペースをあけて名前を書き、その後=を挟んで名前をつけたい物を置くと、名前をつける事が出来ます。

この名前が変数です。

つけた名前を使おう

一度名前をつけると、以後プログラム上ではその名前を文字の代わりと出来ます。例を見てみましょう。

まず名前をつけます。

var message = "自意識チェックをしろ！";

次に以下のようにすると、

MessageBox.show(message);

以下のように書いたのと同じ意味になります。

MessageBox.show("自意識チェックをしろ！");

実際にやってみましょう。

結果:

　
実行してみると、直接 MessageBox.show("自意識チェックをしろ！"); と書くのと、同じ結果になりましたね。

このように、名前をつける、というのが変数の一番重要な役割となります。なんで名前なんてつけるのか、というのはループと関数あたりまで進めば分かるので、今は気にしないでください。

変数の名前の決まり

つけられる名前はローマ字で始まって数字とローマ字とアンダーバーが混ざった物くらいです。大文字でも小文字でもOKです。

例えば

lucy, lucy123, shiroXmoko, Second_Lifeなどは全て変数名として使えます。

使えない物としては、123lucyなどのように数字で始まるものや、Second Lifeなどのように空白がある物などは駄目です。 lucy123はOKだけど123lucyが駄目なのは罠っぽいですね。

さて、名前は好きな物をつけて良いのですが、プラグインなどではaとかbとかnとかmとxとかyとかの、短いものが多い気がします。分かりにくいですね。
また、messageはmsgなどと短くされがちです。

この辺は書いている人の趣味なので、なんでも良いのです。

変数は、ファイル名やタグにも似ている
日常生活ではあまりお目にかかれない変数ですが、パソコンを使っていると似た物を見る事があります。
　
まず、ファイル名と変数は凄く似ています。
例えば「ゲームのストーリーのネタ帳.txt」というファイルを作って、その中にいろいろネタを書きこんだとします。
この時、このファイル名を変えたとしても、ファイルの中身は全然影響を受けないですよね？
例えば右クリックして「名前の変更」で、「小説のネタ帳.txt」にファイル名を変えても、中身は同じままです。
これは非常に変数っぽい。
　
これはたぶん皆さんが思うよりももっと似ています。その証拠となる例を挙げると、例えばRやPythonなどでは、変数を見る為のコマンドはファイルを見るコマンドとそっくりにしていたりします。概念的に凄く似ているんですね。
　
ただ、ファイル名は一つのファイルに一つしかつけられい所がちょっと変数とは違います（厳密にはWindowsは一つのファイルに複数の名前を付ける事が出来るのですが、普通のやり方では出来ません）。
どちらかというと、iTunesなどの音楽プレーヤーやニコニコ動画などで使える「タグ」の方がもっと似ています。
一つの動画に複数のタグつけられますよね。
あの、タグをつける、というのは、ほとんど変数を作っているのと変わりありません。
　
変数とかなんだか良く分からないな、と思ったら、タグをつけてる、と思ってみると良いかもしれませんね。

変数は、物を入れる箱である

さて、ここまで、名前をつける、という事を見てきました。この名前をつける、という部分だけで、変数の70%くらいの説明は終わりです。 70%、だいたい終わりですね。

ですが、まだ30%残ってます。この30%の説明として、次に「入れ物の箱」という見方を見ていきます。

変数は、引っ越しの時のダンボール箱みたいな物である

変数というのは、引っ越しの時のダンボール箱みたいな物です。引っ越し、した事ありますか？

引っ越しの時は、中には食器を入れたり、服を入れたり、本を入れたりします。で、箱にマジックで「服」とか「食器」とか「割れ物」とか「本」とか書きます。変数と、このダンボール箱に物を詰めてマジックで名前を書く、というのは、凄く似ています。

さて、具体的にコードを見ていきましょう。

変数は、名前をつけるだけじゃなくて、同じ箱に別の物をあとから入れる事が出来るのです。例えばこんなコードになります。

結果:

　
実行してみると、「2つ目のメッセージ」しか表示されず、1つ目のメッセージはどこかに行ってしまいました。

何が起こっているのでしょうか？
上のコードを、ちょっとずつ分割して見ていきましょう。

イコールは、右の文字を左の箱に入れる、という意味

まず最初はこの二行でした。

// messageという箱を作って、「一つ目のメッセージ」という文字を入れる
var message = "1つ目のメッセージ";

//で始まる行はコメントでした。覚えていますか？コメントは何も意味が無い、という事で、この行は気にしないで良い。

次の行はvar message = "1つ目のメッセージ";となっていますね。これは前半で説明した、名前をつける、という奴と同じコードです。「1つ目のメッセージ」という字に、messageという名前がつきます。

違うのは次の行です。

// 上で作った箱に、「2つ目のメッセージ」を入れる。
message = "2つ目のメッセージ";

注目して欲しいのは、messageの前にvarがついていません。これが今回の新しい所です。

これまでも何度かvarというのが登場してきました。
このvarは、実はダンボール箱を作る、という意味なのです。

だから

var message = "1つ目のメッセージ";

だと、messageという箱が作られ、一方varが無い以下のコード

message = "2つ目のメッセージ";

だと、箱は作られず、既にある箱が使われます。

そしてイコール、つまり=は、右にある物を左に入れる、という意味になっています。だから、以下のコード、

message = "2つ目のメッセージ";

というのは、"2つ目のメッセージ"を左の箱に入れる、という意味になります。

箱に入れるというコードの図解

大切な事なのでもう一度言っておきます。

イコールは、右にある物を左の箱に入れる、という意味

これです。
なお、箱にはいつも、一つしか物をいれる事は出来ません。二つ目の物を入れると、1つ目の物は押し出されちゃう。小さい箱なんですね。

ここまでで変数の

名前をつける
物を入れる箱

という2つの側面を説明したので、変数についての説明は全て終わった事になります。これで全部なのですが、最後にvarについて、箱という見方を踏まえてもう少し解説しておきます。

JavaScriptの=は、普通のイコールと意味が違う
イコールというのは算数などでは普通、左と右が同じ、という意味なのですが、プログラム言語ではなぜか右の物を左に入れる、という意味になっています。
算数なんて挫折したって言ってんだろ〜〜！という人にはあまり気にしなくて良い話題かもしれませんが、プログラムを知らない人が、例えば
　
a = a+1;
　
みたいなコードを見ると、意味が分からない。イコールじゃないやん、と。でもこれは、右の奴を左の箱に代入する、という意味なので、「aに1を足したものを、aという箱に入れる」という意味になります。
　
なお、箱に入れる事を専門用語で「代入」といいます。意味も無く難しそうな言葉なのでこのシリーズでは使わないつもりですが、無意識に使ってしまってたらすみません。
　
JavaScript以外でも、イコールがこの「箱に入れる」という意味の言語は結構多くて、C言語とかJava言語とかC#とか、RubyとかPythonはだいたいイコールで箱に入れます。
　
ただ、別に全部の言語がそうという訳ではありません。Rでは<-で箱に入れますし、Delphiなどは:=です。
<-は分かりやすいですね。
こうしてみると、やっぱり=を全然違う意味で使うのは分かりにくい、と思っている人は結構居るんですね。
ただこれらの言語は少数派なのが現状です。やっぱり「二文字タイプするのがめんどくさい」という事なんでしょうか。箱に入れる、はプログラムでは凄くたくさん使う事なので。
　
余談になりますが、普通の算数の意味でのイコールは何故か==とイコールを2つ重ねた物を使う決まりになっています。なんでやねん。

varは箱を作る、という意味

さて、最初にvarという物をつけると、その行は名前をつける、という意味になる、といいました。ですがイコールの意味を説明した今、もうちょっと詳しくこの事を説明出来ます。

varというのは、「箱を作る」という意味なのです。ですから、以下の名前をつける、と言っていたコード、

var msg = "なんちゃら〜";

というのは、実は2つの事を一気にやっているのです。

var msgで箱を作る
1で作った箱になんちゃら〜という文字を入れる

この2つの事を一気にやるのが、　

var msg = "なんちゃら〜";

なのです。実はこれ、一気にやらずに一つずつやる事も出来ます。コードにするとこんな感じです。

// 箱を作って
var msg;

// 箱に入れる
msg = "なんちゃら〜";

一つずつ見ていきましょう。
まず、以下のようにするとmsgという箱が出来る

var msg;

図にするとこんな感じ

箱を作る

そして、この箱になんちゃら〜を入れる。箱に入れるのは=でした。

msg = "なんちゃら〜";

こんな感じ。図にするとこう。

箱に入れる

こうして、varで箱を作って、=でその箱に入れる、という事を一気にやると、「名前をつける」と言っていたコードになります。

存在しない箱に入れると何が起こるのか？
varをつけずに、唐突に存在しない箱に入れる、つまり、突然msg = "なんちゃら〜";と、varをつけないでやると、何が起こるでしょうか？
　
普通のプログラム言語では、存在しない箱に入れようとすると、「そんな箱無い！」とエラーになります。
ですがJavaScriptはここは凄い変な振る舞いをする変態言語さんなので、変な事が起こります。
存在しない箱に入れようとすると、「グローバル」というなんだか難しい特別な所に箱を作って、そこに入れる、という意味だと解釈されるのです。
　
これはJavaScriptの有名な落とし穴で、varをつけ忘れた為に変なバグになってしまうと、間違え探しみたいな事を必死にやらないといけない事になります。
JavaScriptに似た言語ではこのヘンテコな振る舞いは変更されている事もあります。　
「グローバル」な変数については、本シリーズではあまり扱わない予定ですが、最後の方でプラグインとか作る時に必要な程度、ちょこっと触れます。

変数を使って計算しよう

変数の説明としてはここまでで全て終わっているのですが、ループの準備として、計算する例も少しやっておきたいと思います。特に、以下のようなコードについて、少し補足したい。

a = a+1;

これがどういう意味なのかを、段階を追って説明していきます。

まずはこんなコードがあったとします。

結果:

　
結果は5+7で12が実行されると思います。これはほぼ第一回の内容と同じですね。

では、このb+7の結果を、aという箱に入れてみましょう。こんなコードになります。

結果:

　
少し長くなってきましたが、a = b+7;以外の所は説明は要らないでしょう。
b+7は一つ前の例で見たように12となります。だからこのコードはa=12と同じ意味となります。

さて、では上のコードをふまえて。
以下のコードを実行すると、aは幾つになるでしょうか？

// aという箱に5を入れる
var a = 5;

// この結果はどうなる？
a = a+7;

a = a+7;というのはまたヘンテコな式ですね。ですが、順番に考えてみると別段むずかしくはありません。

まず=の右側が計算されます。右側はa+7で、aには5が入っています。だから12ですね。上のb+7と全く同じです。
そして、この計算した結果を=の左の箱に入れる訳です。左の箱はaですね。

すると最終的にaには何が入るでしょうか？実際に実行してみましょう。

結果:

　
はい、12となりました。つまりa=a+7は、まず=の右側を計算して、その結果を左の箱に入れる、という意味になるのです。右側はa+7ですね。この計算した結果をaに入れる訳です。

少し練習してみましょう。

課題: aに3を足した物をaに入れよ

課題の文は少しややこしいですね。頑張って読み解いてください。

結果:

答え:
// ここに一行足して、aに3を足した結果をaに入れてください。
a = a+3;

　
いかがでしたでしょうか？出来ましたか？

第三回まとめ

さて、変数、いかがでしたでしょうか？難しかったですか？
個人的には名前の難しそうな雰囲気に比べると、実は大した事無い情けない奴だと思っているのですが。

変数というのは、

名前をつけるもの
箱みたいなもの

である、という事でした。

そして、

varで箱を作る
=で箱に入れる

という物です。

これだけ分かっていれば入門レベルとしては十分すぎるくらい良く分かっていると思います。

この第三回までで、このシリーズの序盤が終わりです

さて、この第三回の変数までやると、このシリーズの序盤が終わった事になります。個人的にはここまでが、プログラムをやる上で一番難しい所、と思っています。

逆にここまで来れたなら、中盤は楽しくあっさり終えられるんじゃないでしょうか。

ここから先はif文や配列など、よりプログラムっぽい話題に移っていきますが、ラスボスの関数以外は難しい所はもう無いと思います。まだ大したことはやってない、と思うかもしれませんが、実は凄く難しい事がいっぱい詰まっていたのです（本当です！）。

という事でもしここまでちゃんと進められたなら、おめでとうございます！あなたは、プログラムの一番大変な所は乗り越えられました！

もしここまで辿り着けなかったら…私の力不足だったという事ですねぇ(´・ω・｀)
ここまで辿り着けるとｲｲﾅ！