Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Learn ES2015

897 views

Published on

【#techbuzz】10/23 第18回 HTML5+JS 勉強会【テーマ:ES6 & JavaScript / WebRTCでリアル店舗を作ってみる】
こちらで発表した資料ですよ

Published in: Engineering
  • Be the first to comment

Learn ES2015

  1. 1. Learn ES2015(ES6)
  2. 2. 自己紹介 me = { name: "muyuu", twitter: "@anticyborg", belongs: "freelance", job: "Web Front-End Engineer" };
  3. 3. About ES2015
  4. 4. history • 2000年あたりのAJAX以降、Web開発における フロントエンドの重要性は高まっていく一方 • EcmaScriptの進化はWeb開発の速度に追いつ いていない • JavaScript独自の仕様を好まない開発者も多い
  5. 5. そうだ コンパイルしよう
  6. 6. Alt JS • CoffeeScript • TypeScript • Haxe • Scala.js
  7. 7. ES2015策定 • 大規模開発に必要な機能 • 後方互換性 • 良い感じに書ける
  8. 8. ブラウザ対応 ECMAScript 6 compatibility table
  9. 9. ブラウザ対応 • IEは11でもほとんど対応してない(Edgeは積 極的に対応) • IE11はあと4年くらいサポートする
  10. 10. そうだ!!! コンパイルだ!
  11. 11. Babel ES2015をES5に変換するトランスパイラ https://babeljs.io/
  12. 12. 今から ES2015で 書ける!
  13. 13. 注意点 • IE8対応案件はまだ普通にある • IE8はそもそもES3 • Babelは基本的に ES2015->ES5 • class構文とか、使えないものも多い お気をつけて
  14. 14. use babel https://babeljs.io/repl/
  15. 15. use babel install $ node install -g babel run $ babel es6/a.js > es5/a.js
  16. 16. with browserify • install $ npm install --save-dev babelify $ browserify main.js -t babelify -o bundle.js
  17. 17. with gulp • install $ npm install --save-dev gulp gulp-babel
  18. 18. with gulp • gulpfile.js var gulp = require('gulp'); var babel = require('gulp-babel'); gulp.task('default', function () { return gulp.src('src/app.js') .pipe(babel()) .pipe(gulp.dest('dist')); });
  19. 19. New Syntax
  20. 20. アロー関数 var add = (a, b)=>{ return a + b; } var factorial = x => x * x;
  21. 21. thisの束縛 // es5 var muyuu = { name: 'muyuu', greet: function(){ // setTimeoutのコールバック関数内のthisはwindowになるため // _this に this を格納しておく var _this = this; setTimeout(()=>{ console.log("hello I'm " + _this.name); // _this を使用 }, 1000); } }
  22. 22. thisの束縛 // es2015 var muyuu = { name: 'muyuu', greet: function(){ setTimeout(()=>{ console.log("hello I'm " + this.name); // アロー関数を使った場合、thisはそのオブジェクトになる }, 1000); } }
  23. 23. ブロックスコープ • JavaScriptのスコープは関数スコープ • var ではなく let でブロックスコープの変数を 宣言できる
  24. 24. 関数スコープ var a = 1; function b(){ var a = 2; console.log(a); } b(); // 2 console.log(a); // 1
  25. 25. ブロックスコープ // es2015 function b() { let a = 1; if (true) { let a = 2; } return a; } console.log( b() ); // 1
  26. 26. 定数 • const で定数を宣言できる • 定数なので値を読み取る、再度宣言はできない // es2015 const a = 1; const a = 2; // Error! a = 3; // Error!
  27. 27. デフォルト引数 • 関数の引数にデフォルト値を設定できる // es5 function add(x, y){ if(typeof y === 'undefined') y = 1; return x + y; } // es2015 function add(x, y = 1){ return x + y; }
  28. 28. 可変長引数 引数の長さが決まってない場合 // es5 function a(x){ // arguments を使って頑張って配列のように扱う var y = Array.prototype.slice.call(arguments, 1); console.log(x, y); } a(1,2,3); // 1 [2, 3]
  29. 29. 可変長引数 // es2015 function a(x, ...rest){ // ... に続けて書かれた引数は配列として扱われる console.log(x, rest); } a(1,2,3); // 1 [2, 3]
  30. 30. 分割代入 配列・オブジェクトからデータを取り出す var arr = ["one", "two", "three"]; // es5 var one = arr[0]; var two = arr[1]; var three = arr[2]; // es2015 var [one, two, three] = arr;
  31. 31. 分割代入 • 関数の引数にも分割代入は使える // es2015 function c({a, b}) { console.log(a, b); } c({a: 1, b: 2}); // 1 2
  32. 32. スプレッド演算子 • 配列を関数の引数として使用したい場合 function f(x, y, z) { } var args = [0, 1, 2]; // es5 f.apply(null, args); // es2015 f(...args);
  33. 33. プロパティの省略 • オブジェクトプロパティのキー名と値の変数名 が等しい場合、省略記法で書ける var a = 0, b = 1; // es5 var obj = {a: a, b: b}; // es2015 var obj = {foo, bar};
  34. 34. 式をプロパティに使う • 変数の値文字列をキーにしたい場合、ES5まで は一度オブジェクトを作る必要があった • ES2015ではオブジェクト生成時に直接変数、 式を代入できる
  35. 35. 式をプロパティに使う var key = "aaa"; // es5 var obj = {}; obj[key] = 0; // es2015 var obj = { [key]: 0 }; console.log(obj.aaa); // 0
  36. 36. メソッドの定義 • メソッドの記述方法が簡易になる // es5 var obj = { b: function(){ console.log('this is obj'); } }; // es2015 var obj = { b(){ console.log('this is obj'); } };
  37. 37. for of • 列挙できるオブジェクト(配列・文字列等)を繰 り返す汎用的な処理 // es2015 var arr = [2,3,6,7]; for ( var x of arr ){ console.log(x); }
  38. 38. テンプレートリテラル • バッククオートで囲んだ場合、文字列の中に変 数を埋め込める var arr = a = 1, b = 2 ; // es5 console.log(a + " + " + b + " = " + (a + b)); // es2015 console.log(`${a} + ${b} = ${a + b}`);
  39. 39. class class Human { constructor(name) { this.name = name; } greet() { console.log("Hello, I'm " + this.name); } static create(name) { return new Human(name); } }
  40. 40. 継承 class Enemy extends Human { constructor(name) { super(name); // 親コンストラクタ呼び出し } greet() { super.greet(); console.log("You are Die!"); } }
  41. 41. モジュール • たいぼうの もじゅーる かんり • 言語仕様外でcommonJS、AMDというモジュ ール機構 • シンプルで宣言的な記述
  42. 42. エクスポート // module.js export var a = "a!"; export function b() {} export class C { d() {} }
  43. 43. インポート // import.js // メンバごとにインポート import {a, b, C} from "./module"; console.log(a); // "a!" b(); new C();
  44. 44. インポート // インポートする変数名の指定 import {a as p} from "./module"; console.log(p); // "a!"
  45. 45. インポート // モジュールをまとめてインポート import * as module from "./module"; console.log(module.a); // "a!"
  46. 46. モジュールを使う • 現在ネイティブで実装している環境はない • BabelでCommonJSモジュールに変換
  47. 47. モジュールを使う //es2015 module import {a, b} from "./module"; export var c = 1; //commonJS module var module = require("./module"); var a = module.a; var b = module.b; exports.c = 1;
  48. 48. Promise // Promisオブジェクトを返す関数を作成 function sleep(msec) { // promiseオブジェクトを返す return new Promise((resolve, reject)=>{ // 非同期処理を記述 setTimeout(resolve, msec); }); } // Promiseの実行 sleep(1000).then(()=>{ // resolve実行時にここが呼び出される console.log('wake!'); });

×