スライドショー

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

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

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

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説