知ってた？ナルホド！
こんにちは。新人コーダーの平原です。
JavaScriptを学び始めて、JavaScriptについての色々な記事を読むようになったのですが、ES2015(ES6)は、ES5と比べ、書き方が大きく異なることに気づきました。
今後はES2015(ES6)で追加された機能・構文が主流化するとのことなので、ES2015(ES6)について理解しておこうと思います。
1. ECMASCriptとは
ECMAScriptは、JavaScriptを国際的なプログラミング言語として提供できるように標準化したものです。
JavaScriptは、WindowsのIE(Internet Explorer)に搭載されて普及されましたが、かつてはブラウザ間の互換性が低く、ブラウザで共通の仕様を作ることが難しかった為、EcmaInternationalが中心となりECMAScriptが開発されました。
2. ES2015(ES6)とは
ES2015(ES6)とは2015年6月に発行された、ECMASCriptの6th Editionです。
ES2015(ES6)から多くの機能や構文が追加され、JavaScriptでのプログラムがより効率よく書きやすくなりました。
3. 対応状況とBabelについて
ES2015(ES6)のブラウザのサポート状況ですが、IE11ではほとんど対応されていません。
『ES2015(ES6)の動作環境調査』↓↓↓
ECMAScript 6 compatibility table
ですが、「Babel(バベル)」というツールを使用することで、ブラウザのサポートを待たずにECMAScript2015(ES6)を使用することができます。
「Babel(バベル)」とは、2014年9月から開発が進められたNode.js製のツールで、次世代の標準機能を使って書かれたJavaScriptを、サポートしていないブラウザでも動くJavaScriptに変換(トランスパイル)してくれます。
「Babel(バベル)」の公式サイトでは、オンラインでコードを変換してくれるサービスもあるのですが、
開発等で使用する場合は、ツールをコマンドラインでインストールして使用した方が効率的ですね。
4. 追加された機能と大きく変わった構文
それでは気になる、ES2015(ES6)で追加された機能・構文の一部分についてご紹介します。
- letとconst
- letは「{}（ブラケット）」内でのブロックスコープが有効になり、constはvarでの変数名の重複使用などで値が書き換わるリスクを防ぎます。
- アロー関数
- 「=>（アロー）」を使って、function式より短い構文で同様の内容を記述することができます。
- 関数のデフォルト引数
- 関数の引数に指定がなかった場合に、予め設定した値を入れることができます。
- 関数の可変長引数
- 数に限りなく、複数の引数(配列)を一度に渡すことができます。
- テンプレートリテラル
- 「バッククォート(“)」で囲むことによって「\n」を使用しなくても改行が可能になりました。
- for〜of文
- 配列から1要素ずつ順番に取り出して、繰り返し処理をすることができます。
- 分割代入
- 一度に複数の変数に、複数の値を代入できます。
- class構文
- 「new」を使わない関数の呼び出しができることで起こっていた、グローバル変数の書き換えを防ぎます。
- Arrayによる配列展開
- 「…」で配列を展開し、引数や配列の初期化処理内で利用できます。
5. まとめ
ES2015(ES6)では、様々な便利な機能・構文が追加され、それを使用する為のコンパイラツールが既にできていることがわかりました。
私のように、JavaScriptを学び始めて間もない方がES2015(ES6)の仕様に興味を持つきっかけになればと思います！
参考サイト :
