JavaScript constとは？特徴や使い方、注意点も紹介

「JavaScript constはどんな役割を果たすの？」
「JavaScript constを使っているけど表示が上手くいかない…」
「varとletとconstの違いが知りたい！」

この記事に訪れたあなたはこのような悩みを持っていませんか？

varに使い慣れたときに、変数の前に「const x」のような変数定義があるのを見ると少し戸惑いますよね。

しかし今まで同じようにプログラムは動いてくれるので、あまり気にしていなかった人もいるのではないでしょうか？

実はconstには仕事上でJavaScriptを書くときに、とても重要な役割を果たしてくれるんです。

そこで、今回はJavaScriptでのconstの使い方や注意点を、サンプルコードも交えて紹介します。

この記事を読めばどんな初心者でも、サンプルコードを通してどのようにconstが使われているのかわかるようになりますよ。

JavaScript constとは？

JavaScript constは変数定義するときに使われるもので、varやletなどと同様に変数の前につけます。

使い方は以下のようにconstで変数を定義するだけ。

const point = 20;

そしてconstの最大の特徴は、一度定義すると後から値を変えられない性質があるところです。

サンプルコードを載せて確認してみましょう。

const point = 20;
point = 200;
console.log(point);

// 実行結果
point = 200;
^
TypeError: Assignment to constant variable.

上記のコードのようにconst変数を定義した後、値を変更しようとするとタイプエラーが起きましたね。

エラーを翻訳すると「定数変数へ割り当てようとしているよ」と表示されています。

つまり、constで定義された変数は定数になるので、後から値を変えられなくなるわけなんですね。

varやletの違い

変数定義にはvarやletもあります。varはJavaScriptが誕生したときから存在していましたが、letとconstはES2015/ES6から追加されました。

そのため「varはよく知っているけど、letやconstはよくわからない…」と感じる人もいるのではないでしょうか？

まずはvarから説明していきます。varはあなたが使ってきたように、変数を定義するときにつけるものでしたね。

var count = 0;
for(var i=0; i<3; i++){
count++;
}
console.log("count = "+count+":i = " + i);

// 実行結果
count = 3:i = 3

実行するとcountもiもともに3になりました。varの特徴はfor文で定義されたiが、for文の外でも使える点ですね。

そのため、同じ変数を何度も使用する場合には注意が必要でした。ではletの場合はどうなると思いますか？

let count = 0;
for(let i=0; i<3; i++){
count++;
}
console.log("count = "+count+":i = " + i);

// 実行結果
count = 3:i = ReferenceError

実行するとリファレンスエラーが起きてしまいましたね。

つまり、for文の外ではiが使えなくなるので同じ変数を何度も使用しても多少は安心できるようになるんです。

ちなみにcountは3を出力してくれます。console部分からiを消して実行してみてください。

続いてconstの場合はどうなるのでしょうか？

const count = 0;
for(const i=0; i<3; i++){
count++;
}
console.log("count = "+count+":i = " + i);

// 実行結果
count = TypeError:i = TypeError

実行するとどちらもタイプエラーとなってしまいました。

countも、iも、for文で1を足しているので、定数変数の値を書き換えていることになりエラーとなってしまうんですね。

最後にまとめると3つの違いは以下のような感じになりますよ。

var：通常時の変数定義。関数内で定義した変数は関数の外でも使える。
let：varとほとんど同じだが、関数内で定義した変数は関数の外で使えない。
const：letの性質に加え、一度定義すると後から書き換えられない。

JavaScript constの特徴

constは再定義ができない変数を作れることがわかりましたが、「それって何の意味があるの？」と思ってしまいますよね。

実は再定義ができないと、都合がいいときがあるんです。constが持つ特徴は以下の通りです。

思わぬエラーを防げる
変数を宣言する前にconsoleするとエラーが出る

それぞれの特徴のメリットについて詳しく解説します。

思わぬエラーを防げる

constはJavaScriptを学習し始めたときは恩恵を受けづらいですが、仕事になるととても役に立ちます。

例えば、会社で長いコードを作成したとしましょう。

長いコードになればなるほど、たくさんの変数を使うことが多くなりますよね。コードが長くて変数も多いので、途中で何の変数を使ったのかわからなくなりませんか？

