ES6で始めるNode.js / Starting NodeJS Development with ES6

NodeSchool Osaka #36の発表資料です
https://nodejs.connpass.com/event/60303/

Transcript

1. ES6で始める
   NODE.JS
   〜注目をあびる優れた開発手法〜
   (2017/07/09)
   小田島 太郎 / @shimataro
   NODESCHOOL OSAKA #36
   

   View Slide

2. 自己紹介
   / /
   /
   ウェブリオ株式会社所属（京都）
   趣味は手品
   昨日はBBQでリア充ごっこしてきました
   小田島 太郎 shimataro@GitHub
   odashima.taro@Facebook shimataro999@Twitter
   

   View Slide

3. この発表について
   レベル
   初級〜中級
   キーワード
   ECMAScript6 (ES6)
   Babel
   babel-preset-env
   

   View Slide

4. それでは始めます
   

   View Slide

5. JAVASCRIPTのつらいところ
   functionだらけ
   クラスもfunction
   コールバックのたびにfunction
   非同期処理
   流れを追いづらい
   コールバックのネスト地獄
   もっと使いやすくならんかな…
   もうJavaScriptなんて進化しないよな…
   

   View Slide

6. してた。
   ECMAScript
   JavaScriptの規格
   現行の「いわゆるJavaScript」はECMAScript5(ES5)
   ECMAScript6(ES6)ではもっと便利に！
   他のAltJS(TypeScript, CoffeeScript, ...)と一線を画す
   JavaScriptある限りECMAScriptは不滅
   ES6の構文を一部取り入れているブラウザもある
   

   View Slide

7. ES6の機能
   import / export（モジュール）
   class（クラス定義）
   let / const（変数・定数）
   for of 構文（配列のループ）
   async / await（非同期処理 ※ES7）
   テンプレート文字列
   アロー演算子
   デフォルト引数…などなど。
   

   View Slide

8. ES5 VS ES6（モジュール）
   // ES5
   // ただの関数呼び出し？
   var foo = require("foo");
   // ただの代入？
   module.exports = bar;
   // ES6
   // インポートだ！
   import foo from "foo";
   // エクスポートだ！
   export default bar;
   

   View Slide

9. ES5 VS ES6（クラス定義）
   // ES5
   // クラスに見えない
   function aClass() {
   // コンストラクタ
   }
   aClass.prototype.aMethod = function() {
   // aClassのメソッド
   }
   // ES6
   // クラスだ！
   class aClass {
   constructor() {
   // コンストラクタ
   }
   aMethod() {
   // aClassのメソッド
   }
   }
   

   View Slide

10. ES5 VS ES6（変数・定数）
    // ES5
    var variant = 0;
    function foo() {
    console.log(variant); // undefined（変数巻き上げ）
    {
    var CONSTANT = 1; // 変えるなよ！絶対変えるなよ！
    var variant = 1;
    }
    console.log(CONSTANT); // ここでもアクセスできる
    }
    // ES6
    let variant = 0;
    function foo() {
    console.log(variant); // 0
    {
    const CONSTANT = 1; // 変えるとエラー！
    let variant = 1;
    }
    console.log(CONSTANT); // エラー！
    }
    

    View Slide

11. ES5 VS ES6（配列のループ）
    // ES5
    var data = [1, 2, 3];
    for (var i = 0; i < data.length; i++) {
    var datum = data[i];
    console.log(datum * datum);
    }
    // ES6
    const data = [1, 2, 3];
    for (const datum of data) {
    console.log(datum * datum);
    }
    

    View Slide

12. ES6対応状況（NODE.JS）
    最新LTS(バージョン6)ではあらかた対応
    バージョンによっては、 "use strict" を指定しないと使
    えない機能がある
    サーバサイドでは古いバージョンを使わざるを得ない場
    合がある
    Ubuntu 16.04ではバージョン4をサポート
    

    View Slide

13. ES6対応状況（ブラウザ）
    モダンブラウザではある程度対応
    ただしブラウザによって差が激しい
    誰がアクセスするかわからないウェブサービスで使うの
    は勇気がいる
    

    View Slide

14. 開発時に大混乱
    対応状況がバラバラなので…
    「この文法ってNode4で対応してたっけ？」
    「この文法ってIE9で対応してたっけ？」
    「この文法って…」
    ⇒開発に直接使うのは現実的ではない
    

    View Slide

15. やりたいこと
    開発時はES6を使う
    ES5に変換してブラウザやNode.jsで実行
    そんな都合のいいツールなんてあるわけないよな…
    

    View Slide

16. あった。
    Babel -
    ES6をES5に変換するツール（トランスパイラ）
    由来は旧約聖書に出てくる「バベルの塔」
    プラグイン機能
    変換する文法を指定できる
    変換が必要な文法のみ柔軟に対応できる！
    ⇒対応状況を気にせずES6で書ける！
    https://babeljs.io/
    

    View Slide

17. PRESET
    プラグインを1つずつ指定するのは面倒
    preset ＝ いくつかのプラグインをまとめたもの
    babel-preset-es2015: class、for of等
    babel-preset-es2017: async/await等
    とりあえず全部のpresetを入れれば動く
    でもネイティブ対応している文法はそのまま使いたい （特
    にNode.jsでは！）
    

    View Slide

18. やりたいこと
    ターゲットが対応していない文法だけ変換してほしい
    例1: Node.js 4
    例2: IE9以上、Chrome/Firefox最新版
    例3: 現在実行中のNode.js
    そんな都合のいいpresetなんてあるわけないよな…
    

    View Slide

19. あった。
    を参照して、非対応文法のみ変換
    バージョン指定方法が神
    現在実行中のNode.jsのバージョン
    Chromeの最新から2バージョン前
    IEのシェア1%以上のバージョン
    presetはこれさえ覚えておけばOK！
    実験的な文法は別途プラグインが必要な場合あり
    babel-preset-env
    ES6対応一覧表
    

    View Slide

20. 使い方
    サンプルコードを用意しました
    詳しくは を参照
    https://github.com/shimataro/babel-preset-env-
    sample
    gulp le.babel.js
    

    View Slide

21. 注意
    新しい文法はそのままでは使えない場合あり
    特定プラグインの有効化・無効化が必要
    async / await, static プロパティ等
    新しいクラスやメソッドはpoly llが必要な場合あり
    ランタイムライブラリが必要な場合あり
    ブラウザ向けには 等で1ファイルにまとめる
    のが一般的
    webpack
    

    View Slide

22. ES6の拡張子は？
    .js - 個人的には使いたくない
    ブラウザに食わせていいものだけ .js にしたい
    .es - ECMAScriptの正式な拡張子
    あまり浸透していない
    .es6 - 正式ではないけど割と浸透している
    バージョン6限定っぽく見える
    結論: 好きなの使え
    

    View Slide

23. まとめ
    ES6は便利だよ
    対応状況マチマチだから で変換するといいよ
    が便利だよ
    ただしいくつか注意することがあるよ
    手品に興味があったら声をかけてね！
    Babel
    babel-preset-env
    

    View Slide

24. ご清聴ありがとうございました
    

    View Slide