22
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

いまどきJavascript 基本の「き」

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

間違いがあればお気軽にコメントいただければと思います。
主に、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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
22
Help us understand the problem. What are the problem?