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

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

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

それでは始めます

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

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

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

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

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

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); // エラー！ }

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); }

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

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

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

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

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

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

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

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

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

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

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

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

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