して考えてみるJavaScriptこんにちは、タナカです。寒い季節はラーメンが旨いですね。最近は五行の焦がし味噌ラーメンがお気に入りです。して考えてみる」という内容で発表をさせていただきました。JSの開発環境の移り変わりは激しいもので1年前とはだいぶ状況が変わりました。昨年、僕はCoffeeScript、bower、gruntにて開発をしておりましたがどれもオワコンとなりつつあります・・・。JSのトランスコンパイラーとしては、TypeScriptやDartが注目されていますが、これから何が流行るのか見極めたいところです。CoffeeScriptに慣れてしまった以上、いまさらJSをES5で書く気にはなれません。!!ECMAScript2015(ES2015)ならば、CoffeeScriptで便利だった機能がいくつか取り込まれておりES5と比べればかなり使いやすくなっています!ES2015ならばオワコン化することも無いはずなので、ES2015をES5にトランスコンパイルしてくれるBabelを使いながらしばらく様子を見てみようと思っています。ECMAScript2015(ES2015)とは?ECMAScriptはJavaScriptの標準を定めたものですが、現在のところECMAScript2015(第6版、通称ES6)が最新バージョンです。ClassやPromiseなど、ES5ではトランスコンパイラーやライブラリで実現してきた機能が標準で使えます。残念ながら、IEやAndroidの旧ブラウザでは対応していません。※各ブラウザの対応状況http://kangax.github.io/compat-table/es6/Babelとは?BabelはES2015や、ES2016で書かれたJavaScriptファイルをES5相当にトランスコンパイルしてくれるものです。ES2015の便利な機能を使いつつも、旧ブラウザへも対応できるという大変便利なツールです。ES2015で書くと何が便利なのか?ということで、ES2015で書くと何が便利になるのかまとめてみました。アロー構文=>がfunctionのショートカットとして使えます。アロー構文で書くと、thisが定義したオブジェクトを指すようになりわかりやすいです。CoffeeScriptと同様簡潔に書けます。}};クラスclassが簡潔に書けます。CoffeeScriptと同様extendsも指定できます。文字列に変数を埋め込むことができます。途中に改行を挟むこともできます。こちらもCoffeeScriptとほぼ同様ですね。引数にデフォルト値が指定できます。こちらもCoffeeScriptで便利な機能のひとつでした。配列やオブジェクトの内容を分解して受けることができます。関数の引数に使えば、引数を名前指定で渡せます。変数と定数用の新しい宣言が用意されました。こちらはCoffeeScriptには無かった機能です。letやconstで宣言したものはvarとは違ってブロックスコープとなりますが、Babelではvarに置き換わるので関数スコープのままです。}}Modulesモジュールが使えます。node.jsやcommon.jsのrequireのように書けます。pi));文字列の新メソッドincludes()、repeat()が追加されました。"abcabcabc"配列の新メソッドfill()等の便利なメソッドが追加されました。"c"PromisesPromiseが標準で使えるようになりました。非同期処理でのコールバック地獄を解消してくれます。timeout(200)]);})まとめES2015のアロー構文やクラス等を利用することでコードを簡潔に書けるようになります。他のトランスコンパイル言語と比較すると、機能的には見劣りしてしまいますがES5と比べるとかなり魅力的です。ES2015はトランスコンパイル言語としても十分使えるものではないでしょうか。今回紹介した内容はES2015のごく一部の機能で他にもたくさんの機能があります。Babelの公式サイトにわかりやすくまとめられていますので、ぜひチェックしてみてください。このページのサンプルコードもBabelの公式サイトからお借りしたものです。Design(デザインブログ)はてなブログをはじめよう!uuum-staffさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。