tchikuba's blog

クリエイティブが輝ける組織をエンジニアリングする

「ECMAScript6勉強会」HappyHalloween JS 祭！！に参加してきました！

2015年10月31日(土)に行われた「ECMAScript6勉強会」HappyHalloween JS 祭！！に参加してきました！ ハロウィンということで仮装して参加すると参加費が半額になるというちょっと変わったイベントでしたｗ

※リアルタイム更新してました！

『Good evening, ES6』byよしこ氏 @yoshiko_pg

  • 発表スライド
  • var –> constで変数の上書き禁止が可能に
  • Template Strings
  • 関数のDefault Parametersが使えるように
  • Rest Parametersで…argsで引数がarrayで取れるように
  • Spread operator(スプレッド演算子)でapplyメソッド使用せずに配列を展開出来るように
  • yoshiko氏の年齢がサンプルコードで暴露されてる（笑）
  • Destructuringで変数の入れ替えの為のtmp変数が不要に
  • Effective ES6(slideshareのスライドがオススメ)
  • ES6をES5に変換するBabelを使うとES6で書くことが出来る
  • Scratch JS(chrome拡張)入れるとES6をコンソール上で試せる
  • gulpfileをv3.9.0以上ならES6で書ける

『Promises』by矢倉 眞隆氏 @myakura

  • 発表の様子
  • 非同期処理について洗濯機とかお風呂とかの例
  • JSでの非同期処理だとコールバックヘルに陥りがち
  • thenで非同期処理を実行することが可能。メソッドチェーンで繋げることが出来る。
  • Async functionでコールバックパターンから開放される方針。try,catchで書ける。MS EdgeやFirefoxで実装される予定。

『Function and Class』by川田 寛氏 @_furoshiki

  • 発表の様子
  • Arrow Function
    • 朝起きたらクリックイベント書きたくなる（笑）CoffeeScriptであるやつ(–>, =>)
    • function,selfを書かなくて済むようになる
    • 引数は括弧を省略可能
  • ES6クラス
    • ES5まではclassなのにfunctionだしprototypeとか謎の宣言が必要だったがES6からclassが使えるように
    • extendsも使えるように

『ブラウザで今すぐES6を使おう』by林 優一氏 @frontainer

  • LIGのCTOやってる人
  • ES2015のブラウザ実装状況はIE10で10%,Chromeで65%程度
  • WebPack
    • Module Bundler require();したものの依存関係を解決してまとめる
    • webpackコマンドで1つのJSとして合体して出力してくれる
    • webpack.config.jsで設定を定義しておくとwebpackコマンドのみでいける
  • Browserify?
  • Loader
    • 読み込んだファイルに何かしらの処理をさせる
    • html-loader
    • babel-loader
  • babel-runtime
    • ファイルサイズに注意だが使った分だけ増える
  • frontplate
    • gulp + webpack + babelをまとめたやつを林さんが公開

『Years with JavaScript.Next』by dynamis氏 @dynamitter

  • 発表の様子
  • FF1.0の日本語担当で死んだ思い出
  • ECMAScript4はYahoo!とMSの猛烈な反対に合い陽の目を見ず
  • FirefoxOSでES6書こう
  • 佐藤徹平さん(@teppeis)イチオシ
  • FxDevCon キャンセル待ちだけど参加してね

QA

  • エディタ
    • vim, webstorm, atomとか。Visual Studio Codeも使いやすいかも
    • FirefoxのScratchpadが便利でオススメ
    • ES6に一番対応出来てるのはFirefoxじゃなくてEdge13(96%ぐらいES6対応が完了)
    • プラグインでESlintとか入れればどのエディタでも使える