もうES6 (ES2015) でいいんじゃないか

個人プロジェクトは ES6 で書いている

ブログの頻度が落ちているので、継続のための雑さな記事を醸し出す時期。

以前に es6-Kameita紹介したときの繰り返しですが、Babel (旧名 6to5) の登場から個人プロジェクトは ECMAScript 6 で書くようにしています。仕事でも新しい開発がある予定なので、そこでもきっと ES6 を使うことでしょう。

ということで「もう ES6 でいいんじゃないか」という気持ちを書きます。

厳密には、ES6トランスパイラを使っていけばいいんじゃないか、という話

仕様周りは(きっと)安定してきている

世間的の大多数的には、ES6とES7の境界すらハッキリしていないであろう状況ではありますが、ES6自体は2015年中の勧告を目標に進んでいることから、それなりに安定してきています。

モジュール周りはちょっと怪しい気もしますが(動的ロード周りの詳細はES6の外に移されたんですっけ?)、基本的な構文や機能についてはそうそう変化がないことが期待できます。フロントエンドにとっての隣人である node/iojs でも ES6 サポートが進んでいるわけですし、ガンガン使いたいところです。

地味に便利

乱暴な言い方をすると ES6 の大半は糖衣構文的なものの追加です。今まで出来なかったことが出来るようになるわけではないものの「Polyfill で安全に再現できること」と「一定以上の便利さ」が保証されてるとも言えます。

// Template Strings
var str = 'foo' + bar + 'baz'; // ES5
var str = `foo${bar}baz`; // ES6

// Arrow function
list.map(function(v) { return v * 2; }); // ES5
list.map((v) => v * 2); // ES6

// Destructuring Array
var a = array[0], b = array[1], c = array[2]; // ES5
var [a, b, c] = array; // ES6

// Destructuring Object
var foo = object.foo, bar = object.bar, baz = object.baz; // ES5
var {foo, bar, baz} = {foo: 1, bar: 1, baz: 1}; // ES6

反面、Generator や Proxy のように Polyfill 処理のカロリーが高そうなものは、さすがにちょっと避けている感じです。

いくらか新鮮な気持ちでコーディングできる

ES6には多数の糖衣構文が追加されていることから、普通にコードを書いていても便利ですし、これまでの貧相なJavaScript と比べればいくらか変化があるので新鮮な気持ちで書くことができます。

コードを書くひとにとって「新鮮な気持ち」というのはバカにできたものではなくて、それだけで生産性が上がる現場もあることでしょう。(無闇に新しいもの入れるんじゃねぇ問題とかは、各位・各現場における責任範囲としても)

懸念ってほどではない懸念

つまり言うほど気にしていないことですが。

Babel (previously: 6to5) の勢いありすぎ問題

自分が使い始めた 6to5 当時はアーリアダプターなつもりでしたが、勢いがありすぎて今や Babel と名前を変えつつバージョンも 4.0.0 に上がっています。

とはいえ多少バージョン低くても代表的なES6の機能は利用できますし、最初から Browserify や Gulp などの周辺ツールが揃っていたこともあり、バージョン上げるのだってさほど手間ではありません。

まあ、なんか気にすることじゃないと思います。

トランスパイラーめんどくさくない?

なくなくないです。

JavaScript であれば CoffeeScript や JSX Harmony があり、CSS であれば Sass や PostCSS があります。中間処理が面倒とかは今更っぽいです。

babel は React の JSX もなぜか面倒みてくれるので、React ユーザーであれば相性良いです

ES6 が普及したら捨てられるの?

ES7〜 もあるので実質無理だと思います。トランスパイラー生活を楽しみましょう。

使おう

自分が仕事で使いやすくするための話でした。最近では browserify + babel の組み合わせが便利だと思います。

ES6 modules が普及するとか、何らかの理由で browserify がオワコンになったとしても ES6 modules で書いておけば良いかとか、どうとでも置換できるだろうとか色々ありますが、プロダクトのライフサイクルのほうが browserify より短いので、あんまり気にしてないです。


Author

ahomuAyumu Sato

KINTOテクノロジーズ株式会社

Web 技術、組織開発、趣味など雑多なブログ。技術の話題は zenn、ご飯の話題はしずかなインターネットにも分散して投稿しています。

Bio: aho.mu
X: @ahomu
Zenn: ahomu
GitHub: ahomu
Sizu: ahomu

Related

Latest

Archives

Tags

Search