Recommended
More Related Content
What's hot
What's hot (20)
Similar to ES6で始めるNode.js / Starting NodeJS Development with ES6
Similar to ES6で始めるNode.js / Starting NodeJS Development with ES6 (20)
ES6で始めるNode.js / Starting NodeJS Development with ES6
- 1. ES6で始める NODE.JS 〜注目をあびる優れた開発手法〜 (2017/07/09) 小田島 太郎 / @shimataro NODESCHOOL OSAKA #36
- 2. 自己紹介 / / / ウェブリオ株式会社所属（京都） 趣味は手品 昨日はBBQでリア充ごっこしてきました 小田島 太郎 shimataro@GitHub odashima.taro@Facebook shimataro999@Twitter
- 4. それでは始めます
- 7. ES6の機能 import / export（モジュール） class（クラス定義） let / const（変数・定数） for of 構文（配列のループ） async / await（非同期処理 ※ES7） テンプレート文字列 アロー演算子 デフォルト引数…などなど。
- 8. ES5 VS ES6（モジュール） // ES5 // ただの関数呼び出し？ var foo = require("foo"); // ただの代入？ module.exports = bar; // ES6 // インポートだ！ import foo from "foo"; // エクスポートだ！ export default bar;
- 9. ES5 VS ES6（クラス定義） // ES5 // クラスに見えない function aClass() { // コンストラクタ } aClass.prototype.aMethod = function() { // aClassのメソッド } // ES6 // クラスだ！ class aClass { constructor() { // コンストラクタ } aMethod() { // aClassのメソッド } }
- 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); // エラー！ }
- 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); }
- 12. ES6対応状況（NODE.JS） 最新LTS(バージョン6)ではあらかた対応 バージョンによっては、 "use strict" を指定しないと使 えない機能がある サーバサイドでは古いバージョンを使わざるを得ない場 合がある Ubuntu 16.04ではバージョン4をサポート
- 17. PRESET プラグインを1つずつ指定するのは面倒 preset ＝ いくつかのプラグインをまとめたもの babel-preset-es2015: class、for of等 babel-preset-es2017: async/await等 とりあえず全部のpresetを入れれば動く でもネイティブ対応している文法はそのまま使いたい （特 にNode.jsでは！）
- 18. やりたいこと ターゲットが対応していない文法だけ変換してほしい 例1: Node.js 4 例2: IE9以上、Chrome/Firefox最新版 例3: 現在実行中のNode.js そんな都合のいいpresetなんてあるわけないよな…
- 20. 使い方 サンプルコードを用意しました 詳しくは を参照 https://github.com/shimataro/babel-preset-env- sample gulp le.babel.js
- 21. 注意 新しい文法はそのままでは使えない場合あり 特定プラグインの有効化・無効化が必要 async / await, static プロパティ等 新しいクラスやメソッドはpoly llが必要な場合あり ランタイムライブラリが必要な場合あり ブラウザ向けには 等で1ファイルにまとめる のが一般的 webpack
- 22. ES6の拡張子は？ .js - 個人的には使いたくない ブラウザに食わせていいものだけ .js にしたい .es - ECMAScriptの正式な拡張子 あまり浸透していない .es6 - 正式ではないけど割と浸透している バージョン6限定っぽく見える 結論: 好きなの使え
- 23. まとめ ES6は便利だよ 対応状況マチマチだから で変換するといいよ が便利だよ ただしいくつか注意することがあるよ 手品に興味があったら声をかけてね！ Babel babel-preset-env
- 24. ご清聴ありがとうございました