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.

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

1,170 views

Published on

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

Published in: Software
  • Be the first to comment

  • Be the first to like this

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

  1. 1. ES6で始める NODE.JS 〜注目をあびる優れた開発手法〜 (2017/07/09) 小田島 太郎 / @shimataro NODESCHOOL OSAKA #36
  2. 2. 自己紹介 / / / ウェブリオ株式会社所属(京都) 趣味は手品 昨日はBBQでリア充ごっこしてきました 小田島 太郎 shimataro@GitHub odashima.taro@Facebook shimataro999@Twitter
  3. 3. この発表について レベル 初級〜中級 キーワード ECMAScript6 (ES6) Babel babel-preset-env
  4. 4. それでは始めます
  5. 5. JAVASCRIPTのつらいところ functionだらけ クラスもfunction コールバックのたびにfunction 非同期処理 流れを追いづらい コールバックのネスト地獄 もっと使いやすくならんかな… もうJavaScriptなんて進化しないよな…
  6. 6. してた。 ECMAScript JavaScriptの規格 現行の「いわゆるJavaScript」はECMAScript5(ES5) ECMAScript6(ES6)ではもっと便利に! 他のAltJS(TypeScript, CoffeeScript, ...)と一線を画す JavaScriptある限りECMAScriptは不滅 ES6の構文を一部取り入れているブラウザもある
  7. 7. ES6の機能 import / export(モジュール) class(クラス定義) let / const(変数・定数) for of 構文(配列のループ) async / await(非同期処理 ※ES7) テンプレート文字列 アロー演算子 デフォルト引数…などなど。
  8. 8. ES5 VS ES6(モジュール) // ES5 // ただの関数呼び出し? var foo = require("foo"); // ただの代入? module.exports = bar; // ES6 // インポートだ! import foo from "foo"; // エクスポートだ! export default bar;
  9. 9. ES5 VS ES6(クラス定義) // ES5 // クラスに見えない function aClass() { // コンストラクタ } aClass.prototype.aMethod = function() { // aClassのメソッド } // ES6 // クラスだ! class aClass { constructor() { // コンストラクタ } aMethod() { // aClassのメソッド } }
  10. 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. 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. 12. ES6対応状況(NODE.JS) 最新LTS(バージョン6)ではあらかた対応 バージョンによっては、 "use strict" を指定しないと使 えない機能がある サーバサイドでは古いバージョンを使わざるを得ない場 合がある Ubuntu 16.04ではバージョン4をサポート
  13. 13. ES6対応状況(ブラウザ) モダンブラウザではある程度対応 ただしブラウザによって差が激しい 誰がアクセスするかわからないウェブサービスで使うの は勇気がいる
  14. 14. 開発時に大混乱 対応状況がバラバラなので… 「この文法ってNode4で対応してたっけ?」 「この文法ってIE9で対応してたっけ?」 「この文法って…」 ⇒開発に直接使うのは現実的ではない
  15. 15. やりたいこと 開発時はES6を使う ES5に変換してブラウザやNode.jsで実行 そんな都合のいいツールなんてあるわけないよな…
  16. 16. あった。 Babel - ES6をES5に変換するツール(トランスパイラ) 由来は旧約聖書に出てくる「バベルの塔」 プラグイン機能 変換する文法を指定できる 変換が必要な文法のみ柔軟に対応できる! ⇒対応状況を気にせずES6で書ける! https://babeljs.io/
  17. 17. PRESET プラグインを1つずつ指定するのは面倒 preset = いくつかのプラグインをまとめたもの babel-preset-es2015: class、for of等 babel-preset-es2017: async/await等 とりあえず全部のpresetを入れれば動く でもネイティブ対応している文法はそのまま使いたい (特 にNode.jsでは!)
  18. 18. やりたいこと ターゲットが対応していない文法だけ変換してほしい 例1: Node.js 4 例2: IE9以上、Chrome/Firefox最新版 例3: 現在実行中のNode.js そんな都合のいいpresetなんてあるわけないよな…
  19. 19. あった。 を参照して、非対応文法のみ変換 バージョン指定方法が神 現在実行中のNode.jsのバージョン Chromeの最新から2バージョン前 IEのシェア1%以上のバージョン presetはこれさえ覚えておけばOK! 実験的な文法は別途プラグインが必要な場合あり babel-preset-env ES6対応一覧表
  20. 20. 使い方 サンプルコードを用意しました 詳しくは を参照 https://github.com/shimataro/babel-preset-env- sample gulp le.babel.js
  21. 21. 注意 新しい文法はそのままでは使えない場合あり 特定プラグインの有効化・無効化が必要 async / await, static プロパティ等 新しいクラスやメソッドはpoly llが必要な場合あり ランタイムライブラリが必要な場合あり ブラウザ向けには 等で1ファイルにまとめる のが一般的 webpack
  22. 22. ES6の拡張子は? .js - 個人的には使いたくない ブラウザに食わせていいものだけ .js にしたい .es - ECMAScriptの正式な拡張子 あまり浸透していない .es6 - 正式ではないけど割と浸透している バージョン6限定っぽく見える 結論: 好きなの使え
  23. 23. まとめ ES6は便利だよ 対応状況マチマチだから で変換するといいよ が便利だよ ただしいくつか注意することがあるよ 手品に興味があったら声をかけてね! Babel babel-preset-env
  24. 24. ご清聴ありがとうございました

×