ECMAScript6をまるっと学ぶ。重要用語とか、仕様策定の進め方とか、新機能とか。ECMAScript6をまるっと学ぶ。重要用語とか、仕様策定の進め方とか、新機能とか。Tweetこんにちは、@yoheiMuneです。ECMAScript6について断片的には知っているけど、なんだかぼやっとしている。そんな自分の状態を解消したいと思い、ECMAScript6を全体的に学べるブログを書きました。ECMAScript6で使われている用語、仕様策定の進め方、そして新規機能を議題としています。このブログを読んで頂いた方にも、ECMAScript6についての全体的な知識を提供できたらいいなと思ってます。それでは始まりですー。https://flic.kr/p/baAtKT目次ECMAScript6とはECMAScript6とは、現在広く使われているECMAScript5の次期バージョンです。ECMAScript6(以下、ES6)では、let、Map、Proxyといった各種ブログで取り上げられる新機能も含めた、仕様策定が行われています。ECMAScript6のコードネームは、Harmony(ハーモニー)です。Rev23」などの表現を見かけるかもしれませんが、それらはES6を意味しています。Harmonyという言葉はよく使われるので、覚えておくと英語の文献を読むときなどにかなり役立つと思います。Harmonyについては、harmony:harmony(英語)で概要が説明されており、何を目指しているのか、議論するテーマな何なのか、などを知ることができます。仕様策定の手順ES6の仕様策定手順は、正式にはECMAScript7から準拠するらしいTC39プロセスに則って、仕様策定が進んでいるようです。以下に、抜粋した内容を記載します。Strawman仕様検討するための議題を集めるような場所です。ES6のstrawmanはstrawman:oldes6にありますが、ここで挙がった議題の多くは、Proposalには進んでいないようです。現在最新のStrawmanも存在します(strawman:strawman)。これはES6以降の仕様の検討材料となるようです。ProposalProposalではStrawmanから上がってきた追加点を具体化するフェーズです。新機能や問題の輪郭を正確に捉える説明を作成したり、簡単なデモを作ってみたりします。キーとなるアルゴリズムの検討や、分野横断的な検討も行われます。そのような活動に時間を費やすことで、次のDraftへ移ります。ES6のProposalはharmony:proposalsにあり、ここに定義された機能のほとんどは、Draftとなっているようです。Draft(執筆時点では、このフェーズ)正式な仕様定義を行う形式を用いて、正確にシンタックスとセマンティクスの定義を行うフェーズです。このフェーズで、次期バージョンの最初の仕様書が作成されます。全ての主要な機能についてシンタックス、セマンティクス、APIの定義が行われますが、一部TODOや編集上の問題点も存在する状態となります。ES6のDraftはharmony:specification_draftsにあり、最新の仕様書や、過去の履歴などを確認することができます。CandidateDraftで策定した仕様をもとに実際に実装が行われ、そのフィードバックから仕様を洗練させていきます。この段階で完全な仕様書が作成され、指定されたレビュアーやECMAScript編集者がそれを署名して認めます。Finished追加される仕様が、正式にECMAScriptに適用されることが示唆されます。test262に今回追加される機能のテストが記載され、それらのテストをパスする2つの準拠した実装が行われます。直近の仕様書の更新に検討してきた内容が追加されます。Strawman、Proposal、Draftという単語も、ECMAScript6に関する記事では良く出てくるので、覚えておくと良いかもしれません。執筆時の最新Draftは、2014/4/5のリビジョン23とのこと。これからが楽しみです。tableで、実装状況を確認する事が出来ます(以下、キャプチャ)。Firefoxの実装状況はいい感じですが、他はまだまだ赤い部分が多いですね。このサポート状況を個人でメンテナンスされているなんてすごい!大感謝です。ECMAScript6の新機能ECMAScript6の新機能は、harmony:proposalに記載された内容です。本当はここに具体的な内容でブログを書こうと思ったのですが、調べれば調べるほど良い記事が見つかったので、それらの記事紹介をしたいと思います。Github(英語)個人的には、これが一番オススメです。ES6新機能を用いた実装を、実際のコードと共に解説しています。2014年3月と最近できたレポジトリで、既に1300のStarが付いています。近いうちに日本語訳できればなぁと思ってます。気になる!夢がある!ECMAScript6についてガッツリ調べてみた。OpenWeb白石俊平さんが昨年(2013年1月)に書かれた記事。仕様に関するあれこれ、実装状況、ES6を試すツール/ライブラリ、そしてES6の新機能と、充実したラインナップです。MapやSetやProxyといった内容は省かれているため、他の記事も合わせて読むと良さそうです。すばらしい纏めに感謝です。Trueというブログを書かれ、その記事をPublickeyの新野さんが翻訳したものです。ガーベッジコレクションのことなど、英文も合わせて読むとES6に対する知識がより深まると思います。Slideshare(英語)147ページという大集で、ES6の機能を説明しているスライドシェアです。YUIのプレゼンテーションの動画。英語で48分で、JSのお勉強+英語のお勉強ができます。ネイティブの英語は難しいー。ECMAScript6を実際に使ってみるには実際に使ってみるには、現時点では、ChromeかFirefoxを利用する必要があります。Chromeの場合には、chrome://flagsにアクセスし、「JavaScriptの試験運用機能を有効にする」を有効にする必要があります。GithubというES6で書いたコードをいい感じに動かしてくれるシムが存在します。その他情報ソースECMAScript6について、他にもいくつか記事やまとめ内容がありましたので、コチラに記載します。気になったものがあれば、読んでみてください。サポートFirefoxのES6対応状況表ですが、ES6の機能を一覧で見れるという点もいいなと思います。ECMAScript6仕様書(HTML版)harmony:specification_draftsの内容を、HTMLで表現しているものです(必ずしも最新とは限らないですが、PDFよりも読みやすかったり)。WikipediaECMAScript5以前の話とか歴史とかが書かれていて、読んでいて面白かったです。最後に以上、ECMAScript6の内容でした。調べてれば調べるほどたくさんの情報に出会いましたが、このような形でまとめることができてよかったです。Harmony、Strawman、Propsal、Draft、TC39、test262といったECMAScript関連の文言も学ぶことができ、ECMAScript6の今後の動向がすごく追いやすくなったのではないでしょうか。ES6の新機能についてもサンプルコードベースで学ぶことができ、知識を深めることができました。ECMAScript6は、たくさんの企業や個人によって仕様策定している状況です。JavaScriptの将来が楽しみです。最後までご覧頂きましてありがとうございました。UIWebViewでHTML,CSS,JSなどをキャッシュさせない方法もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。Munesada)です。世の中をさらに便利に面白くをモットーにWeb界隈で活動しています。Now機械学習/AI/自然言語処理のホットな"今"をお届けするキュレーションメディアです。