JavaScript の変数、const、let、varの違いなどを初心者向けに分かりやすく解説｜JavaScript入門講座（2）

はじめに

　JavaScript入門講座の第二弾として、JavaScript の変数ついて紹介します。

　この記事を読むと次の疑問について知ることができます。

　JavaScript入門講座（１）では、JavaScriptとは？について解説してきました。

　ここでは、JavaScriptの変数について深堀していきます。

Javascriptを実践する前準備

　早速、JavaScriptの実践を始める前に、JavaScriptはどこに書いて、どのように実行させるかを知る必要があります。

　JavaScriptは、HTML文書内に書いて実行させますが、HTML内の書く場所が決められています。

　HTML文書などの実行は、基本的に上から下に、同じ文内であれば左から右に実行されていきますので、最初にJavaScriptが書かれていると、それを読み込むのに時間がかかります。

　したがって、できるだけHTML文書の最後に書くのがベスト(</body>タグの直前）です。

　その際の書き方は、次のようにscriptタグで挟んでその間にJavaScriptのコードを書きます。

　この方式をインラインスクリプトと言いますが、ここでは、この方式で実践していきます。


<script>
ここにJavaScriptのコードを書く。
</script>

　しかし、どうしても先に読み込んで処理をさせたい場合は、headタグ内に書くことが可能です。

　また、直接JavaScriptコードを上述の書き方で書く場合と、JavaScriptファイルを別のファイルとして用意し、それを読み込む方式があります。

<script>
  <script src="JavaScriptのファイル"></script>
</script>

　以上の設定が終えたら、VSコードを立ち上げ実際にJavaScriptの実践をしていきましょう。

　VSコードをを立ち上げたら、新規ファイル作成で何でもよいので名前を付けて作成してください。

JavaScriptのコードを書く上での決まり事

　JavaScriptを書いていくうえで、守らなければならない決まりごとがあります。

　それを次に載せておきます。

JavaScriptの変数の基礎知識

　他のプログラミング言語でも同じように、変数はプログラムで最も重要な意味を持ちます。

　変数は、値（数字、テキストデータ、真偽値など）を入れる入れ物であり、変数に値を入れたり（代入）、最初に変数を宣言したり、後で変数を参照したりすることができます。

変数の宣言

　変数の宣言には、3つの方法がありますが最初に紹介する宣言は、最も厳格な宣言です。

const

　最初にconstで変数を宣言したら、再代入 、再定義（宣言）ができないタイプの変数宣言です。

const t = 50;
const y = 20;
const ty = t * y;
const m ="面積＝" + ty;
console.log(m);

　なお、コンソールへの出力結果は、ブラウザーには表示されません。

　結果を見るには、Chromeブラウザーを利用している場合は、作成したHTML文書をブラウザーに表示（上述の式だけを入れたHTML文書では何も表示されません）した状態で右クリックして、出るメニューで「検証」をクリックして、デベロッパーツールを起動し、上部にある「console」タブをクリックすることにより結果を見ることができます。

let

　二番目に紹介する変数の宣言 let は、再代入が可能ですが再定義はできないタイプの変数宣言です。

　次は、円の面積を求めてみましょう。

const pai = Math.PI; //円周率
let r = 20; //円の半径
let en = pai * r * r; //円の面積
en = en * 100　//円の面積×100
en = Math.round(en)　/ 100; //円の面積を小数点2桁までの四捨五入で求める
let enr = "円の面積＝" + en;
console.log(enr);

　上述で出てくるJavaScriptの数学関数として、Math.PI、Math.round(en)を使いましたが、他にも関数が用意されています。

　よく使いそうな関数を以下の載せておきます。

var

　　三番目に紹介する変数の宣言 var は、再代入が可能でしかも再定義もできるタイプの変数宣言です。

var zei = 0.1; //消費税率（10％）
var kos = 10; //買い物した個数10個
var ned = 2000; //買い物の値段2000円
var kai = kos * ned * (zei+1); //買い物総額の計算
console.log("買い物総額＝" + kai + "円です。"); //買い物総額をコンソルに出力（税率10％の場合）
var zei = 0.12; //買い物の消費税率（12％）に変更、const、letでは再定義は不可
kos = 8; //買い物個数8個の変更
ned = 2100; //買い物値段変更2100円
kai1 = kos * ned * (zei+1); //買い物総額の計算
　　console.log("買い物総額＝" + kai1 + "円です。"); //買い物総額をコンソルに出力（税率12％の場合）

　このvarは、前出の const 、let が新しく制定された（ES2015）のに対して、古から用いられている変数宣言で、解説書などもvarの変数宣言で書かれているものが多くみられます。

　しかし、varには、変数としての自由さがある一方で、自由さがある故にプログラムでバグを出しやすい欠点があります。

　それらについては、ここでは詳細は省きますが、とにかくこれから始めようとする方は、変数宣言には前出のconst、letを使うことをお勧めします。

変数宣言const、let、varの違い

　再度、ここで変数宣言const、let、varの違いを確認しておきましょう。

おわりに

　如何だったでしょうか？

　JavaScriptを実践する前準備は何が必要なの？、JavaScriptのコードを書く上での決まり事とはどのようなこと？、JavaScriptの変数の基礎知識とは？、変数宣言、const、let、var、変数宣言const、let、varの違いとはどのようなもの？などについて解説してきました。

　この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。