【プロゲート復習】変数はなぜ使う?3つのメリットを解説。

プログラミング
難易度:★☆☆☆☆

この記事では、プログラミングの基本『変数』の理解を深めていきます。

  • 変数のメリット
  • 変数の更新

この辺に触れていきます。

プログラミングを学び始めたけど、変数の凄さがいまいち分からない。

プロゲートの復習がしたい!

こんな方に向けての記事です。

使用言語はJavascriptです。では早速いきましょう!

前回のおさらい

前回は、変数の値をメッセージ表示しましたね。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>
    <h1>イージーな人生を歩みたい!</h1>
     <p class="yamada">知識をつけて、楽に生きる</p>

     <script type="text/javascript" src="sample.js"></script>
</body>
</html>

ssample.js

var name = "太郎";
alert(name);

変数は、値を入れる箱でしたね!

var で変数を宣言して、nameという箱に”太郎”という値を入れています。

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

変数のメリット

”太郎”を表示するために2行使ってる、、変数なんて意味ないんじゃないの??

当然の疑問ですね。そこで今回は、変数のメリットにふれていきましょう。

変数のメリットは大きく3つあります。

  • 同じ値を繰り返し使える
  • 変更に対応しやすい
  • 値の意味が分かりやすくなる

こんな感じ!では実際に見ていきましょう。

同じ値を繰り返し使える

まずは、変数を使わない場合を見ていきましょう。

3人に同じメッセージ内容を表示したいとき、下のように書きます。

alert("山田くん、人生をイージーにしましょう");
alert("佐藤くん、人生をイージーにしましょう");
alert("城之内くん、人生をイージーにしましょう");


“人生をイージーにしましょう”という部分が、被っていますね。ここで変数を使いましょう!

var text ="人生をイージーにしましょう"
alert("山田くん、" + text);
alert("佐藤くん、" + text);
alert("城之内くん、"+ text);


長ったらしい文章は、name箱に入れちゃって使い回しましょう!

これは便利だね!

変数に値を一度入れておくと、何度でも利用可能。計算結果を入れておくのもいいね!

変更に対応しやすい

これは、1つめのメリット『使い回しできる』とほぼ同じです。

先ほどと同じ例で考えてみましょう。

まず、変数を使わず書いているとこんな感じになります。

alert("山田くん、人生をイージーにしましょう");
alert("佐藤くん、人生をイージーにしましょう");
alert("城之内くん、人生をイージーにしましょう");

そして、こんな事を言われたとしましょう。

やっぱりメッセージ内容を変えよう。”イージー“から”ハード“に変えといて

こんな事を言われたら、3つのメッセージ全てを変更しなければなりません。

alert("山田くん、人生をハードにしましょう");
alert("佐藤くん、人生をハードにしましょう");
alert("城之内くん、人生をハードにしましょう");

め、、めんどくさい、、いやだ!

しかし、変数を使っているとどうでしょう?

var text ="人生をイージーにしましょう"
alert("山田くん、" + text);
alert("佐藤くん、" + text);
alert("城之内くん、"+ text);

ここから、

var text ="人生をハードにしましょう"
alert("山田くん、" + text);
alert("佐藤くん、" + text);
alert("城之内くん、"+ text);

1行の修正で済みますね!

もし変数を使ってなくて、100人にメッセージを表示するとなったら、100行変えないといけないもんね。恐ろしい、、

値の意味が分かりやすくなる

変数には、何の値が代入されているか分かりやすい名前をつけましょう。

例えば、”age”という変数には年齢が入っていると推測できます。もっと具体例を見ていきましょう。

var dogName = "ポチ"
var humanName = "のび太"
alert(humanName + "が" + dogName + "を連れて散歩してる")

ぱっと見ただけで、何の値が入っているか推測できるようにしておきましょう!

変数のメリットは、繰り返し使える・変更がラク・名前から推測できる

変数の更新方法

変数のメリットは分かったところで、『変数の更新』を行ってみましょう

変数は、一度代入した値を変更することもできますね。

一度値を入れた箱に、もう一度値を入れると、値の上書きができます

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

var number = 10;
alert(number);
number = 15;
alert(number);

変数の中身が上書きされますね!

プログラムは、上から順に実行されます!なので後で代入された値で変数の中身が更新されますね!

次は、変数の更新を計算で行ってみましょう。まずは、例を見ていきましょう!

var number = 10;
alert(number);
number = number + 25;
alert(number);

『=』の右のnumberは10に置き換わり、『10 + 25』となります!
そして、計算結果の35が値となり、number変数が上書きされています!

var以外の変数宣言

実はvar以外にも変数宣言の方法が2つあります

let

1つ目はletです。

letの特徴は『再宣言が禁止』です。

let test = 1;
let test = 2;

同じ変数を宣言しようとすると、エラーとなります。

const

constの特徴は『再宣言、再代入が禁止』です。

const test = 1;
test = 2;

constで宣言した変数に値を入れたら、2度と値を変更することはできません。

 

letとconstのメリット

letもconstも厳しそうだからvarを使おう、、

となるのは待ってください!let、constにもメリットがあります。

値が変わっていないと断定できる』ことです。

 

例えば、constで宣言された変数に1が入っていれば、絶対に1です。

しかし、varで宣言された変数は、1が入っていても途中で何かに変更される可能性があります。

 

このように、厳しいからこそ入っている値をしぼりこめるのです。

変数を使いこなして効率化しよう

以上、今回は変数について解説してきました。

  • 変数のメリット3つ
  • 変数の更新

この辺が理解できれいれば、バッチリです。

変数はプログラミングの全ての基礎となります。木の根っこの部分です。

最初のうちは変数を積極的に使っていき、『変数』という概念に慣れていきましょう!

変数という箱にどんどん値を入れちゃいましょう!

コメント