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

2020年1月29日2022年12月8日プログラム基礎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;

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

変数xにa * bの結果の「8」を入れてるプログラムでしょ？

はい、処理はそうです。

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

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

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

どうでしょう？

「kingaku」や「zei」といった変数名を使うことでどういった処理をしているプログラミングコードか分かりやすくなったと思います。

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

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

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

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

たとえば

for (var i = 0; i<10; i++) {
}

などです。

あとは、integerやindexの頭文字らしいです。

参考記事：なぜループカウンタ変数のほとんどに “i”が使用されるのか？

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

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

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

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

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

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

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

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

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

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

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

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

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

プログラミングは「習うより慣れろ」が重要で、実際にプログラミングすることが近道だったりします。

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

ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト