Language
日本語
English

Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

  1. Home
  2. JavaScriptBeginner - Using Variables (Part 3)

Using Variables (Part 3) - Japanese Only

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

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

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

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が加算された数値を出力できます。こうすると記述も楽だしミスも起こりにくし良いこと尽くめですね。

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

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

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

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

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

This article was written by Sakurama.

Author's beloved small mammal

桜舞 春人 Sakurama Haruto

A Tokyo-based programmer who has been creating various content since the ISDN era, with a bit of concern about his hair. A true long sleeper who generally feels unwell without at least 10 hours of sleep. His dream is to live a life where he can sleep as much as he wants. Loves games, sports, and music. Please share some hair with him.

If you find any errors or copyright issues, please .