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

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

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の機能 import / export(モジュール) class(クラス定義) let / const(変数・定数) for of

    構文(配列のループ) async / await(非同期処理 ※ES7) テンプレート文字列 アロー演算子 デフォルト引数…などなど。
  2. ES5 VS ES6(モジュール) // ES5 // ただの関数呼び出し? var foo =

    require("foo"); // ただの代入? module.exports = bar; // ES6 // インポートだ! import foo from "foo"; // エクスポートだ! export default bar;
  3. ES5 VS ES6(クラス定義) // ES5 // クラスに見えない function aClass() {

    // コンストラクタ } aClass.prototype.aMethod = function() { // aClassのメソッド } // ES6 // クラスだ! class aClass { constructor() { // コンストラクタ } aMethod() { // aClassのメソッド } }
  4. 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); // エラー! }
  5. 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); }
  6. PRESET プラグインを1つずつ指定するのは面倒 preset = いくつかのプラグインをまとめたもの babel-preset-es2015: class、for of等 babel-preset-es2017: async/await等

    とりあえず全部のpresetを入れれば動く でもネイティブ対応している文法はそのまま使いたい (特 にNode.jsでは!)
  7. ES6の拡張子は? .js - 個人的には使いたくない ブラウザに食わせていいものだけ .js にしたい .es - ECMAScriptの正式な拡張子

    あまり浸透していない .es6 - 正式ではないけど割と浸透している バージョン6限定っぽく見える 結論: 好きなの使え