かれこれTypeScript+Jest案件で1週間以上ハマっている。それはおそらく各技術をちゃんと理解せず、雰囲気だけで使っているから。
なので私が今良くわかっていない以下の6つの技術に関して、自分なりに整理してみようと思います。
- JavaScript
- 以下予定
- TypeScript
- webpack
- Node.js
- Jest
- babel
JavaScript(ECMAScript)
私のよく知ってるJavascriptは、ブラウザで動くやつです。index.htmlに直接書いたり、外部ファイルに記述してscriptタグで読み込んだりするやつです。これについて調べてみます。
もともとは1995年に"make web pages alive"というスローガンのもとに作られ、その目論見は見事成功しているように思えます。もともとはLiveScriptという名前だったようです。それが、当時流行っていたJavaに乗っかる形でJavaScriptと改名したとのことで、Javaと全く無関係ではないようです。しかし1997年にはECMAScriptという名前になり汎用言語としての規格が制定され、JavaScriptはその実装の一つとして独自の進化を遂げ、Javaとは何ら関係なくなりました。
ECMAScriptのバージョンについて
2015年以降は、ECMAScript2015 など、西暦に基づいた名前になっています。以下、主なECMAScriptのバージョンについて書いてみます。
ECMAScript1 (1997)
最初のエディションです。
ECMAScript3 (1999)
- 正規表現
try/catch
が追加されました。ES3は全てのブラウザがサポートする最も高いバージョンです。トランスパイラのターゲット言語として指定されているのを見たことがありますが、そういうことだったんですね。
ECMAScript5 (2009)
いわゆるES5です。ES5から追加された機能としては、
"use strict"Array.isArrayやArray.forEachなどの配列周りの関数JSON.parseDate.now()- getterとsetter
- 配列の最後の要素の後の余分なカンマ(←地味に嬉しい)
などがあるようです。だいぶモダンみが増してきました。ES5は全てのモダンなブラウザがサポートする最も高いバージョンです。というのは、IE9が"use strict"に対応していない、というのがあるみたいです。
ECMAScript6 (2015)
いわゆるES6ですね。このバージョンから、バージョン番号は西暦の下1桁+1になっててややこしいです。
letとconst- Promise
- Arrow Functions (
() => {}みたいなやつ） - Class
- デフォルトパラメータ
などが追加され、より関数型言語を意識した形になっています。個人的にはES5->ES6の変化が最も大きく感じます。IE以外は全てサポートしているようです。
ECMAScript7 (2016)
**(exponential operator)
など。ES7をフルサポートするのは Chrome と Opera のみのようです。
ECMAScript8 (2017)
async/await
構文糖衣ではありますが、これがないと生きていけない人もいるのではないでしょうか。
ECMAScript9 (2018)
- rest / spread properties
- 多値をシンプルに受け渡しできる構文。便利。
環境
ECMAScriptそのものは、I/OやDOMについての規定はないようです。そのへんはJavaScriptにおいて規定されているという認識です。また、JavaScriptといってもブラウザとNode.jsでは環境が異なるはずです。そのへんはまた後で詳しく調べる。
JavaScript Engine
一口にブラウザのJavaScriptといっても、その実装はブラウザによってまちまちのようです。
- Chorome: V8
- FireFox: SpiderMonkey
- IE: Chakra
これらが共通でフルサポートしているのがES5で、後述するトランスパイラはより上位のECMAScriptのバージョンをES5まで落とすことでマルチブラウザ対応を可能にします。
Transpiling
先述したES6以降に備わっている素敵な機能は、全ての環境、ブラウザで使えるわけではありません。では単なる絵に描いた餅かというとそうではなく、ES2015以降で頻繁に行われるようになったトランスパイラなるものを使い、ES3などのどのブラウザでもサポートされているようなバージョンでも動くソースに変換します。
コンパイルは高級な言語からより低級な言語に変換する処理と認識していますが、トランスパイルは、同レベルの別の言語、または同一言語のより下位のバージョンに変換する処理といったところでしょうか。コンパイラはないと困るが、トランスパイラはより幸せになるためのもので、必要性はコンパイラほどではないイメージです。機械語を直で書く人もいるようですが…。
バージョン間の差異を埋めるのにPolyfillという手法もあるようですが、これは実行時にAPIなどの機能を補完するもので、根本的な文法の違いを吸収することはできません。いっそソースを書き換えてしまえというのがTranspilingの考え方かと思います。
例えばトランスパイラは、以下のものをES5やES3に変換します
- TypeScript
- CoffeeScript
- ES2015
疲れたので今日はここまで。
TODO: 続きを書く。
参考
https://www.w3schools.com/js/js_versions.asp
https://javascript.info/intro
https://en.wikipedia.org/wiki/ECMAScript