JavaScript ES2015 var,let,const 変数宣言の使い方

  • ---

    LINEで送る
  • -

    ブックマーク
  • -

    pocket
  • -

    rss
他言語サイト
en_US en_US
JavaScript image
イラストACの画像をもとに加工しています。

久しぶりにJavaScriptを使うことになって調べたら、変数宣言のバリエーションが増えていました。let, constという使い方があるらしい。

ES2015で策定されたのでもう2年も前です(執筆時点)。やばい相当遅れています。遅まきながら勉強しました。

ECMAScript(エクマスクリプト)

javaScriptの仕様のこと。Ecma International(エクマ・インターナショナル)がjavaScriptの書き方を決めている(仕様の策定・勧告)。

実質的な策定作業はTC39が行い、それの基づいてEcma Internationalが勧告する。勧告されると『ES20**(年代)』という名称がつけられる。

Ecma Internationalは、もともとヨーロッパの電子通信に関する標準化団体なので、javaScriptだけを扱っているわけではない。

ES2015(ES6)

2015年に策定された第6版のこと。javaScriptの従来の書き方から大幅に改善されたので、インターネット上の情報も多い。

ES2015から1年ごとに仕様を勧告することになったので、公式の名称では版数を使うのをやめた。(ES6は昔の言い方の名残り。ほとんどの人が見ないだろう正式なドキュメントには書いてある。)

ES6という呼び方は、変化の過渡期なので許されているだけ。

ES2016

2016年に勧告された仕様。ES7という表現が見られるが、ES2016のほうが分かりやすいのでES6ほど一般的じゃない。

ES5

2015年に大幅な変更が行われる前のjavaScriptの仕様。第5版。2009年に勧告。現在、どんなに古いバージョンのブラウザでも動かすことができるという基準になっている。

javaScriptのプログラムを、トランスパイルすることが(別のバージョンのjavaScriptのプログラムに変換すること)、かんたんにできるようになったので、すべてのブラウザに対応できるjavaScriptの呼び方として使われる。

ESNext

次世代のjavaScriptの仕様のこと。まだ勧告されていなくてTC39で策定中の仕様のことを指す。

しかし、すべてのブラウザとそのバージョンで動かないES2015以降を指して使っていることも多い。

トランスパイルがかんたんにできるので、Reactなどのフレームワークや、Node.jsのプラグイン開発など、ESNextでプログラミングすることが当たり前になっている。

次世代の仕様なので、短くかんたんに書けることも多く、SPA(Single Page Application)などの大規模・複雑な開発で使われる。

 

各ブラウザとそのバージョンが、それぞれの仕様の対応状況を確認することができる。

TC39(Technical Committee 39, 専門委員会39)

javaScriptの仕様の策定を行う専門委員会。Ecma InternationalはいろいろなTCを持っているので番号が振られている(javaScriptの仕様は39)。

作業中の内容や仕様などはGitHubで公開されていて確認できる。

作業は5ステージに分けて行い、すべてのステージが終了するとEcma Internationalが勧告する。

Strawman - Stage0 - たたき台・試案

どのような仕様を導入するか? 策定作業に入るか? を決める。

Proposal - Stage1 - 提案

仕様の策定作業の枠組みを作ったり、問題点の洗い出しを行う。

Draft - Stage2 - ドラフト(下書き・草案)

javaScriptを使ってじっさいに書く。プログラミングの書き方を決める。ドキュメントには『正確に』とあるので、あいまいなことは残さない。

Candidate - Stage3 - 候補

一般の開発者にドラフトを公開してフィードバックする。(お試し期間)

Finished - Stage4 - 完了

ECMAScriptの標準に追加できる準備ができている状態。いつでも勧告できることを表す。

 

各ブラウザは、勧告されるのを待っているわけではなく、独自に先行して導入することもある。その経過は誰でも確認できる

参考:TC39の公式ドキュメント

var いままでの使い方

従来の使い方です。新しい方法が追加されても使うことができます。しかし、あとで説明するlet, constがあるので、もう使う場面はありません。

ぼくは使うことを辞めました。

let 変数のスコープを限定する

いままで、変数の有効範囲の自由さはJavaScriptの特長でしたが、じっさいはバグの温床になっていました。これを解決したのが『let』です。

宣言したスコープ内だけで変数が有効になります。スコープとは、変数の見える範囲のことです。

今まで使ってきたvarに代わるもので、スコープを限定する意味があるので、varではなくletを使うことをおすすめします。

if, for内で宣言すると構文内だけ有効な変数になります。これまでなかった狭いスコープで変数を使うことが可能になりました。

いままで
var a = true
if(a) {
    var b = 'sample';
}
console.log(b); // 'sample'が表示できる。
letを使うと
let a = true
if(a) {
    let b = 'sample';  // ifの中でしか見れない。
}
console.log(b);  // エラーになる

また、varでは変数の二重宣言ができました。

いままで
var a = 'sample';
  .
  .
  .
var a = 'sample2';
console.log(a); // 'sample2'が表示される

でも『let』ではエラーになります。これはプログラミングでは当たり前のことです。『同じことは書かない』がプログラミングの基本なので。

const 定数。値の変更はできない

定数です。一度値を設定したら変更することはできません。DOMオブジェクトや関数を変数に格納するときなどで使います。

constで宣言された変数は値が変更されないことを明示しているので、プログラムソースが読みやすくなります。

いままで
var a = 'sample';

a = 'sample2';  // 変更したくない場合でも変更できるのでバグになりやすい

var func = function() {
    console.log('sample');
}

var func = function() {
    console.log('sample2');
}

func();  // 関数が上書きされる。関数以外でも上書きできるので自由度が高い。
const
const a = 'sample';

a = 'sample2';  // 変数に値を格納できないのでエラーになる

const func = function() {
    console.log('sample');
}

func = function() {
    console.log('sample2');
}  // エラーになる

まとめ

2018年の現在は、varを使うことはないと思っていいです。

いまは、生のJavaScriptを書くことは無くなってきています。最新の書き方で開発して、公開する環境に合わせてトランスパイルをするという流れがあるからです。

どうしても生のJavaScriptを編集しないといけなくても、『昔は、変数宣言にvarを使っていた』程度の覚え方で大丈夫でしょう。

ただし、varはあまりにも自由度が高いので、バグになりやすいということには注意が必要です。

JavaScriptの本
post-cta-image

『自分は向いていない』『やってみたけど挫折した』『プログラマだけどjavaScriptは未経験』『フロントエンドエンジニアを目指したい』など、いろいろなタイプに合わせた書籍を集めました。

どうしてもネットで自分で調べるのが苦手という人におすすめです。

将来的には、書籍を買わずにネット上の公式ドキュメントで情報収集できるようなものを選んでいます。


javaScriptの本4選

SNSでも記事を配信しています。
コメントを残す

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

top
この記事を気に入ったらぜひシェアも!!