ES6, 7 で書ける JavaScript

世嘉良 紳2016.12.15 社内勉強会 LT

目次• JavaScript 年表• ES6/ES7 を書いたことがない人のために紹介• 注目して欲しい仕様※ JavaScript にわかなので間違った記述があるかも…

みなさん ES6/ES7 書いてますか？

https://zombiecodekill.files.wordpress.com/2014/07/javascript-the-good-parts-the-definitive-guide.jpg

みなさん ES6/ES7 書いてますか？

https://zombiecodekill.files.wordpress.com/2014/07/javascript-the-good-parts-the-definitive-guide.jpg

ES5 は仕様に対して良いところがこれだけしか…

ES6 までの道のり…• Netscape 社が開発し 1997 年に Ecma International によって標準化された初版が公開• 1999 年 ES3 が公開• 2000 年代 に入り ES4 が検討され始めるが、後方互換生などの問題で意見がまとまらずに公開が見送りになる• 2009 年 ES5 が公開• 2015 年 ES6 が公開• ES7 Proposals (https://tc39.github.io/ecma262/) [ イマココ ]

導入してほしい新機能機能 説明

アロー関数 関数定義の省略記法ブロックスコープ let, const によるブロックスコープの導入

デフォルトパラメーター 関数引数へのデフォルト値の定義レストパラメーター 可変長引数の定義

プロミス 非同期処理用のインターフェースジェネレーター 停止 / 再開可能な関数

これまでの JavaScript

• JavaScript の this は呼び出し元に依存する• コンストラクタ : 呼び出したオブジェクト• メソッド : レシーバオブジェクト• apply/call/bind: 引数のオブジェクト• それ以外 : グローバルオブジェクト

JavaScript 初心者にとって罠でしかない…

•「 => 」キーワードで function を省略することができる•アロー関数がスコープ内の this の値を捕捉する

アロー関数

これまでの JavaScript

• { } を記述しただけでは、スコープとして機能しない• 別ファイルにしてもグローバル変数は共通• 同じ名前の変数が宣言された場合は、スコープの内側でのみ有効になる別の変数になる• 変数を隠匿するためにクロージャーを多用したくなる

JavaScript 初心者にとって罠でしかない…

ブロックスコープ• let: ブロックスコープの局所変数を宣言する• const: 再代入 / 再宣言ができない

ES6 以降は原則 var による宣言は使わない※ 変数の再代入がない限りは基本的に const のみを使用すること

これまでの JavaScript

JavaScript 初心者にとって罠でしかない…

• 引数の 「 undefined 」判定が面倒くさい…• ↓ のコードは「 undefined 」が false 判定されることに依存している

• NULL 値を意図的に使いたい場合の障壁になる• ( undeifned, null, NaN ( 非数 ), 空文字 , 0 など )

デフォルトパラメーター•関数先頭でデフォルト値を設定できるようになる

• 余分な判定処理が減り簡素な関数になる

• 可変長引数としての「 arguments 」オブジェクト• すべての引数にアクセス可能• 仮引数で定義していなくても実引数で渡された引数すべてにアクセスすることができる ( バグになり得る )• 「 arguments 」は配列のようなオブジェクトである

JavaScript 初心者にとって罠でしかない…

これまでの JavaScript

レストパラメーター• シンプルに可変長引数をかける機能

• レストパラメーターは、 Array インスタンスです。• sort 、 map 、 forEach 、 pop のようなメソッドを直接適用できる。

• コールバック関数の第一引数には Error オブジェクトを渡すというルールを用いるケースがる• あくまでコーディングルール

• 「 callback hell 」 / 「死」のピラミッド

これまでの JavaScript

プロミス• 非同期処理を抽象化したオブジェクトとそれを操作するインターフェース。

ジェネレーター• function* 宣言による関数定義内で yield と記述すると、戻り値を得るまで関数の実行を一時停止 / 再開する• 同期風の非同期コードを書くことができる

• プロミスとジェネレーターは共存可能• Promise が返す thenrable のインターフェイスが

yieldable であるという理解• また ジェネレーター内では try/catch 構文が使用可能

• 他言語を書いていた人たちにも分りやすい記述に

プロミスとジェネレーター

ES7 で仕様策定中の機能の紹介

バインドオペレーターproposal-bind-operatorhttps://github.com/tc39/proposal-bind-operator• 「 :: 」キーワードを使って this をバインドする• 「 |> 」 キーワード派閥も…• 指定された引数で既知の関数を呼びだす / オブジェクトからメソッドを抽出したいというモチベーション。

プラベートフィールドproposal-private-fieldshttps://github.com/tc39/proposal-private-fields

プラベートフィールド現状はクラス構文と Symbol (複製不可なプリミティブ値 ) で実現 (?) という記事をよく見掛ける… (※要参考 )

proposal-cancelable-promiseshttps://github.com/tc39/proposal-cancelable-promises中断可能なプロミスを作ろうという提案

キャンセラブルプロミス

キャンセラブルプロミス•容量の大きいファイルを途中でキャンセルしたいとき

https://blog.jxck.io/entries/2016-07-21/fetch-progress-cancel.html

まとめ• 新しい JavaScript は他言語からの文法を取り入れたり、開発者たちの議論によって分かりやすく、　安全なプログラミングができるように進化している！• 取り入れることによるデメリットは少ないと思うのでどんどん書いていきましょう！

余談• stylefmt - css のフォーマッター• https://github.com/morishitter/stylefmt

• Start: 1458, Fork: 63, 17,339 dl/month• Node.js 製• コラボレーターとして地味に頑張ってます ><• 良かったら使ってください… !!!! ( コントリビュートも大歓迎です )

余談 2最近 node.js でなにか作るときに使ってるツール• eslint/eslint

• A fully pluggable tool for identifying and reporting on patterns in JavaScript.

• stylelint/stylelint• A mighty, modern CSS linter

• facebook/flow• Adds static typing to JavaScript to improve developer productivity and

code quality.• flowtype/flow-typed

• A central repository for Flow library definitions• substack/tape

• tap-producing test harness for node and browsers• avajs/ava

• 🚀 Futuristic JavaScript test runner

参考• tc39/ecma262: Status, process, and documents for ECMA262

• https://github.com/tc39/ecma262• 明日には使えなくなる ES7 トーク

• http://azu.github.io/slide/es6talks/• ES6 時代の JavaScript - クックパッド開発者ブログ

• http://techlife.cookpad.com/entry/2015/02/02/094607• ES6 チートシート | プログラミング | POSTD

• http://postd.cc/es6-cheatsheet/#generators• Fetch での Stream を用いたプログレス取得とキャンセル

• https://blog.jxck.io/entries/2016-07-21/fetch-progress-cancel.html