Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

  1. トップページ
  2. JavaScript入門編 - 変数を使ってみよう(2)

変数を使ってみよう(2)

( ´)Д(`) .。oO(菓子パンはコンビニなどでの商品配置位置から惣菜パンっぽい扱いになっており……)
( ´)Д(`) .。oO(食事を菓子パンで済ます方も多いと思うが…...)
( ´)Д(`) .。oO(あれは間違いなくお菓子やデザートと呼ばれる部類に該当するはずである…...)

というわけでみなさまどうも。続きまして変数についてもういっちょ理解を深めていきましょう。

前回の記事では『変数宣言』までやりましたね。変数宣言のみ、ということは変数を宣言しただけで特に何も使っていません。

これだけでは全くさっぱり意味がないのでこの変数に色々なものを『代入』してみましょう。『代入』とは要するに『入れる』ってことです。変数には色々なものを入れることができます。この『代入できる』というのが変数の便利なところの一つです。

では代入処理を書いてみましょう。

変数に何かを代入させるときに使用する記号は『=』(イコール)です。

「あれ?ぼくわたしの知っているイコールじゃないやん」と思った方いらっしゃるかと思います。

数学的な経験から『=』という記号について「左辺と右辺が等しい」という意味だと思ってしまう方が多いかと思いますが、プログラミングの世界での『=』は代入を意味します。しかもややこしいことに右辺から左辺への代入になります。左辺から右辺ではありませんのでこちらも要注意です。

では先程の記事で作成したJavaScriptソースを持ってきます。これですね。

var x;

『x』という変数を作成したのでした。この『x』に適当に代入してみましょう。数字の『1』を入れてみます。

var x;
x = 1;

右辺から左辺への代入なので、これで『x』という変数に『1』という数値が入りました。コンソールログ関数でチェックしてみましょう。コンソールログ関数の『()』の中に『x』と記述してください。そうすれば『x』の値がちゃんと展開して出力されます。

var x;
x = 1;

console.log(x);

注意点ですが『console.log("x")』のように変数を『"』や『'』で囲ってはダメです。

ちょっと前の記事で『"』や『'』で囲むと文字列としての扱いになってしまうというお話がありましたね、なので『"』や『'』で囲ってしまってはそのまま文字列としての『x』がコンソールに表示されてしまいます。変数『x』として処理させたい場合は『"』や『'』で囲まずにそのまま記述するようにしてください。

さてこれを実行させてみると

このように中身の『1』が表示されました。ちゃんと変数として処理されていますね。みなさんもバッチリ動かせましたでしょうか。

ちなみに変数に数値が代入されていた場合は足し算したり引き算したりとそのまま演算することもできます。

var x;
x = 1;

console.log(x + 2); 

これはちゃんと『3』と表示されます。なかなか便利ですね。

変数に代入された中身のことを一般に『』と呼びます。よく使用されるので覚えておきましょう。

では続きまして前にもやった『Hello world』プログラムを変数を使って作ってみます。

これはもう簡単ですね。変数『x』に『Hello world』という文字列を突っ込めばOKです。『"』か『'』で囲む事を忘れないようにしてください。こんな感じになります。

var x;
x = "Hello world";

console.log(x);

変数を使用する一連の流れは上記のような感じになりますね。ちょっと慣れないと大変かもしれませんが頑張っていきましょう。

あと変数宣言と代入を一文で記述してもOKです。こんな感じですね。

var x = "Hello world";

console.log(x); 

この形も覚えておきましょう。ちなみに複数の変数宣言と代入式を同時に記述することができます。『,』で区切ればOKです。最後だけ『;』にするのを忘れないようにしましょう。

var x = "Hello world", y, z = 0;

これは変数『x』を宣言しつつ「Hello world」を代入し、変数『y』を宣言し、さらに変数『z』を宣言しつつ『0』を代入しています。ちょっとややこしいですがよく使われる記述ですので覚えておきましょう。

他のプログラム言語では変数宣言の際に型というのものを指定する必要があったりします。数値を代入する変数と文字列を代入する変数などでは宣言方法に違いがあります。

以下はC言語での変数宣言の例になります。同じ変数宣言文でも『char』『int』『double』と記述に違いがありますね。

#include <stdio.h>
main(){
    char x;
    int y;
    double z;
}

しかしJavaScriptでの変数は内部的に自動判別され適宜に処理をしてくれるので型を意識せず全て『var』を使って宣言してしまってOKです。

変数宣言と同時にその変数に任意の値を代入することを『初期化』といいます。変数宣言を行ったあとに別の文で代入することは初期化と呼びません。

// これは初期化です
var x = "Hello world";

// これは初期化ではなくただの代入です。
var y;
y = 1;

JavaScript以外の他の言語では変数宣言の際に変数の型を設定する必要があったり、ローカル変数のみ初期値が自動設定されなかったりとちょっとややこしいので、予期しないバグを予防するために変数を宣言する際には必ず初期値を設定して初期化しましょう、という解説があったりします。
※ローカル変数については先の記事で解説します。

この『初期化』という言葉の使い方が参考書や解説サイトによって違っている事が多く、初心者の方がこんがらがってしまうという実情がありますが、要するに最初の値をとりあえず代入しているというだけの話ですので複雑に考えず「初期値を代入しておくのがマナーなんだな (キリッ」という程度の認識でそのまま勉強を進めてしまったほうが無難です。

先ほど解説したとおり、JavaScriptでは型の設定は必要ないので初期化についても特に意識する必要はありません。

変数宣言されたあと何も代入されていない変数には『undefined』(あんでぃふぁいんど)という値が入ります。これは『未定義値』の事で、要するに「中身が何も定義されてませんよー」という値です。

ちょっと難しいのですが『undefined』とはグローバル変数と呼ばれるどこからでも参照できる変数の一種で、その中身はこれまた『undefined』というプリミティブ値(プログラミング言語の根本部分で定義されている最も基本的な要素)が入っています。

undefinedという値の細かい解説はちょっと難しいので今は解説しませんが、後ほどいっぱい出てきますので「変数に何も代入しなければundefinedという値が入っている」という事だけ覚えておきましょう。

※詳しくはこちらへ。

あとちょっと注意点ですが、ソースに書かれたプログラム処理は基本的に上から順番に実行されていきますので同じ変数名に代入処理とかすると下に書いてある方の処理が優先されます。
※JavaScriptでは特定の場合に処理の巻き上げが行われる場合があります。詳しくは先の記事で解説します。

var x = "Hello world";
var x = "Hello world 2"; // ここで上書きされる

console.log(x); // これは"Hello world 2"と出力される

注意するようにしましょう。

さて、では変数のちょっと応用技です。これコンソールになんて出力されるかわかりますでしょうか?

var x = 1;
x = x + 1;

console.log(x);

ちょっと難しいかもしれませんが先に正解を言っちゃうと『2』になります。

問題はここですね。

x = x + 1;

「なんだこれは!?(; ・`д・´) 」と、なる方も結構多いです。これは数学とは違ったプログラミングならではのちょっとトリッキーな演算方法になります。

