変数を理解するコツを分かりやすく解説【JavaScript基礎講座】

変数の基礎知識

プログラミングの変数について

• いまいち理解できない
• 変数名の付け方がわからない
• 変数名にルールってあるの？
• 変数名でよく使われている"i"とか"tmp"って何？

など悩むと思います。

プログラミングをはじめたばかりだと変数がイメージできない人は多いです。

でも安心してください！

プログラミングしていると変数は自然と理解できるようになります！

では、プログラミングの基礎知識である変数について簡単に解説します。

変数とは

変数とは「プログラムで扱われるデータの読み書きする記憶領域」です。

はい、これだとむずかしいですよね💦

もっと簡単に表現します。

変数とは「数字や文字を入れたり出したりすることが出来る箱」です。

参考書でも「変数は箱」ってよく言われています。

変数とは

変数は「数字や文字を入れたり出したりすることが出来る箱」とイメージすると理解しやすくなります。

変数を使ったプログラミング例

では、実際に変数を使った簡単なJavaScriptのサンプルで解説してみます。

サンプル：変数（箱）に数字を入れる

hakoという変数名の変数（箱）に数字「0」を入れて作成し、「1 + 1」の結果「2」を入れるプログラミングです。

var hako = 0;
    hako = 1 + 1;

サンプルの解説

• 1行目hakoという変数名で変数を作成しています。また初期値として数字「0」を入れています。
• 2行目変数のhakoに「1 + 1」の結果「2」を入れています。

サンプルで理解しておくポイント

• hakoという変数を作成
• hakoという変数に数字を入れている

サンプル：変数と変数で計算する

hakoAとhakoBを掛け算して、その結果をhakoCへ入れるプログラミングです。

var hakoA = 2;
var hakoB = 3;
var hakoC = hakoA * hakoB;

サンプルの解説

• 1行目変数hakoAに数字の「2」を入れています。
• 2行目変数hakoBに数字の「3」を入れています
• 3行目変数hakoCにhakoAとhakoBを掛け算した結果の数字「6」を入れています。

サンプルで理解しておくポイント

• hakoAとhakoBという変数を作成変数に数字を入れることが出来る
• hakoAとhakoBを掛け算している変数に入っている値を使って計算することができる
• hakoAとhakoBの掛け算した結果をhakoCへ入れている計算した結果を変数に入れることが出来る

変数の予備知識

• 「変数の作成する」ことを「変数を宣言する」といいます。
• 「変数に値を入れる」ことを「変数に値を代入する」といいます。
• 「変数に最初に値を入れる」ことを「変数の初期値を代入する」といいます。

変数をプログラミングで使う理由

プログラミングで変数を使う理由について解説します。

はい、そうですよね💦

たしかに参考書とかでよく見るサンプルコードの

var hensu = '変数';
    hensu = hensu + 'だよ';

とかって

var hensu = '変数だよ';

でよくね？って思いますよね💦

でもプログラミングで変数は必ず使われるんです。

その理由としては「変数はプログラムの処理で使いまわせる」ことにあります。

簡単なサンプルプログラムを作ってみます。

サンプル：家族の名前を変数に入れるプログラム

var myoji = '山田';
var fater = myoji + '太郎';
var mater = myoji + '花子';
var brother = myoji + '次郎';

苗字という変数に「山田」を入れておけば、家族の父や母、兄弟の名前を変数へ入れる際にmyojiを使いまわすことができます。

変数のmyojiを使いまわすことで便利なことがあります。

例えば苗字が「山田」ではなく「佐藤」と変更する場合、変数のmyojiを変更すればよくなります。

変数名の基礎知識

ここからは変数名に関する解説を行います。

変数名の付け方について

変数名の付け方は、端的に言うと「変数名の付け方は自由」です。

変数名は自由につけても良いと言われても困りますよね💦

実は「変数名の付け方は自由」と言いましたが、変数名の付け方にはルールのような一般的な基準があります。

変数名のルール

変数名の付け方のルールとして一般的によく言われている基準について紹介します。

その中で一番重要と思う変数名のルールとして「プログラミングの処理で何に使われているか分かる名前をつける」です。

プログラミングの処理で何に使われているか分かる名前をつける理由

変数名を処理に合わせた名前にすることで「バグや不具合を防ぐ」メリットがあります。

例えば

• 重複して同じ変数名で変数を宣言してしまうのと防ぐ
• 処理にあわない値を変数に入れてしまうのを防ぐ

などのミスを防ぐことができます。

このほかにも変数名を付けるルールはあります。

例えば

• 数字を入れる変数名は頭文字を「n」で始める
• 文字を入れる変数名は頭文字を「s」で始める

などなど。。。

まぁあまり個人的には重要と思っていないので無視していますｗ

変数名を付ける際のポイント

変数名を付ける際のポイントを簡単なプログラミングを例に解説します。

var a = 100;
var b = 0.08;
var x = a * b;

このプログラミングコードは何を意図して書かれているプログラムか分かりますか？

はい、処理はそうです。

でも何の意図で書かれているプログラムかはわからないと思います。

では、上記のプログラミングコードの変数名に意味のある名前を付けてみます。

var kingaku = 100;
var zei = 0.08;
var kingaku_zei = kingaku * zei;

どうでしょう？

変数名に「プログラミングの処理で何に使われているか分かる名前をつける」とプログラミングコードがめちゃめちゃ読みやすくなるんです。

変数名によく使われている「i」とは

参考書などでよく使われている変数名の「i」について解説します。解説というほどではないですが💦

この変数名「i」は、for文やwhile文などのループや使われる「ループのカウンター用の変数」の時に使われます。

たとえば

for (var i = 0; i++) {

}

変数名によく使われている「tmp」「temp」とは

参考書などでよく使われている変数名の「tmp」や「temp」について解説します。

基本的にプログラミングの変数でtmpやtempは「一時だけ利用するための変数」という意味で使われることが多いです。

ちなみにTemporary(テンポラリー)の略です。

変数名によく使われる「flag」「flg」とは

参考書などでよく使われている変数名の「flag」について解説します。

基本的にプログラミングの変数で「オンとオフ」を管理する変数に使われることが多いです。

例えば「サービスにログインしているか」を管理する時に使われていたりします。

まとめ：変数を理解するコツを分かりやすく解説

変数はプログラミングにおいて基礎知識ですが、めちゃめちゃ重要です。

ただこの時点で変数がいまいち理解できていなくても「変数は数値や文字を入れることが出来る箱」と知っていれば問題ありません。

なぜなら変数を完璧に理解していなくてもプログラミングの基礎の勉強に問題ないからです！

なので、プログラミングの基礎を一通り学習してから理解できていない内容を深堀して学習すればいいんです。

ここまで読んでもらいありがとうございます！