Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
ES6で始めるNode.js / Starting NodeJS Development with ES6
shimataro
July 09, 2017
Technology
1
84
ES6で始めるNode.js / Starting NodeJS Development with ES6
NodeSchool Osaka #36の発表資料です
https://nodejs.connpass.com/event/60303/
shimataro
July 09, 2017
Tweet
Share
More Decks by shimataro
See All by shimataro
An introduction to Node.js
shimataro
0
140
KFDのススメ / About KFD
shimataro
3
360
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
850
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
670
CJSとESMとnpmパッケージ / CommonJS and ES Modules and npm package
shimataro
0
430
BigInt あれこれ / overview about BigInt
shimataro
0
560
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
500
レスポンシブから逆戻り!?Webサービスのマルチデバイス対応方法 / Multi-Device Support Method for Web Services
shimataro
1
150
この単語、何て読むんだっけ? / How do you pronounce these words?
shimataro
0
200
Other Decks in Technology
See All in Technology
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
10
4.2k
データ分析で切り拓け! エンジニアとしてのデータ分析職キャリア戦略
ksnt
0
130
Lessons Learned from Scaling Infrastructure as Code
joatmon08
0
800
Azure Arc Virtual MachineとAzure Arc Resource Bridge / VM provisioning through Azure portal on Azure Stack HCI (preview)
sashizaki
0
130
ソフトウェアテスト自動化、一歩前へ
yoshikiito
5
690
覗いてみよう!現場のスクラムチーム
tkredman
0
1.1k
【個人的】オブジェクト指向の現在地
toranoana
0
160
UWBを使ってみた
norioikedo
0
420
GeoLocationAnchor and MKTileOverlay
toyship
0
110
音のような言葉 〜ちゃちゃっとチャットで楽しむちょっとしたコツ〜 / words like sounds
satoryu
1
1.4k
データエンジニアと作るデータ文化
yuki_saito
4
1.6k
Persistence in Serverless Applications - ServerlessDays NYC
marcduiker
0
240
Featured
See All Featured
Design by the Numbers
sachag
271
17k
For a Future-Friendly Web
brad_frost
166
7.4k
Bootstrapping a Software Product
garrettdimon
296
110k
The Pragmatic Product Professional
lauravandoore
19
3k
Three Pipe Problems
jasonvnalue
89
8.7k
Unsuck your backbone
ammeep
659
55k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
What's in a price? How to price your products and services
michaelherold
229
9.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
Designing with Data
zakiwarfel
91
3.9k
Faster Mobile Websites
deanohume
294
28k
The Cult of Friendly URLs
andyhume
68
4.8k
Transcript
ES6で始める NODE.JS 〜注目をあびる優れた開発手法〜 (2017/07/09) 小田島 太郎 / @shimataro NODESCHOOL OSAKA
#36
自己紹介 / / / ウェブリオ株式会社所属(京都) 趣味は手品 昨日はBBQでリア充ごっこしてきました 小田島 太郎 shimataro@GitHub
odashima.taro@Facebook shimataro999@Twitter
この発表について レベル 初級〜中級 キーワード ECMAScript6 (ES6) Babel babel-preset-env
それでは始めます
JAVASCRIPTのつらいところ functionだらけ クラスもfunction コールバックのたびにfunction 非同期処理 流れを追いづらい コールバックのネスト地獄 もっと使いやすくならんかな… もうJavaScriptなんて進化しないよな…
してた。 ECMAScript JavaScriptの規格 現行の「いわゆる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(変数・定数) // 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); // エラー! }
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); }
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-env ES6対応一覧表
使い方 サンプルコードを用意しました 詳しくは を参照 https://github.com/shimataro/babel-preset-env- sample gulp le.babel.js
注意 新しい文法はそのままでは使えない場合あり 特定プラグインの有効化・無効化が必要 async / await, static プロパティ等 新しいクラスやメソッドはpoly llが必要な場合あり
ランタイムライブラリが必要な場合あり ブラウザ向けには 等で1ファイルにまとめる のが一般的 webpack
ES6の拡張子は? .js - 個人的には使いたくない ブラウザに食わせていいものだけ .js にしたい .es - ECMAScriptの正式な拡張子
あまり浸透していない .es6 - 正式ではないけど割と浸透している バージョン6限定っぽく見える 結論: 好きなの使え
まとめ ES6は便利だよ 対応状況マチマチだから で変換するといいよ が便利だよ ただしいくつか注意することがあるよ 手品に興味があったら声をかけてね! Babel babel-preset-env
ご清聴ありがとうございました