Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

shimataro

July 09, 2017
Tweet

More Decks by shimataro

Other Decks in Technology

Transcript

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

    View Slide

  2. 自己紹介
    / /
    /
    ウェブリオ株式会社所属(京都)
    趣味は手品
    昨日はBBQでリア充ごっこしてきました
    小田島 太郎 [email protected]
    [email protected] [email protected]

    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