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

JavaScript
この記事は約9分で読めます。

はじめに

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

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

  • JavaScriptを実践する前準備は何が必要なの?
  • JavaScriptのコードを書く上での決まり事とはどのようなこと?
  • JavaScriptの変数の基礎知識とは?
    • 変数宣言
      ・const
      ・let
      ・var
  • 変数宣言const、let、varの違いとはどのようなもの?

 JavaScript入門講座(1)では、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を書いていくうえで、守らなければならない決まりごとがあります。

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

変数名を付ける際の決まり事、その他注意事項など

  • 英数文字、アンダースコア(_)、ダラー記号($)が使用可能
  • 英文字を大文字と小文字は区別されて識別
  • 1文字目の数字(0~9)の使用は不可
  • JavaScriptの予約語は使用不可
  • JavaScriptの変数の書き方の慣例がキャメルケース(camelCase)が多いのでできるだけこの書き方を推奨 ⇐ 文字の区切りで最初の文字を大文字にする
  • 文の最後に「;」を付けること

JavaScriptの変数の基礎知識

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

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

変数の宣言

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

const

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

const t = 50;
const y = 20;
const ty = t * y;
const m ="面積=" + ty;
console.log(m);
 上述の式の解説

  1. constで宣言した変数 t に50を代入
  2. constで宣言した変数 y に20を代入
  3. constで宣言した変数 ty に t と y を掛け合わせた面積を代入
  4. constで宣言した変数 m に”面積=”の文字列と面積を代入
  5. 結果を console.log(m)でコンソールに出力
    「面積=1000」と console に出力されるのを確認してください。

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

 結果を見るには、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);

上述の式の解説

  1. constで宣言した変数 pai に円周率を代入
  2. letで宣言した変数rに半径20を代入
  3. letで宣言した変数 en に円の面積を代入
  4. enに100を乗じる。 ⇐ 小数点2桁まで出すための前準備
  5. 再度、前の en を数学関数Math.round(en)で四捨五入した値を100で割る。 ⇐ 円の面積を小数点2桁までの値を取り出す。
  6. letで宣言した変数 enr に文字列”円の面積”と円の面積を代入
  7. 「//」以後の文字はコメントアウト。
  8. console.log(enr);により、consoleに円の面積を出力
    「円の面積=256.64」と出力されていることを確認してください。

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

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

数学関数意味
Math.ceil(n)小数点以下を繰り上げ
Math.floor(n)小数点以下を繰り下げ
Math.round(n)小数点以下を四捨五入
Math.abs(n)絶対値
Math.sqrt(n)nの平方根
Math.random()0から1までの乱数
Math.PI円周率π
Math.sin(n)正弦
Math.cos(n)余弦
Math.tan(n)正接
Math.E自然対数e
Math.SQRT22の平方根

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%の場合)

上述の式の解説

  1. varで宣言した変数 zei に消費税率10%である0.1を代入
  2. varで宣言した変数 kos に買い物個数10を代入
  3. varで宣言した変数 ned に買い物の値段2000を代入
  4. varで宣言した変数 kai に買い物の総額を計算して代入
  5. console.log("買い物総額=" + kai + "円です。");で買い物総額をコンソールに出力
    「買い物総額=22000円です。」 と出力されるのを確認してください。
  6. varで宣言した変数 zei に消費税率12%である0.12を代入、再定義してもvarではOK
  7. 前にvarで宣言した変数 kos に買い物個数を新たに12を代入、constでは使えない。
  8. 前にvarで宣言した変数 ned に買い物値段2100を新たに代入、constでは使えない。
  9. 変数宣言せずにkai1を使い、この変数に新たに変更した買い物の総額を計算して代入
  10. console.log("買い物総額=" + kai1 + "円です。")で、消費税、買い物個数、買い物値段を変更後の買い物総額をコンソールに出力
    「買い物総額=18816円です。」 と出力されるのを確認してください。
  11. 「//」以後の文字はコメントアウト。

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

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

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

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

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

変数宣言再代入の可否再定義の可否スコープバグの出し難さ
const××
let×ブロック内
var関数内

おわりに

 如何だったでしょうか?

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

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

以上です。

 

コメント

タイトルとURLをコピーしました