クックパッド開発者ブログスマートフォン用の表示で見るクックパッド開発者ブログ2015-02-02ES6時代のJavaScriptこんにちは会員事業部の丸山@h13i32maruです。最近のWebフロントエンドの変化は非常に激しく、ちょっと目を離した間にどんどん新しいものが出てきますよね。そんな激しい変化の一つとしてES6という次期JavaScriptの仕様があります。Rev31が公開されています。JavaScriptはECMAScript(ECMA262)という仕様をもとに実装されています。EditionをもとにしたJavaScript実行エンジンを搭載しています。Editionが現在策定中で、略称としてES6という名前がよく使われます。今回は、他の言語にはあってJavaScriptにも欲しいなと思っていた機能や、JavaScriptでよく頻出するパターンを統一的に書ける機能を中心に紹介していきます。ClassJavaScriptは「プロトタイプベースのOOP」と呼ばれている通り、JavaやRubyなどの「クラスベースのOOP」とは少し毛色が違います。プロトタイプベースの機能を効果的に使うということはこれまで少なかったように思います。擬似的なクラス機能を実装したり、クラスを実現するためのライブラリを使ってプログラムを書くことが多いはずです。これはnpmでclassで検索するとたくさんのパッケージがヒットすることからもわかると思います。そこでES6ではクラス機能が導入され、クラスを簡単に扱えるようになりました。ArgumentsJavaScriptで関数のデフォルト引数や可変長引数を使いたいと思っても言語には直接的な方法がなかったため、||を使ったおまじない的な方法やargumentsを使ったメタプログラミング的な方法を取ってきました。そこでES6では関数の仮引数の宣言方法が強化され、自然に書くことができるようになりました。これは後でプログラムを読むときに、シグネチャだけを見ればその関数が期待する引数をある程度わかるようになるという効果もあります。10実はこのデフォルト引数や可変長引数は関数の仮引数部だけで使えるというわけではなく、変数の代入処理全般が強化されたうちの一部分になります。6にてサンプル付きで様々なパターンが紹介されています。FunctionJavaScriptではイベント駆動の処理をよく書きます。DOMがクリックされたら何か処理する、XHRのリクエストが完了したら何か処理をする場合などです。このような処理をJavaScriptで実装するには、コールバック関数やイベントリスナと呼ばれるものを対象のオブジェクト(DOMやXHR)に設定します。このコールバック関数を登録する時点でのthisにコールバック関数内からアクセスしたくなる場面がよくありますが、これまではクロージャを使ってthisを保存しておいたり、Function.prototype.bindを使ってthisを束縛したりしていました。Functionと呼ばれる新たな関数定義|式が導入され、このthisに対する煩わしさを解消しています。}};ClickCounter.start('body');PromiseこれまでXHRなどの非同期処理は開始時にコールバック関数を設定して、非同期処理が終わったらそのコールバック関数が呼び出されるというのが一般的ですが、様々なコールバック関数の設定方法がありました。非同期処理の関数にコールバック関数を引数として渡したり(setTimeoutやsetInterval)、非同期処理を行うオブジェクトにコールバック関数を登録したり(XHRやWebWorker)、非同期処理の戻り値にコールバック関数を登録したり(IndexedDB)などがあります。このように様々な方法があるため、使う側としてはそれぞれの方法を使い分ける必要があります。そこでES6ではPromiseという非同期処理を統一的に扱う方法が言語として提供されるようになりました。使い方は、非同期処理を行う関数はPromiseを戻り値として返し、呼び出し側はPromiseにコールバック関数を登録するというものです。console.log('wake!');});また非同期処理では例外処理が問題になります。単純にtry-catchで囲っても非同期で例外が起きると補足できません。そこでPromiseでは非同期処理の例外処理を統一的に行える方法も提供しています。Promiseの本が大変参考になります。Generator最後にGeneratorについて紹介します。ここまではすでにJavaScriptに存在するけど使いにくかったり、統一されていなかったものを改善したという機能でしたが、このGeneratorというのは全く新しい概念としてES6に取り込まれています*1。Generatorというのは関数処理内の任意の場所で処理を中断/再開できる仕組みを提供するものです。この仕組は一般的にコルーチン(co-rutine)と呼ばれています。コルーチンを使うと無限リストやイテレータなどを実装することができます。このGeneratorとPromiseを組み合わせることで非同期処理を同期処理のように直列に書くことができるようになります。基本的な考え方は「非同期処理が開始されたら処理を中断し、非同期処理が完了したら処理を再開し後続の処理を実行してく」というものです。先ほどのPromiseの項で紹介したサンプルコードをGeneratorを使って直列に書いてみます。以下のサンプルコードではGeneratorとPromiseを使って非同期処理を直列に書くことができるcoというライブラリを使っています。console.log('wake!');});今回はcoを使って解説しましたが、coを使わずに非同期処理を直列に書く仕組みとしてasync/awaitという機能がES7に提案されています*2。Generatorを使ってasync/awaitを実装するメモとして解説しているので興味のある方は御覧ください。まとめ今回はJavaScriptで歯痒い思いをしていた所が、ES6でどのように変わるのかを中心に紹介しました。Stringなどの様々な機能が追加されています。現時点ではES6で書いたコードをそのままブラウザやnodeで実行するのは難しい状況ですが、ES6をES5にトランスパイルするツールとしてtraceur-compilerや6to5があるのでお手軽に試してみることができます。tableが参考になります。用いてシュッと構築するこんにちは。...2016-08-19「プログラミングElixir」から分散系の世界へ踏み込もうテストエンジニアしてます、技術部の松尾(@Kazu_cocoa)です。使ったセキュリティログ検索基盤の構築サービス特性にあった検索システムの設計戦略クックパッド採用説明会「クックパッドはサービスの作り手を採用したいんです。/*}*/スターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。