スライドショー

JavaScript初心者必見!constとは?基礎の基礎を解説!

変数の宣言は色々な書き方がありますが、その中でもちょっと特殊なのが、あとから値を書き換えたくない変数を作るconstというものです。

constなんて初めて聞いた…
どうやって使うんだろう…
 

という疑問をお持ちの方、今回の記事は必見です。
変数の宣言方法のひとつ、constについて解説していきます。

下記の流れで、constについて理解を深めていきましょう。

【基礎】変数とは
【基礎】constとは
【基礎】constの使い方
【発展】他の宣言方法との違い

変数を使いこなすには、constをしっかり理解する必要があります。
この記事でバッチリ学んでいってくださいね!

変数とは?

変数とは、プログラミングで使われる、値を入れておくための箱です。

同じ値を使いまわしたいとき、いちいち書いたりするのは面倒ですよね。
または、途中で値が変わってもちゃんと引き継いだ状態で使いまわしたい時なんかに使われます。

変数の宣言方法はいろいろありますが、今回解説していくのは、その中でも値の書き換えを禁止した状態の変数を宣言できるconstというものです。

定数を宣言するconstとは?

constとは値書き換えを禁止した変数を宣言する方法です。

例えば同じ値を使いまわす場合、うっかり途中で値が書き換わってしまったなんて経験はありませんか?
それに気づかずプログラムを進めていくと、思わぬバグの原因になってしまいます。

そんな時に便利なのが、constです。
事前に値を変えないことがわかっている場合は、constを使うようにしましょう! 

constで宣言する方法

次に、具体的な使い方について説明します。

constは以下のように、constを先頭につけて変数を宣言します。

const 変数名 = 変数に入れる値;

変数名は書き換え不可の変数であることがわかるように、大文字 + 「_」(アンダーバー)で設定するのが一般的です。

変数宣言と同時に値を入れる必要があることに注意して下さい。

constの使い方

次に、constの具体的な使い方のサンプルをご紹介します!

サンプルコード:

const TAX_RATE = 0.08;//消費税率

function test(){
    var cost = 1000; //単価
    var num = 2;     //数
    var taxCost;     //消費税額
    var totalCost;   //合計金額
    
    //消費税金額計算
    taxCost = cost * TAX_RATE
    
    //合計金額を計算
    totalCost = (cost + taxCost) * num;
    console.log(totalCost);
}

test();

実行結果:

2160

この例では、TAX_RATEに消費税率を入れ、合計金額をログに出力しています。

試しに、途中でTAX_RATEの値を再代入してみましょう。

サンプルコード:

const TAX_RATE = 0.08;//消費税率
const TAX_RATE = 0.05;//再代入

function test(){
    var cost = 1000; //単価
    var num = 2;     //数
    var taxCost;     //消費税額
    var totalCost;   //合計金額
    
    //消費税金額計算
    taxCost = cost * TAX_RATE
    
    //合計金額を計算
    totalCost = (cost + taxCost) * num;
    console.log(totalCost);
}

test();

実行結果:

SyntaxError: Identifier 'TAX_RATE' has already been declared〜

エラーが表示されちゃいましたね。

このように、constが途中で上書きされると、エラーを吐いて教えてくれるのです。

つまり消費税率のように、処理の途中で値を変えたくない場合は、constを使うとミスが減ります
これは活用していきたいですね。

変数宣言の種類

変数の定義方法は、const以外にもvarletなどがあります。

どんな違いがあるのか、確認しておきましょう!

var

一番基本的な変数の宣言方法です。
関数の中で宣言すると、その関数の中でしか使えないローカル変数として宣言することができます。

var item = 0; //グローバル変数
 
function test() {
    var item = 10; //ローカル変数
    console.log(item);
}
 
test();
console.log(item);

実行結果:

10
0

上記の例を見ると、1回目のconsole.logでは10が表示されますが、2回目のconsole.logでは0のままになっていますね。
このように、変数を宣言する位置によって、その変数の適用範囲が変わってくるのです。

varについては、下記の記事でもっと詳しく解説しています。
こちらも併せて確認してみてください。

>>変数定義の基礎!varとは?

let

letはvarと同じように変数を宣言するときに使います。

しかしvarとはちょっと違い、letを使うと変数のスコープがブロックに限定されます。

次のプログラムで確認してみましょう。

let num = 123;
console.log(num);
{
    let num = 456;
    console.log(num);
}
console.log(num);

実行結果:

123
456
123

プログラムの実行結果から、変数のスコープがブロック内に限定されていることが確認できました。

letの詳しい使い方については、下記の記事でもっと詳しく解説しています。
こちらも併せて確認してみましょう。

>>変数定義の基礎!varとは?

3つの違いは?

var、let、constの違いをまとめると、下記のような感じです。

var:変数のスコープが関数内
let:変数のスコープがブロック内
const:最初の宣言から値を変更させない

どれも同じ変数の宣言ではありますが、それぞれの特徴があることがわかりますね。

うまく使い分けていきましょう!

こんな時はconstを使おう!

先ほどの例のように、消費税率など値を変更したくない場合のみconstを使うのが推奨されています。

ずっと同じ値を使い続けるならば、const一択な訳です。

途中で値が変わることを想定しているならば、varletをうまく使い分けるようにしましょう。

まとめ

今回は、constの使い方について解説しました。

constを使うことで値を変更したくない変数を、誤って書き換えるミスを減らすことができます。

使い方も簡単ですので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。