1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

React 入門道場 ~Reactを学ぶ上で理解したいES5,ES6~

Posted at

# はじめに

Reactの勉強するを前にES5、ES6の違いについて浅はかであったので今回簡単に纏めることにしました。

# 目次

  • Javascriptの標準仕様について
  • ES6について
  • ES6をES5に変換するBabel
  • まとめ

# Javascriptの標準仕様について

JavaScriptの標準仕様はECMAScriptと呼ばれています。
ECMAScriptはECMA Internationalのもとで標準化されているJavaScriptの仕様となっています。

課題点
標準化以前は、ブラウザごとに言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かったそうです。ECMAScriptが策定されたことにより、ブラウザ間での互換性が向上しました。

現在、大抵のブラウザは、ECMAScript 5.1以上に対応。
ECMAScript 5.1は、略してES5と表記します。

# ES6について

ES6は新しいJavaScriptで、今までのJavaScriptを改善したバージョン。
いわゆる次世代JavaScriptってわけですね!!!

ES6では、以下のような機能が新たに追加されました。

* importとexportによるモジュール構文
* アロー関数
* class構文
* 関数の引数のデフォルトパラメータ
* 分割代入
* 配列展開
* 関数の可変長引数
* 関数のデフォルト引数
* テンプレート文字列

今回は公文についてはご愛嬌とさせて頂きます。
随時、更新していきたいと思います。気になる人は下記のURLから閲覧ください!

JavaScript文法ES6の新機能

ES6をES5に変換するBabel

Babelは、ES6で追加された機能をES5に変換するトランスパイラです。
わかりやすく例えるなら翻訳機を捉えて思って下さい。なぜ、翻訳しないといけない?
それは、現時点ではほとんどのブラウザでサポートされていません。
ここで出てくるのが、ES6形式で書かれたものをES5形式に変換してくれる、Babelといったトランスパイラを用いてブラウザに表示することが出来ます。

# まとめ

現在のjavascriptの標準規格としては2種類。
* ES5:従来のJavascript
* ES6:新しく策定されたJavascript
の2つが存在していることになります。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?