今回から自分の勉強も兼ねて、「ECMAScript 2015」について、何回かに分けて書いていこうと思います。


「ECMAScript」とは

ECMAScript(エクマスクリプト)は、JavaScriptの標準であり、Ecma Internationalのもとで標準化手続きなどが行われている。 参照元:wikipedia

簡単に言えば、javascriptの言語仕様が、「ECMAScript」なんですね。

ECMAScript 2015は、2015年6月に発行された新しい言語仕様です。これがECMAScriptの第6版ということもあり、ECMAScript 6(ES6)と呼ばれることもありますが、正確な呼称は「ECMAScript 2015」(ES2015)のようです。

ES2015では多くの新しい仕様が追加され、複雑になりがちなjavascriptを見やすく書けたり、より少ない記述量で書けたりすることができるようになっています。


しかしここで気になるのは、ES2015は言語仕様なので、ブラウザが対応しているのかどうかです。

ブラウザ対応に関しては、ECMAScript 6 compatibility tableで確認できます。
現在ではモダンブラウザではほとんど対応していますが、一部対応していないブラウザもあります。対応していないブラウザにも対応させるためにBabelを使ってコンパイルさせてください

また、Babelをコンパイルさせるにはターミナルなどでコマンドを打つ必要もありますが、他にもGUIコンパイラーを用いて簡単にコンパイルさせることができます。
おすすめはPreprosです。Mac・Windowsどちらも対応しており、Babel以外にも多くの言語をコンパイルできます。



const、let

ES2015から新しく定数、変数を定義するために「const」「let」が追加されました。
constは「定数の定義」、letは「変数の定義」に用います。
const」「let」について1つずつ説明していきます。


const

constは「定数の定義」をするので、一度定義すると後から変更できません。例えば下記のように書くと、2行目はエラーが出ます。


const const_value = 'CONST_VALUE';
const_value = 'CONST_VALUE_CHANGE';  //エラー


let

「let」は変数の定義ができますが、これまでの「var」とはどう違うのでしょうか?
主な違いは「変数の巻き上げ」の挙動です。

巻き上げについては下記を参照ください。

変数の巻き上げ


if( true ){
  var value1 = 'VALUE1';
}

function Func(){
  var value2 = 'VALUE2';
}

console.log(value1);  // 「VALUE1」と表示される
console.log(value2);  //  エラー

「console.log(value1)」が「VALUE1」と表示されることに違和感を感じますが、「var」はfunction以外ではスコープが切られません。(他言語ではifやforでもスコープが切られます)これが変数の巻き上げです。
「変数の巻き上げ」はjavascript特有の挙動です。


letの仕様

letは他言語とスコープの仕様を合わせてあります。したがって、ifやfor内などでletで宣言した場合には、変数の巻き上げが起こらなくなります。
以下はその例です。


if( true ){
  let value1 = 'VALUE1';
}

function Func(){
  let value2 = 'VALUE2';
}

console.log(value1);  //  エラー
console.log(value2);  //  エラー

またfor内部に関しては、setTimeoutなどで順番を取る場合でも正しく順番を取ることができます。
下記がその例です。
iは「var」で宣言した、for内の変数です。それに対して、jは「let」で宣言したfor内の変数です。

See the Pen let,varの比較 by blanks (@blanks-site) on CodePen.


次回は「クラス」について書いていこうと思います。それまでしばらくお待ち下さいませ〜。

第2回 「クラス」について記事を書きました。ぜひ、参考にしてみてください。