フロントエンド周りの用語は流行り廃りが激しいとよく言われますが、
そもそもどんなものがあるのか、どんな特徴があるのかなど迷子になったので、
自分なりに系統立てて理解するためにまとめてみました。

間違いがあればお気軽にコメントいただければと思います。
主に、Javascript周りをまとめていきます。

Javascriptの仕様

Javascriptは歴史的にブラウザによる独自の拡張などが起きたため、

標準化のため、ECMAScriptが開発されました。

公開日	バージョン
2009年12月	5
2011年6月	5.1
2015年6月	6(2015)
2016年6月	2016
2017年6月	2017
策定中	2018

時々見かけるES5 やES6 というのはECMAScriptのバージョンで、
上記の様に、バージョン6 (ES6) からバージョンに年号をつけることに変えたため、
ES6 だけ、表記が ES6（ES2015)などと併記なっていることがあります。

ブラウザのレンダリングとJavascriptエンジン

前提として、HTMLやCSSはブラウザのレンダリングエンジンが処理をし、
JavascriptはJavascriptエンジンが解釈して実行します。
ブラウザごとの組み合わせは以下のようになっています。

ブラウザ	レンダリングエンジン	Javascriptエンジン
Chrome	旧Webkit→Blink	V8
Safari	WebKit	JavaScriptCore
Firefox	Gecko	SpiderMonkey
IE	Trident	Chakra
Edge	EdgeHTML	Chakra

各エンジンごとに、若干解釈の仕方が違うため、
この差異を埋めるために、書き方を工夫する必要があります。

差異を埋めるためのトランスパイラ

この差異を一つ一つ勉強しなくても良いように、
Javascriptのトランスパイラを利用し、ブラウザが解釈できる
生のJavascriptを生成します。
(トランスパイラとはプログラミング言語で書かれたプログラムのソースコードを、
別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラ)

前述のES6等の新しい仕様を安全に使うために
Babel を利用します。

Javascriptを生成できるスクリプト言語

素のJavascriptでは、クラスのサポートなどが特に無く、様々な問題を抱えていたため(ES6以前)
その問題を解消するために、JavaScriptの代替(alternative)ということで「altJS」と呼ばれる言語が生まれました。

altJs 言語名	特徴
TypeScript	静的型付け機能
CoffeeScript	シンプルでrubyライク
JSX (Dena社製)	静的型付け機能　速い

シンタックスとしてのJSX

altJSとしてのJSXとは別に、シンタックス(記法)としてJSXがあり、
JavaScriptを拡張した言語でReactに使われています。
これも同様に、JSXをJavascriptに変換する必要があります。

長くなったので基本の「ほ」みたいなのを後でまとめます。

モジュールバンドラ
タスクランナー
Package Manager
Frameworkなど。

参考記事

https://ja.wikipedia.org/wiki/ECMAScript
Roadmap to becoming a web developer in 2018
https://github.com/kamranahmedse/developer-roadmap
https://qiita.com/tuno-tky/items/74ca595a9232bcbcd727
https://qiita.com/kawax/items/d960a7d92b85dcd6e8c4
「JSX」って名前のものが色々あって混乱する
https://qiita.com/ConquestArrow/items/29fc478f48862a4d14fb
今更ながらブラウザの違いが気になったので、Chrome・Safari・Firefox・IEのエンジンを調べてみた
https://liginc.co.jp/348669

いまどきJavascript 基本の「き」