このような事態になると起きてしまいがちなのが、すでに使っている変数をまた使ってしまうこと。

以下のコードを見てみましょう。

function fruitValue(n){　// フルーツの価格を決める関数
n = n*1.08;
return n;
}

function fruitPrint(n){　// フルーツの価格を表示する関数
console.log("価格は"+n+"円");
}

function fruitName(n){　// フルーツの名前を取り出す関数
var fruitbox = ['apple','banana','orange','melon','grape'];
return fruitbox[n];
}

var fruit = 150;
fruit = fruitValue(fruit);
// この間に何行かコードが書かれていて、途中でまたfruit変数を使ってしまう
fruit = fruitName(0);
fruitPrint(fruit);

// 実行結果
価格はapple円

とても長いコードですが、実際はもっと長いコードであることが多いんですね。

そして何の変数を使ったのか忘れてしまい、フルーツの価格が格納されているはずのfruitを使って、フルーツの名前を入れてしまいます。

その結果、fruitに価格ではなく名前が格納されてしまい、実行結果ではapple円と表示がおかしくなってしまいました。

表示が変になってしまうならまだしも、思いもよらないエラーが起きてしまう原因にもなるため、なるべく防ぎたいところですね。

そこでconstが役立つのです。

constならもし変数の存在を忘れてまた使ってしまっても、タイプエラーを起こしてくれるので対処がしやすくなるんですね。

またconst変数は定数なので、「この変数はずっと変わらないんだな」と理解しやすく、コードが読みやすい利点もありますよ。

変数を宣言する前にconsoleするとエラーが出る

一般的に考えて、プログラムコードは上から下へ読み進んで処理していくものですよね。
しかしJavaScriptではそのルールを破ってもエラーにならないんです。

console.log(count);
var count = 150;

// 実行結果
undefined

上記のコードでは変数countを定義する前に、countを出力しています。

普通に考えてこのコードはおかしいと思いますよね？ところが実行するとエラーを起こさずに通ってしまうんです。

エラーを起こさないので、そもそも値がundefinedになっていることに気づかない場合もあり得るんですね。

しかしconstならしっかりとエラーを出してくれますよ。

console.log(count);
const count = 150;

// 実行結果
console.log(count);
^
ReferenceError: Cannot access 'count' before initialization

「coustという変数なんて無いよ」と表示してくれるので、間違いに気づかずに放置してしまうことを防げます。

JavaScript constの使い方：円周の長さを求める

それではconstを使ったサンプルコードを見ていきましょう。以下のコードは直径が10cmの円を使って円周の長さを求めているプログラムです。

const pi = 3.14;
const diameter = 10;

const circle = diameter * (pi*100)/100;
console.log("直径"+diameter+"cmの円周の長さは"+circle+"cm");

// 実行結果
直径10cmの円周の長さは31.4cm

円周率と直径の長さを格納する変数を使って、円周の長さを求めているのがわかります。ポイントはすべての変数にconstを付けているところですね。

円周率と直径の長さは変わることが無い定数ですので、途中で再定義ができないようにconstを付ける必要があります。

こうすることで、途中で値が変わって実行結果がおかしくなってしまうのを防いでいるわけなんですね。

また求めた円周の長さにもconstを付けており、途中で円周の長さが変わってしまうのも防いでいますよ。

このように、一度定義した変数が再定義しないとわかっている場合はconstを使いましょう。

JavaScript constの3つの注意点

エラーの予防にもなる便利なconstですが、たまにconstを使用していると「よく見たら表示がおかしくなったり、エラーが出たりしている…」と悩まされた経験はありませんか？

constを使用していない変数に問題がある場合が多いですが、実はconstを使用している変数に問題がある場合も考えられるんです。

学習者がよくやってしまうミスには、以下のものがあります。

「const x;」のような書き方ができない
functionを使った方が良い場面もある
配列やオブジェクトの中身は変えられる

それぞれどのようなミスをしてしまうのか、対処方法は何か解説しますね。

注意点1：「const x;」のような書き方ができない

変数を定義するとき、どんな値を入れるかまだわからないことってありますよね。そんな時はとりあえず「var x;」のように定義だけしていませんか？

定義だけする場合、constではエラーになってしまいます。

const x; // ここで構文エラー
x = 5+5;
console.log(x);

