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

みなさまどうも。いかがお過ごしでしょうか。

続きまして変数の使い方について触れていきたいと思います。

前回までに記述したソースはこんな感じでしたね。

var x;

x = "Hello world";

console.log(x);

このソースで一応『変数』というものを使用しているわけですが、 これでは変数を使用するメリットが全くありません。

前記のソースだとこのように

console.log("Hello world"); 

直接コンソールログ関数に『Hello world』と記述してしまったほうが圧倒的に楽なわけです。

というわけで変数の便利な使い方をいくつか紹介していきたいと思います。

まずはコンソールログ関数を使って5回「俺は天才だ！」とコンソールに出力するプログラムを組んでみましょう。

変数を使わずに記述するとこのような感じですね。

console.log("俺は天才だ！"); 
console.log("俺は天才だ！"); 
console.log("俺は天才だ！"); 
console.log("俺は天才だ！"); 
console.log("俺は天才だ！"); 

コンソールログ関数を5回記述する必要があります。

さて記述はOKで動作チェックも終わりましたが、その後の人生で色々ありどうやら自分は凡才らしいことが発覚しました。ということは文言を「やっぱり僕は凡才だ…」という文言に変更しなくてはなりません。

すると今の状態では5箇所修正する必要があります。こんな感じですね。

console.log("やっぱり僕は凡才だ…"); 
console.log("やっぱり僕は凡才だ…");
console.log("やっぱり僕は凡才だ…");
console.log("やっぱり僕は凡才だ…");
console.log("やっぱり僕は凡才だ…");

さて、もしこれが変数を使って実装されていればこの修正はどうなるのでしょうか。

もうわかりましたね。

変数を使っていれば変数の値のところだけ1箇所書き直せば全ての箇所に修正が反映されます。

var x = "俺は天才だ！";

console.log(x);
console.log(x);
console.log(x);
console.log(x);
console.log(x);

↓

var x = "やっぱり僕は凡才だ…";

console.log(x);
console.log(x);
console.log(x);
console.log(x);
console.log(x);

このように修正が非常に楽になります。極端な話ですが、もしコンソールログ関数が1万個記述してあったとしてもすぐに修正することが可能です。

これが変数の使い方の1つですね。

変数は何度でも呼び出すことができるので、このような同じ文章を何度も表示させたりする処理を構築する場合などでは変数を使ってしまったほうが圧倒的にメンテナンスが楽になります。

あと前回の記事で勉強した計算結果を自分自身に代入する、というのがありましたね。あれを利用すると演算式が非常に楽に組める場合もあります。

では『0から始まってコンソールに出力するたびに2ずつ加算されていく数値』というのを超単純にプログラミングしてみましょう。5回出力するものとします。

ちょっと雑なプログラムですが変数を使用しないとこんな感じになりますね。

console.log(0);
console.log(0 + 2);
console.log(0 + 2 + 2);
console.log(0 + 2 + 2 + 2);
console.log(0 + 2 + 2 + 2 + 2);

もうかなりややこしくなっています。

あ、プログラミングの世界では計算はコンピューターに任せるもの、というわけなので『0,2,4,6,8』と自分自身で計算したものを直接記述するのは避けましょう。間違いではないですがプログラミングという観点から見るとあまり美しくありません。処理だけ書いて計算はコンピューターに任せる、というのがプログラミングです。

では話を戻しましてこのややこしいのも変数を利用すれば以下のように書きなおすことができます。

var x = 0;
console.log(x);

x = x + 2;
console.log(x);

x = x + 2;
console.log(x);

x = x + 2;
console.log(x);

x = x + 2;
console.log(x);

コメントアウトで解説をいれてみるとこんな感じです。

var x = 0;
console.log(x); // これは『0』

x = x + 2; // 最初『x』には『0』が代入されているので『0 + 2』となる
console.log(x);  // これは『2』

x = x + 2; // 最初『x』には『2』が代入されているので『2 + 2』となる
console.log(x); // これは『4』

x = x + 2; // 最初『x』には『4』が代入されているので『4 + 2』となる
console.log(x); // これは『6』

x = x + 2; // 最初『x』には『6』が代入されているので『6 + 2』となる
console.log(x); // これは『8』

このように最初の値だけ

var x = 0;
console.log(x); 

と記述し、その後に

x = x + 2;
console.log(x); 

これをワンセットとして繰り返しコピペで記述するだけで2が加算された数値を出力できます。こうすると記述も楽だしミスも起こりにくし良いこと尽くめですね。

というわけで変数はこういう使い方が出来たりします。変数の使い方は非常に幅広いのでごく一部の紹介となってしまいますがこれをみてちょっと便利さが伝われば幸いでございます。

変数の色々な使い方をマスターすれば変数という概念も自ずと分かるようになってきます。変数はこのあとずっと登場していきますので続く記事を読んでさらに変数の上手い使い方を学んでいきましょう。

変数についての基本的な解説は以上となりますがちゃんと掴めてきたでしょうか。色々自分で書いてみるともっと理解が深まるかと思います。

続いての記事では『数値』と『文字列』と『真偽値』について解説していきたいと思います。

引き続き頑張ってくださいね。ではではー。

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

著者が愛する小型哺乳類

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

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

トップページへ

前の記事へ

次の記事へ

Tweet

シェア