JavaScriptで書く「var,let,const」の違いと使い分け方法

JavaScriptにおけるvar、let、constの違い・使い分けについて、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

本記事では、テキストエディタのmiを使っているものの、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発できます。

目次

• var、let、constとは
• let、constは新しい記法
• var、 let、constの違い
• var、let、constの使い分け
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

 

var、let、constとは

JavaScriptでは、変数や定数（以下、まとめて「変数」と表記します）を使う際、変数名を宣言することが推奨されています。

var、let、constとはすべてJavaScriptで変数を宣言する際に使うキーワードです。

 

たとえば、以下のように記述することで変数を宣言できます。

var techacademy = 'テックアカデミー';
let techacademy = 'テックアカデミー';
const techacademy = 'テックアカデミー';

 

let、constは新しい記法

3つの宣言キーワード内のletとconstは、ECMAScript2015から採用された宣言方法のキーワードです。

ECMAScript2015（エクマスクリプト）とは、JavaScriptの標準仕様です。

現在では、国際団体で標準化されたうえでGoogle Chrome や Internet Explorer 11以降、ブラウザで広く採用されています。

導入から5年以上が経過しているため（本記事執筆時点）、開発現場にはすでに広く浸透している記法です。

 

[PR] コーディングで副業する方法とは

var、 let、constの違い

変数宣言の記述として使われる3つの要素の違いについてみていきましょう。

 

違いその1：再代入、再宣言が可能か

再代入は一度宣言した変数に対し、値を再び代入することです。

再宣言は一度宣言した変数の名前をキーワードごと丸ごと宣言しなおして、上書きすることをさします。

以下で詳細をみていきます。

 

再代入

varを用いて再代入をすると以下のような記述が可能です。

var techacademy = '代入1回目';
//注意：再代入する際は、varのキーワードを書いてはいけない
techacademy = '代入2回目'

 

letでも記述方法は同様です。

let techacademy = '代入1回目';
techacademy = '代入2回目'

 

しかし、constだけは再代入をしようとするとエラーになります。

const techacademy = '代入1回目';
techacademy = '代入2回目' //エラーとなり実行できない

constのみ再代入ができないという仕様は、本記事の中でも非常に重要なポイントです。

再代入をできるだけ少なくすることで変数の中身が明確になり、見通しが良く読みやすいコードを実装できます。

最近の開発現場では再代入が必要な場合を除いて、できるだけconstを使いましょう。

 

再宣言

宣言の上書きを行うため、JavaScriptで再宣言をしてしまうと予期せぬバグを招きます。

コードの読みやすさを低下させるため、通常では避けられています。

 

var、let、constの中で再宣言が可能なのはvarのみです。

//一度宣言した後に、、、
var techacademy = '宣言1回目';
//再度同じ変数名で宣言しなおせる
var techacademy = '宣言2回目'

let、constで同じことをしようとするとエラーが出るため、再宣言を予防することができます。

この点はlet、constを使うひとつのメリットといえるでしょう。

 

違いその2：スコープの違い

スコープとは、簡単にいうと「変数の有効範囲」です。

宣言した変数はコード内のどこでも使えるわけではなく、このスコープによって使える範囲が定められています。

 

varは関数スコープ

varはlet、constに比べて広いスコープを持っています。

名前の通り、ある関数内でvarを用いて宣言した変数は、その関数をどこからでも呼び出すことが可能です。

function test() {
  if (true) {
    //条件式の中で宣言
    var x = 1;
  }

  console.log(x) // 条件式の外で呼び出しても、関数内なので1が表示される
}

let, constはブロックスコープ

ブロックとは、{}で括られた処理のことです。

let、constを使うと、同じ関数内であってもブロックの外側からは変数を呼び出せません。

function test() {
  //if文の{}が1つのブロックなので、
  if (true) {
    //条件式の中で宣言すると
    let x = 1;
    const y = 2;
  }

  console.log(x) //ブロックの外側なのでundefined(未定義)となる
  console.log(y) //constを使った場合も同様にundefinedとなる
};

スコープが異なる場合

基本的にはより狭いスコープではその変数がどこから来たものなのか、どう使われているのかが明確になり、バグを起こしづらいコードを記述可能です。

したがって、スコープでもlet, constを使う方が望ましいといえるでしょう。

 

var、let、constの使い分け

JavaScriptの言語仕様という観点から、var、let、constの違いを説明してきました。

大きな違いは再代入・再宣言ができるかどうか、スコープの違いの部分です。

そして、本記事のまとめとして、3つのキーワードの実践的な使い分けについて解説をします。

 

constを基本的に使う

結論から述べるとconstを使える時は常に使うことがベストです。

再宣言、再代入のどちらもできないことに加えて、スコープも狭いconstは最も制約が多いからこそ、意図しない実装を防ぐ = 安全なキーワードといえます。

迷った場合はconstと記述し、問題が起きるようであれば見直すという流れでコードを記述しましょう。

 

letはconstを使えないときに使う

基本はconstを使うのが望ましいものの、letを使う必要がでてくる場面もあります。

たとえば、繰り返し行われる処理に対して、合計で何回行ったかカウントを取りたい場合は、letの持つ再代入可能という仕様を活用しましょう。

let totalClicked = 0;

//ページをクリックするたびに行われる処理
window.addEventListener('click', () => {
  //++を使うと、現在の値に1足した数を再代入できる
  totalClicked++;
  console.log(totalClicked); //5回クリック済みであれば、5と表示される
})

上記のような記述をしておけば、ページをクリックするごとにtotalClicked変数の値が1ずつ増えていく（ここが再代入）ため、何回クリックしたのかという情報を保持しておくことができます。

変数の中身を更新する必要がある場合には、letを使いましょう。

 

varは最低限の理解でも問題ない

3つのキーワードの中で最も古株のvarを使うべきケースはほぼなくなってしまいました。

しかし、ネット上でコードを解説している記事にはまだまだvarを使ったものが多いため、それらの記事を読む場合はvarの仕様を把握できます。

 

執筆してくれたメンター

中本賢吾（なかもとけんご） アジマッチ有限会社　代表取締役社長開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。小学生がオリジナルAndroidアプリをGoogle Playでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースなど、ボランティアプログラミング教育活動行っている。

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！