これを解説していくとまず

var x = 1;

で『x』に『1』が代入されますね。

そして問題の箇所になりますが、

x = x + 1;

先程解説した通りプログラミングの世界では右辺から左辺へと処理が進んでいきますので右辺から考えていきましょう。

まず右辺の『x + 1』の時点での『x』には『1』が代入されています。んでもって『x + 1』というわけですのでこの演算結果は『1 + 1』で『2』になりますね。

ってことはこうなります。

x = 2;

というわけで答えは『2』です。自分自身を計算に使い、その計算結果をさらに自分自身に代入させる、という感じです。

自分自身に代入ってところに引っかかっちゃう人多いです。

慣れればサラリと読めるようになりますので引っかかっちゃった人は色々自分でプログラムを書いてみたりしてバッチリ練習するようにしてくださいね。

さてこの辺で一旦記事を切りますね。

今まで記述してきた内容ではまだ変数を使用することのメリットがあまりなく、変数の便利さがよく分からないかと思います。変数という概念を理解するには変数の使い方や便利さを学ぶと理解しやすいので、次はこの変数の便利なところなどを紹介していきたいと思います。

それではまたお会いしましょう。ではー。

この記事は桜舞が執筆致しました。

著者が愛する小型哺乳類

桜舞 春人 Sakurama Haruto

ISDN時代から様々なコンテンツを制作しているちょっと髪の毛が心配な東京在住のプログラマー。生粋のロングスリーパーで、10時間以上睡眠を取らないと基本的に体調が悪い。好きなだけ寝れる生活を送るのが夢。ゲームとスポーツと音楽が大好き。誰か髪の毛を分けて下さい。

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。