フロントエンド周りの用語は流行り廃りが激しいとよく言われますが、
そもそもどんなものがあるのか、どんな特徴があるのかなど迷子になったので、
自分なりに系統立てて理解するためにまとめてみました。
間違いがあればお気軽にコメントいただければと思います。
主に、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://medium.com/japan/2016%E5%B9%B4%E3%81%ABjavascript%E3%82%92%E5%AD%A6%E3%81%B6%E3%81%A8%E3%81%93%E3%82%93%E3%81%AA%E6%84%9F%E3%81%98-b969f5767d7c
参考記事
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