こんにちは!
タダケン(@tadaken3)です。
Reactの開発を始める上で大変だと感じるのが、babel、ES6、webpackといった用語・ツールが多いことでした。
前回は、「create-react-app」を使ったので、このあたりを意識せず、開発環境を構築したのですが、実際に開発を進めたりコードを読む上で、こういった用語の意味やツールを使う背景を理解しておくにこしたことはありません。
そこで、今回はReactを学ぶ上で理解しておきたいJavascriptの歴史を簡単にまとめてみました。
Javacriptの標準仕様について
JavaScriptの標準仕様はECMAScriptと呼ばれています。国際団体EcmaインターナショナルによってJavaScriptの中核的な仕様がECMAScriptとして標準化されています。
標準化される以前は、ブラウザごとに言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かったそうです。ECMAScriptが策定されたことにより、ブラウザ間での互換性が向上しました。
現在、大抵のブラウザは、ECMAScript 5.1以上に対応しています。ECMAScript 5.1は、略してES5と表記します。
そして、書店にあるJavascriptの入門書はES5に基づいて書かれていることが多いです。
イマドキのJavacript(ES6)
Javascriptの標準仕様なのですが、今までよりも大幅に進化したECMASCript 6th Editionが2015年に策定されました。ECMAScript 6th editionの6を取ってES6と呼ばれていましたが、2015年に標準化されたため正式名称はES2015になりました。
ES6(ES2015)では、以下のような機能が新たに追加されました。
- let constキーワードによる変数宣言
- class構文
- 関数の引数のデフォルトパラメータ（Default Parameters）
- アロー関数（Arrow Functions）
- 分割代入（Destructing Assignment）
- 配列展開（Array Spread）
- 関数の可変長引数（Rest Parameters）
- 関数のデフォルト引数
- テンプレート文字列（Template Strings）
- importとexportによるモジュール構文（Module）
簡単にまとめますと現在のjavascriptの標準規格としては
- ES5：従来のJavascript
- ES6(ES2015)：新しく策定されたイマドキのJavascript
の2つが存在していることになります。
ES5とES6の違いは以下の記事などを参考にしてみてください。
そして、ReactではES6にそって、開発を進めていくことが推奨されています。
ES6をES5に変換するBabel
Reactは基本的にES6で開発を進めていくことになるのですが、ここでひとつ疑問が生じます。新しく策定されたES6は機能が追加されてコードが書きやすくなったのですが、ブラウザの対応状況はどうなっているのか？ということです。
2017年現在、主要なPC/MacのブラウザはES6に対応しています。一方、スマホ用のブラウザでは、ES6が限定的にしかサポートされていなかったりもします。
現在のインターネットの利用状況を考えると、スマホなどモバイル端末を無視することはできません。
ES6で書かれたJavascriptをES5に変換してしまうツールが登場します。これがBabelというツールです。1
ES6でかかれたReactのコードをES5に変換して、古いブラウザで使えるようにしようというのがイマドキのフロントエンドのお作法です。
まとめ
今回は、Reactを使う上で、理解しておきたいJavascriptの歴史を簡単にまとめました。重要なポイントは以下の点です。
- JavaScriptの標準仕様はECMAScriptで定められている
- ほんとどのブラウザが対応しているES5と2015年に新しく策定されたES6（ES2015）がある
- ReactはES6で開発することが推奨されている
- 現存するブラウザに対応するため、BabelをつかってES6で書いたコードをES5に変換する
次回もReactに関して学んだことをまとめていきたいと思います。
読者登録をお願いします
本ブログではプログラミングについての記事を公開しています。よろしければ読者登録していただけると更新の励みになります。ぜひ一緒にプログラミングを学びましょう。
