NodeSchool Osaka #36の発表資料です https://nodejs.connpass.com/event/60303/
ES6で始めるNODE.JS〜注目をあびる優れた開発手法〜(2017/07/09)小田島 太郎 / @shimataroNODESCHOOL OSAKA #36
View Slide
自己紹介/ //ウェブリオ株式会社所属(京都)趣味は手品昨日はBBQでリア充ごっこしてきました小田島 太郎 shimataro@GitHubodashima.taro@Facebook shimataro999@Twitter
この発表についてレベル初級〜中級キーワードECMAScript6 (ES6)Babelbabel-preset-env
それでは始めます
JAVASCRIPTのつらいところfunctionだらけクラスもfunctionコールバックのたびにfunction非同期処理流れを追いづらいコールバックのネスト地獄もっと使いやすくならんかな…もうJavaScriptなんて進化しないよな…
してた。ECMAScriptJavaScriptの規格現行の「いわゆる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(変数・定数)// ES5var variant = 0;function foo() {console.log(variant); // undefined(変数巻き上げ){var CONSTANT = 1; // 変えるなよ!絶対変えるなよ!var variant = 1;}console.log(CONSTANT); // ここでもアクセスできる}// ES6let variant = 0;function foo() {console.log(variant); // 0{const CONSTANT = 1; // 変えるとエラー!let variant = 1;}console.log(CONSTANT); // エラー!}
ES5 VS ES6(配列のループ)// ES5var data = [1, 2, 3];for (var i = 0; i < data.length; i++) {var datum = data[i];console.log(datum * datum);}// ES6const 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-envES6対応一覧表
使い方サンプルコードを用意しました詳しくは を参照https://github.com/shimataro/babel-preset-env-samplegulp le.babel.js
注意新しい文法はそのままでは使えない場合あり特定プラグインの有効化・無効化が必要async / await, static プロパティ等新しいクラスやメソッドはpoly llが必要な場合ありランタイムライブラリが必要な場合ありブラウザ向けには 等で1ファイルにまとめるのが一般的webpack
ES6の拡張子は?.js - 個人的には使いたくないブラウザに食わせていいものだけ .js にしたい.es - ECMAScriptの正式な拡張子あまり浸透していない.es6 - 正式ではないけど割と浸透しているバージョン6限定っぽく見える結論: 好きなの使え
まとめES6は便利だよ対応状況マチマチだから で変換するといいよが便利だよただしいくつか注意することがあるよ手品に興味があったら声をかけてね!Babelbabel-preset-env
ご清聴ありがとうございました