Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ES6で始めるNode.js / Starting NodeJS Development with ES6
Search
shimataro
July 09, 2017
Technology
1
120
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
Single Executable Applicationsについて / About Single Executable Applications
shimataro
0
1.4k
パッケージ開発者の苦悩 -JavaScriptランタイム群雄割拠- / distress of package developer
shimataro
0
530
An introduction to Node.js
shimataro
0
220
KFDのススメ / About KFD
shimataro
3
600
Node.js v12のES Modules / ES Modules on NodeJS v12
shimataro
1
1k
おまいらちゃんとリソース解放してますか / Remember to close resources!
shimataro
2
940
CJSとESMとnpmパッケージ / CommonJS and ES Modules and npm package
shimataro
0
620
BigInt あれこれ / overview about BigInt
shimataro
0
700
dynamic import あれこれ / dynamic import - overview and pitfalls
shimataro
1
660
Other Decks in Technology
See All in Technology
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
270
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
公共領域から学ぶ クラウド移行についてエンジニアが意識していること
kawakawa2222
0
140
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
データ分析を支える技術 生成AI再入門
ishikawa_satoru
0
380
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
620
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
Datadog Cloud SIEMを使ってAWS環境の脅威を可視化した話/lifeistech-datadog-cloud-siem
gidajun
0
480
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
Faster Mobile Websites
deanohume
303
30k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Learning to Love Humans: Emotional Interface Design
aarron
269
39k
The Art of Programming - Codeland 2020
erikaheidi
48
13k
A better future with KSS
kneath
231
17k
Building Effective Engineering Teams - LeadDev
addyosmani
47
2.2k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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
ご清聴ありがとうございました