上記のコードがなぜエラーを起こすのかは、「JavaScript constとは？」でconstは一度定義したら再定義ができないと解説しましたね。

つまり「cosnt x;」と定義した時点で再定義できません。ところが定義したxには何も格納されていませんね。

そのため何も定義されていない変数（=undefined）を使用することは文法的におかしいためにエラーが出るわけなんです。

const x = 5+5;
console.log(x);

// 実行結果
10

上記のように宣言と代入を同時に行うことで、実行が通りました。const変数は定義した時点で値を代入すると覚えておきましょう。

注意点2：unctionを使った方が良い場面もある

const変数を使っていると、「定義したはずなのに、値が無いですよとエラーが出る…」と困ってしまうことはありませんか？

値がundefinedとなるエラーはconst変数を定義した場所に注意してみましょう。

例えば、何らかの処理で得た値によってtrueかfalseを決めたいと考え、以下のようなコードを作りました。

var cost = 300;
if(cost >= 500){
const key = "true";
}else{
const key = "false";
}

console.log(key);

// 実行結果
console.log(key);
　　 ^
ReferenceError: key is not defined

実行するとconsole.log(key)の部分でエラーが出ましたね。エラー内容を見ると、keyには何も入っていないと表示されています。

原因はkeyが定義されている関数の外にあるからなんですね。「varやletの違い」で解説した通り、constは関数の外では使用できないのでエラーとなるわけです。

対処方法はfunctionを使いましょう。

function costflag(cost){
if(cost >= 500){
return "true";
}else{
return "false";
}
}

var cost = 300;
const flag = costflag(cost);
console.log(flag);

// 実行結果
false

const変数に作成した関数を入れてあげると、再定義できないようにtrueかfalseの値を入れられるようになりましたね。

constはとても便利ですが、上記のコードのように関数と使い分けないと、行き詰ってしまうかもしれないので覚えておきましょう。

注意点3：配列やオブジェクトの中身は変えられる

constに配列やオブジェクトを入れたコードを実行した時、表示が変わっていて「あれ？」となったことはありませんか？

const list = [2,4,6,8,10];
list[0] = 20;
console.log(list);

const obj = {a:10,b:20};
obj.a = 100;
console.log(obj);

// 実行結果
[ 20, 4, 6, 8, 10 ]
{ a: 100, b: 20 }

実行したら表示が変わっていた場合は、上記のコードのように途中で書き換えている可能性があります。

しかし「constって値が変えられないから、中身を変えたらエラーにならないの？」と疑問に思う人もいるかもしれません。

値が変わらないようにconstを使っているわけですから、できればエラーとして表示してほしいところですが、なぜか通ってしまうんですね。

実は、constには欠点があって「再定義はできないけれど、中身は変えられてしまう」のです。

例えば以下のコードはエラーを表示します。

const list = [2,4,6,8,10];
list = [3,6,9];
console.log(list);

エラーが出る原因は2行目で再定義しているからでしたね。

ところが「list[0] = 20;」で記述した場合、再定義ではなく中身を変更しているだけなんです。

つまりconstは配列やオブジェクトを変更させない機能は無いので、頭に入れて気を付けておきましょう。

JavaScript constを学習する方法

constを使いこなせるようにするには日ごろから変数を定義するときにconstを使っていきましょう。

constはvarとは違って、使える部分と使えない部分の変数が存在します。どんな時に使えないのか模索しながらコードを書くことで、自然にconstを使いこなせるようになりますよ。

またJavaScriptの参考書ならconstについての解説や、varやletなどの詳しい説明も記載されています。より深くcountを学習したい場合は参考書を購入するのが良いでしょう。

おすすめの参考書は以下の記事で解説しています。「どんな参考書を買ったらいいの？」と考えているあなたはぜひ目を通してみてくださいね。

まとめ

ここまでconstについて紹介してきましたが、「いまいちconstを使った方がいい理由がわからない…」と感じる人はいるのではないでしょうか？

確かに学習する分には、constは使わなくても変数の値が変わってエラーを起こしてしまうことは少ないかもしれません。しかし使い慣れておくことはとても大事なんですよね。

constはすでに値が決まっていて、後から変更しないような変数に使います。

仕事場でエラーによって費やされる時間を減らすためにもconst変数は今の内から自然に使えるようにしておきましょう。