Submit Search
Upload
Nds meetup8 lt
•
Download as PPTX, PDF
•
0 likes
•
1,388 views
ushiboy
Follow
ついついクラシックスタイルで書いてしまう人のためのES6モダンシンタックス弾丸ツアー
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 53
Download now
Recommended
Real World OCamlを読んでLispと協調してみた
Real World OCamlを読んでLispと協調してみた
blackenedgold
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
Qlik Tips 20220315 Null値の課題と対策
Qlik Tips 20220315 Null値の課題と対策
QlikPresalesJapan
(define)なしで再帰関数を定義する
(define)なしで再帰関数を定義する
blackenedgold
関数型プログラミング入門 with OCaml
関数型プログラミング入門 with OCaml
Haruka Oikawa
Pythonデータ分析 第3回勉強会資料 8章
Pythonデータ分析 第3回勉強会資料 8章
Makoto Kawano
KETpic できれいな図を書こう
KETpic できれいな図を書こう
Yoshitomo Akimoto
04.第四章用Matlab求偏导数
04.第四章用Matlab求偏导数
Xin Zheng
Recommended
Real World OCamlを読んでLispと協調してみた
Real World OCamlを読んでLispと協調してみた
blackenedgold
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
taskie
Qlik Tips 20220315 Null値の課題と対策
Qlik Tips 20220315 Null値の課題と対策
QlikPresalesJapan
(define)なしで再帰関数を定義する
(define)なしで再帰関数を定義する
blackenedgold
関数型プログラミング入門 with OCaml
関数型プログラミング入門 with OCaml
Haruka Oikawa
Pythonデータ分析 第3回勉強会資料 8章
Pythonデータ分析 第3回勉強会資料 8章
Makoto Kawano
KETpic できれいな図を書こう
KETpic できれいな図を書こう
Yoshitomo Akimoto
04.第四章用Matlab求偏导数
04.第四章用Matlab求偏导数
Xin Zheng
Rの高速化
Rの高速化
弘毅 露崎
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
Kimikazu Kato
mmapパッケージを使ってお手軽オブジェクト管理
mmapパッケージを使ってお手軽オブジェクト管理
Shintaro Fukushima
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
Yosuke Onoue
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)
啓 小笠原
kollectionの紹介
kollectionの紹介
Kota Mizushima
異常検知と変化検知 9章 部分空間法による変化点検知
異常検知と変化検知 9章 部分空間法による変化点検知
hagino 3000
[CB16] House of Einherjar :GLIBC上の新たなヒープ活用テクニック by 松隈大樹
[CB16] House of Einherjar :GLIBC上の新たなヒープ活用テクニック by 松隈大樹
CODE BLUE
Qt × Reactive Extensions
Qt × Reactive Extensions
TetsuroMatsumura
NOPのための STL-Allocaterの設計と実装
NOPのための STL-Allocaterの設計と実装
Yuta Ogura
lispmeetup#63 Common Lispでゼロから作るDeep Learning
lispmeetup#63 Common Lispでゼロから作るDeep Learning
Satoshi imai
JavaScript 講習会 #1
JavaScript 講習会 #1
Susisu
Vinculum
Vinculum
tomerun
Rubyによるデータ解析
Rubyによるデータ解析
Shugo Maeda
R-hpc-1 TokyoR#11
R-hpc-1 TokyoR#11
Shintaro Fukushima
Scala の関数型プログラミングを支える技術
Scala の関数型プログラミングを支える技術
Naoki Aoyama
Van laarhoven lens
Van laarhoven lens
Naoki Aoyama
Sns suite presentation
Sns suite presentation
Jason Namkung
Ruby科学データ処理ツールの開発 NArrayとPwrake
Ruby科学データ処理ツールの開発 NArrayとPwrake
Masahiro Tanaka
ちょっと詳しくJavaScript 第1回【連想配列と配列】
ちょっと詳しくJavaScript 第1回【連想配列と配列】
株式会社ランチェスター
Boost tour 1_40_0
Boost tour 1_40_0
Akira Takahashi
Prosym2012
Prosym2012
MITSUNARI Shigeo
More Related Content
What's hot
Rの高速化
Rの高速化
弘毅 露崎
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
Kimikazu Kato
mmapパッケージを使ってお手軽オブジェクト管理
mmapパッケージを使ってお手軽オブジェクト管理
Shintaro Fukushima
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
Yosuke Onoue
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)
啓 小笠原
kollectionの紹介
kollectionの紹介
Kota Mizushima
異常検知と変化検知 9章 部分空間法による変化点検知
異常検知と変化検知 9章 部分空間法による変化点検知
hagino 3000
[CB16] House of Einherjar :GLIBC上の新たなヒープ活用テクニック by 松隈大樹
[CB16] House of Einherjar :GLIBC上の新たなヒープ活用テクニック by 松隈大樹
CODE BLUE
Qt × Reactive Extensions
Qt × Reactive Extensions
TetsuroMatsumura
NOPのための STL-Allocaterの設計と実装
NOPのための STL-Allocaterの設計と実装
Yuta Ogura
lispmeetup#63 Common Lispでゼロから作るDeep Learning
lispmeetup#63 Common Lispでゼロから作るDeep Learning
Satoshi imai
JavaScript 講習会 #1
JavaScript 講習会 #1
Susisu
Vinculum
Vinculum
tomerun
Rubyによるデータ解析
Rubyによるデータ解析
Shugo Maeda
R-hpc-1 TokyoR#11
R-hpc-1 TokyoR#11
Shintaro Fukushima
Scala の関数型プログラミングを支える技術
Scala の関数型プログラミングを支える技術
Naoki Aoyama
Van laarhoven lens
Van laarhoven lens
Naoki Aoyama
Sns suite presentation
Sns suite presentation
Jason Namkung
Ruby科学データ処理ツールの開発 NArrayとPwrake
Ruby科学データ処理ツールの開発 NArrayとPwrake
Masahiro Tanaka
ちょっと詳しくJavaScript 第1回【連想配列と配列】
ちょっと詳しくJavaScript 第1回【連想配列と配列】
株式会社ランチェスター
What's hot
(20)
Rの高速化
Rの高速化
純粋関数型アルゴリズム入門
純粋関数型アルゴリズム入門
mmapパッケージを使ってお手軽オブジェクト管理
mmapパッケージを使ってお手軽オブジェクト管理
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
PyOpenCLによるGPGPU入門 Tokyo.SciPy#4 編
関数型言語&形式的手法セミナー(3)
関数型言語&形式的手法セミナー(3)
kollectionの紹介
kollectionの紹介
異常検知と変化検知 9章 部分空間法による変化点検知
異常検知と変化検知 9章 部分空間法による変化点検知
[CB16] House of Einherjar :GLIBC上の新たなヒープ活用テクニック by 松隈大樹
[CB16] House of Einherjar :GLIBC上の新たなヒープ活用テクニック by 松隈大樹
Qt × Reactive Extensions
Qt × Reactive Extensions
NOPのための STL-Allocaterの設計と実装
NOPのための STL-Allocaterの設計と実装
lispmeetup#63 Common Lispでゼロから作るDeep Learning
lispmeetup#63 Common Lispでゼロから作るDeep Learning
JavaScript 講習会 #1
JavaScript 講習会 #1
Vinculum
Vinculum
Rubyによるデータ解析
Rubyによるデータ解析
R-hpc-1 TokyoR#11
R-hpc-1 TokyoR#11
Scala の関数型プログラミングを支える技術
Scala の関数型プログラミングを支える技術
Van laarhoven lens
Van laarhoven lens
Sns suite presentation
Sns suite presentation
Ruby科学データ処理ツールの開発 NArrayとPwrake
Ruby科学データ処理ツールの開発 NArrayとPwrake
ちょっと詳しくJavaScript 第1回【連想配列と配列】
ちょっと詳しくJavaScript 第1回【連想配列と配列】
Similar to Nds meetup8 lt
Boost tour 1_40_0
Boost tour 1_40_0
Akira Takahashi
Prosym2012
Prosym2012
MITSUNARI Shigeo
Boost Tour 1.50.0 All
Boost Tour 1.50.0 All
Akira Takahashi
boost tour 1.48.0 all
boost tour 1.48.0 all
Akira Takahashi
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
TanUkkii
つくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタ
京大 マイコンクラブ
Thinking in Cats
Thinking in Cats
Eugene Yokota
Flutterを体験してみませんか
Flutterを体験してみませんか
cch-robo
中3女子が狂える本当に気持ちのいい constexpr
中3女子が狂える本当に気持ちのいい constexpr
Genya Murakami
Rで学ぶデータマイニングI 第8章〜第13章
Rで学ぶデータマイニングI 第8章〜第13章
Prunus 1350
実務者のためのかんたんScalaz
実務者のためのかんたんScalaz
Tomoharu ASAMI
【macOSにも対応】AI入門「第3回:数学が苦手でも作って使えるKerasディープラーニング」
【macOSにも対応】AI入門「第3回:数学が苦手でも作って使えるKerasディープラーニング」
fukuoka.ex
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
Akira Inoue
Rpscala2011 0601
Rpscala2011 0601
Hajime Yanagawa
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Mitsuru Katoh
Apache Spark チュートリアル
Apache Spark チュートリアル
K Yamaguchi
mxnetで頑張る深層学習
mxnetで頑張る深層学習
Takashi Kitano
Osc shimane-2016-do-postgres-dream-of-graph-database
Osc shimane-2016-do-postgres-dream-of-graph-database
Toshi Harada
プログラミング言語Scala
プログラミング言語Scala
TanUkkii
How wonderful to be (statically) typed 〜型が付くってスバラシイ〜
How wonderful to be (statically) typed 〜型が付くってスバラシイ〜
Hiromi Ishii
Similar to Nds meetup8 lt
(20)
Boost tour 1_40_0
Boost tour 1_40_0
Prosym2012
Prosym2012
Boost Tour 1.50.0 All
Boost Tour 1.50.0 All
boost tour 1.48.0 all
boost tour 1.48.0 all
ECMAScript6による関数型プログラミング
ECMAScript6による関数型プログラミング
つくってあそぼ ラムダ計算インタプリタ
つくってあそぼ ラムダ計算インタプリタ
Thinking in Cats
Thinking in Cats
Flutterを体験してみませんか
Flutterを体験してみませんか
中3女子が狂える本当に気持ちのいい constexpr
中3女子が狂える本当に気持ちのいい constexpr
Rで学ぶデータマイニングI 第8章〜第13章
Rで学ぶデータマイニングI 第8章〜第13章
実務者のためのかんたんScalaz
実務者のためのかんたんScalaz
【macOSにも対応】AI入門「第3回:数学が苦手でも作って使えるKerasディープラーニング」
【macOSにも対応】AI入門「第3回:数学が苦手でも作って使えるKerasディープラーニング」
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
TypeScript ファーストステップ (Rev.2) ~ Any browser. Any host. Any OS. Open Source. ~
Rpscala2011 0601
Rpscala2011 0601
XPages 開発 Tips 百連発
XPages 開発 Tips 百連発
Apache Spark チュートリアル
Apache Spark チュートリアル
mxnetで頑張る深層学習
mxnetで頑張る深層学習
Osc shimane-2016-do-postgres-dream-of-graph-database
Osc shimane-2016-do-postgres-dream-of-graph-database
プログラミング言語Scala
プログラミング言語Scala
How wonderful to be (statically) typed 〜型が付くってスバラシイ〜
How wonderful to be (statically) typed 〜型が付くってスバラシイ〜
Nds meetup8 lt
1.
ついついクラシックスタイルで書いてしまう人のための ES6モダンシンタックス 弾丸ツアー NDS Meetup #8
LT ushiboy
2.
WARNING! フルスピードで飛ばしていきます。 お聞き苦しい点が多々あるかと思いますが、ご容赦ください。 2
3.
ES6 を三行で ● JavaScriptの標準言語仕様
ECMAScriptの第6版 (正式名称:ECMAScript 2015) ● 今年(2015年)6月にリリース ● いろいろ機能追加 3
4.
追加された機能 クラス モジュール アロー関数 オブジェクトリテラル 拡張 ブロックスコープ デフォルトパラメータ レストパラメータ スプレッドオペレータ 分割代入 イテレータ テンプレートリテラル Promise Generator Map, Set 型付配列 Symbol Proxy, Reflect String RegExp Array Object,
Math, Number 末尾最適化 4
5.
今日話すところ クラス モジュール アロー関数 オブジェクトリテラル 拡張 ブロックスコープ デフォルトパラメータ レストパラメータ スプレッドオペレータ 分割代入 イテレータ テンプレートリテラル Promise Generator Map, Set 型付配列 Symbol Proxy, Reflect String RegExp Array Object,
Math, Number 末尾最適化 この辺りのだけ 5
6.
では、用途ごとのクラシックスタイルと モダンスタイルを見ていきます 6
7.
無名関数を使う アロー関数 7
8.
無名関数を使う // classic [1, 2,
3].forEach(function(x, i) { return i + x; }); [1, 2, 3].filter(function(x) { return x % 2 === 0; }); setTimeout(function() { console.log('Hello! function world!'); }, 1000); 8
9.
無名関数を使う // morden [1, 2,
3].map((x, i) => { return i + x; }); [1, 2, 3].filter(x => x % 2 === 0); setTimeout(() => { console.log('Hello! arrow function world!'); }, 1000); Point Point Point 9
10.
変数名と同じ名前の オブジェクトプロパティを作る オブジェクトリテラル拡張 10
11.
変数名と同じ名前のオブジェクトプロパティを作る // classic var name
= 'alice'; var age = 20; var obj = { name: name, age: age }; console.log(obj); // { name: 'alice', age: 30 } 11
12.
変数名と同じ名前のオブジェクトプロパティを作る // morden var name
= 'alice'; var age = 20; var obj = { name, age }; console.log(obj); // { name: 'alice', age: 30 } Point 12
13.
変数の値をオブジェクトプロパティ名に 使う オブジェクトリテラル拡張 13
14.
変数の値をオブジェクトプロパティ名に使う // classic var key
= 'age'; var obj = { name: 'alice' }; obj[key] = 50; console.log(obj); // { name: 'alice', age: 50 } 14
15.
変数の値をオブジェクトプロパティ名に使う // morden var key
= 'age'; var obj = { name: 'alice', [key]: 50 }; console.log(obj); // { name: 'alice', age: 50 } Point 15
16.
オブジェクトにメソッドを定義する オブジェクトリテラル拡張 16
17.
オブジェクトにメソッドを定義する // classic var obj
= { name: 'alice', greet: function() { console.log(this.name); } }; obj.greet(); // 'alice' 17
18.
オブジェクトにメソッドを定義する // morden var obj
= { name: 'alice', greet() { console.log(this.name); } }; obj.greet(); Point 18
19.
関数の引数にデフォルト値を指定する デフォルトパラメータ 19
20.
関数の引数にデフォルト値を指定する // classic function f(x,
y) { if (y === undefined) { y = 1; } return x + y; } console.log(f(1)); // 2 20
21.
関数の引数にデフォルト値を指定する // morden function f(x,
y=1) { return x + y; } console.log(f(1)); // 2 Point 21
22.
可変長引数を持つ関数を作る レストパラメータ 22
23.
可変長引数を持つ関数を作る // classic function e(x)
{ var y = [].slice.call(arguments, 1); return x + y.reduce(function(a, b) { return a + b; }); } console.log(e('hoge', 1, 2, 3)); // hoge6 23
24.
可変長引数を持つ関数を作る // morden function e(x,
...y) { return x + y.reduce((a, b) => a + b); } console.log(e('hoge', 1, 2, 3)); // hoge6 Point 24
25.
配列を連結して配列を作る スプレッドオペレータ 25
26.
配列を連結して配列を作る // classic var src
= [3]; var other = [1, 2].concat(src); console.log(other); // [1, 2, 3] 26
27.
配列を連結して配列を作る // morden var src
= [3]; var other = [1, 2, ...src]; console.log(other); // [1, 2, 3] Point 27
28.
オブジェクトを展開して 別のオブジェクトを作る スプレッドオペレータ 28
29.
オブジェクトを展開して別のオブジェクトを作る // classic var obj
= { name: 'alice' }; var other = { name: obj.name, age: 20 }; console.log(other); // { name: 'alice', age: 20 } 29
30.
オブジェクトを展開して別のオブジェクトを作る // morden var obj
= { name: 'alice' }; var other = { ...obj, age: 20 }; console.log(other); // { name: 'alice', age: 20 } Point 30
31.
配列を展開して関数の引数に渡す スプレッドオペレータ 31
32.
配列を展開して関数の引数に渡す function x(a, b,
c) { return a + b + c; } var params = [1, 2, 3]; // classic console.log(x.apply(null, params)); // 6 32
33.
配列を展開して関数の引数に渡す function x(a, b,
c) { return a + b + c; } var params = [1, 2, 3]; // morden console.log(x(...params)); // 6 Point 33
34.
文字列を1文字ずつ分割した配列にする スプレッドオペレータ 34
35.
文字列を1文字ずつ分割した配列にする var str =
'foo'; // classic var chars = str.split(''); console.log(chars); // ['f', 'o', 'o'] 35
36.
文字列を1文字ずつ分割した配列にする var str =
'foo'; // morden var chars = [...str]; console.log(chars); // ['f', 'o', 'o'] Point 36
37.
配列の特定要素を変数に取り出す 分割代入 37
38.
配列の特定要素を変数に取り出す var list =
['alice', false, 20]; // classic var name = list[0]; var age = list[2]; console.log(name, age); // 'alice' 20 38
39.
配列の特定要素を変数に取り出す var list =
['alice', false, 20]; // morden var [ name, , age] = list; console.log(name, age); // 'alice', 20 Point 39
40.
変数の値を入れ替える 分割代入 40
41.
変数の値を入れ替える var a =
1; var b = 2; // classic var tmp = b; b = a; a = tmp; console.log(a, b); // 2 1 41
42.
変数の値を入れ替える var a =
1; var b = 2; // morden [b, a] = [a, b]; console.log(a, b); // 2 1 Point 42
43.
オブジェクトプロパティを変数に取り出 す 分割代入 43
44.
オブジェクトプロパティを変数に取り出す var obj =
{ name: 'alice', age: 20, enable: false }; // classic var name = obj.name; var age = obj.age; console.log(name, age); // 'alice' 20 44
45.
オブジェクトプロパティを変数に取り出す var obj =
{ name: 'alice', age: 20, enable: false }; // morden var { name, age } = obj; console.log(name, age); // 'alice' 20 Point 45
46.
文字列に変数を埋め込む テンプレートリテラル 46
47.
文字列に変数を埋め込む // classic var name
= 'alice'; console.log('Hello! ' + name + '!'); // Hello! alice! var items = { apple: 5, orange: 4 }; console.log('total: ' + (items.apple + items.orange)); // total: 9 47
48.
文字列に変数を埋め込む // morden var name
= 'alice'; console.log(`Hello! ${name}!`); // Hello! alice! var items = { apple: 5, orange: 4 }; console.log(`total: ${items.apple + items.orange}`); // total: 9 Point Point 48
49.
複数行の文字列を使う テンプレートリテラル 49
50.
複数行の文字列を使う // classic var text
= [ 'line 1', 'line 2', 'line 3' ].join('¥n'); console.log(text); // line 1¥nline 2¥nline 3 50
51.
複数行の文字列を使う // morden var text
= `line 1 line 2 line 3`; console.log(text); // line 1¥nline 2¥nline 3 Point 51
52.
もっと知りたい方は WEB+DB PRESS vol.87とか読むと良いと思います 52
53.
Enjoy ES6! 53
Download now