his, C lass es, E nhanced O bject L it er als, T emp lat e S tr ings, D estru ctur ing, D efau lt + R est + S pr ead, L et + C onst, M odu les (imp ort/exp ort), P r omis es, G ener at ors... https:// babeljs.io/ do cs/l earn‑ es2015 から抜粋
n f ( ) { { l e t x ; { v a r y = " h o g e " ; c o n s t z = " f u g a " ; / / e r r o r ! z = " f o o " ; } / / o k x = " b a r " ; c o n s o l e . l o g ( x ) ; / / b a r } c o n s o l e . l o g ( x ) ; / / e r r o r ! x i s n o t d e f i n e d c o n s o l e . l o g ( y ) ; / / h o g e }
1 , 2 , 3 ] , r e s u l t = [ ] ; / / o l d r e s u l t = a r r . m a p ( f u n c t i o n ( n ) { r e t u r n n * 1 0 ; } ) ; / / E S 2 0 1 5 r e s u l t = a r r . m a p ( n = > n * 1 0 ) ; c o n s o l e . l o g ( r e s u l t ) ; / / [ 1 0 , 2 0 , 3 0 ] l e t n u m b e r s = { s e p : ' , ' , p r i n t ( ) { c o n s t r e s u l t = a r r . r e d u c e ( ( n 1 , n 2 ) = > { r e t u r n n 1 + t h i s . s e p + n 2 ; } ) ; c o n s o l e . l o g ( r e s u l t ) ; } } ; n u m b e r s . p r i n t ( ) ; / / 1 , 2 , 3
( ) = > { c o n s o l e . l o g ( ' H e l l o , W e A r e J a v a S c r i p t e r s ! ' ) } ; l e t m e = { h e l l o , / / h e l l o : h e l l o p r i n t F r i e n d s ( ) { / / p r i n t F r i e n d s : f u n c t i o n ( ) { c o n s o l e . l o g ( ' ' ) ; } } ;
= " T a k a " ; c o n s t o n e l i n e = ` H e l l o J a v a S c r i p t e r s . I ' m $ { n a m e } ! ` / / 複数行も可 c o n s t m u l t i l i n e = ` H e l l o J a v a S c r i p t e r s , I ' m $ { n a m e } ! `
= [ 1 , 2 , 3 ] ; c o n s o l e . l o g ( a , b ) ; / / 1 3 l e t { a , b : { b 1 , b 2 } , c } = { a : ' エー' , b : { b 1 : ' ビー イチ' , b 2 : ' ビー ニ' } , c : ' シー' } ; c o n s o l e . l o g ( a , b 1 , b 2 , c ) ; / / " エー" " ビー イチ" " ビー ニ" " シー"
1 ( x , y = 1 2 ) { c o n s o l e . l o g ( x + y ) ; } f 1 ( 3 ) / / 1 5 デフォルト引数 + 分割代入 f u n c t i o n f 2 ( { x , y = 1 2 } ) { c o n s o l e . l o g ( x + y ) ; } f 2 ( { x : 3 } ) ; / / 1 5
1 ( x , . . . y ) { / / y は配列なのでl e n g t h プロパティがある c o n s o l e . l o g ( x * y . l e n g t h ) ; / / 9 } f 1 ( 3 , " o n e " , " t w o " , " t h r e e " ) ; 配列の展開 f u n c t i o n f 2 ( v 1 , v 2 , v 3 ) { c o n s o l e . l o g ( ` $ { v 1 } , $ { v 2 } a n d $ { v 3 } ` ) ; } f 2 ( . . . [ " o n e " , " t w o " , " t h r e e " ] ) ; / / " o n e , t w o a n d t h r e e "
g e . j s o n ├ ─ ─ d i s t └ ─ ─ s r c ├ ─ ─ i n d e x . j s └ ─ ─ a n d m o r e . . . package.json { " s c r i p t s " : { " s t a r t " : " b a b e l s r c ‐ d d i s t ‐ ‐ p r e s e t s = l a t e s t ‐ w " , " b u i l d " : " b a b e l s r c ‐ d d i s t ‐ ‐ p r e s e t s = l a t e s t " } , " d e v D e p e n d e n c i e s " : { " b a b e l ‐ c l i " : " ^ 6 . 1 8 . 0 " , " b a b e l ‐ p r e s e t ‐ l a t e s t " : " ^ 6 . 1 6 . 0 " } }
設定ファイルが G ru nt はjs on寄り,G u lp はコー ド寄り B r ows er ify r equ ir e構文が使われたjs をバンドルし、 ブラウザで読めるよう にする w ebp ack js のみならずcss やht ml,画像もモジュー ルとしてバンドルする 複数の出力ファイルが設定できる r ollup.js B r ows er ify,W ebp ackの後発で、ES 6ベー スでバンドルする 生成されるファイルが小さい
puhitaku
yahonda
finengine
yamanoku
bitkey
riyaamemiya
jyouryuusui
masakiokuda
bengo4com
codmoninc
kzkhykw1991
pfn
mojombo
davidcarrasco
techseoconnect
gr2m
akihiro_kokubo
samtorres
chriscoyier
62gerente
shpigford
mclloyd
palkan
![分割代入 l e t [ a , , b ]](https://files.speakerdeck.com/presentations/577377ea58de419788ad2f47caa756b0/slide_17.jpg){kind=link}
