ECMAScriptってなんぞ?

  • このエントリーをはてなブックマークに追加

開発の最前線に居ないと、新しい情報からはどんどんと遠ざかっていきます。
ということは、さて開発しよう!となった時に知らない用語や、知らない記法に遭遇することも出てくるわけです。
そんな最前線から置いて行かれたフロントエンドエンジニア (自分のこと) 向けに、用語を色々とまとめておきます。

どのくらい置いて行かれているのか、なんとなく想像できてしまいますが…
まずは「ECMAScript」の基本的な情報についてまとめたいと思います。

その1:ECMAScript?

JavaScriptやjQueryについて調べていると、いつの間にか「ES5」や「ES6」という言葉に遭遇するようになりました。
さらに調べていくと「ES2015」や「ECMAScript2015」にも遭遇します。
この「ES5」「ES6」「ES2015」「ECMAScript2015」が、ECMAScriptのバージョン表記なわけです。

なぜバージョン表記のパターンが複数あるのか

なんとなく「ES2015」=「ECMAScript2015」は想像できますが、一方で「ES6」=「?」となりがちです。
「ES2015(ES6)」「ES6/ES2015」などのように併記してあるサイトもあるとおり「ES6」=「ES2015」です。

ES6まではバージョン表記が一桁でしたが、毎年更新しようということになり西暦表記に変更されたという経緯があります。

現在は「Living Standard」という形で、バージョン表記がないものが最新となっています。
随時更新というとイメージしやすいでしょうか。
バージョン表記があるものは「ここまでのまとめ」という形になります。

その2:学習するメリットと具体例

新しい言語を学ぶことは、現場で作業する人にとってハードルの高いものです。
その点でECMAScriptは、JavaScriptの知識を更新するもので、新しい言語を学ぶよりハードルが低くなっています。

ECMAScriptは基本的に、変数のスコープや関数の宣言、非同期処理などにおいて、以前のJavaScriptよりもシンプルに考えられるようになっています。

変数宣言

これまでのJavaScriptでは「変数を宣言する=var」で固定されていました。
現在では「const」「let」で宣言をするのが一般的なようです。

Qiitaのとあるページでは「varはすべてconstに置き換え、必要ならletで」ぐらいの書き方をしていましたが、それくらい変数宣言が新しいものに変わっているということです。

スコープの違いについて

constとletはブロックスコープ、varは関数スコープという使い分けになります。
JavaScriptのメリットとして、スコープをあまり気にしないでも良いというメリットがあったように思いますが、逆にちゃんと意識しないと意図していない動作になるという欠点もありました。
その欠点をカバーできる変数宣言がconstとletになります。

関数宣言

関数宣言を例にとると、これまでは以下のような表記をしていました。

function name(引数) {
    本体
}

「アロー関数」と呼ばれる新しい記法を用いると、以下のようになります。

const name = (引数) => {
    本体
};

雑な言い方をすれば「function」って書かなくていいよ。ということになります。

さらに、アロー関数を用いた場合、ひとつ外側の関数にthisのスコープが移るという特徴があります。
関数内のthisがこれまでよりも自由に扱える…ということになるでしょうか。

まだまだ理解しきれていませんので、また細かく書いていきたいと思います。
以下のMDN記事も参考にしてください。

const – JavaScript | MDN
let – JavaScript | MDN
アロー関数 – JavaScript | MDN

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*