SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
es6とかな話
khirayama
MFでフロントエンドやってます!
平山 光太郎
JSの次期標準仕様。
みんなが欲しがってた機能がいっぱい詰まってる。
es6(ECMAScript6)とは
JSの次期標準仕様。
みんなが欲しがってた機能がいっぱい詰まってる。
es6(ECMAScript6)とは
今月になって最終ドラフトが上がった....!
早ければ6月に標準化
Array.find
Array.map
Object.keys
Object.assign
JSの次期標準仕様。
みんなが欲しがってた機能がいっぱい詰まってる。
es6(ECMAScript6)とは
Class
Module
Function Arguments
Arrow Function
let / const
Template Literals
Promise
Object.assign
Objectのcloneやmergeしたりが簡単に
Class
嬉しい。
もちろんextendsも
Module
export / importにも対応して、依存
管理ができるように
Arrow Function
thisを束縛して、今までやってたこと↓のが(だいたい)不要に。
var _this = this;
hogehoge.bind(this)
Template Literals
複数行の記述、変数の仕様、関数の実行を文字列に埋
め込めるように
でも、どうせ使えないんでしょ?
Babel(旧6to5)
es6のコードをes5にトランスパイル。
altJSみたいなもの。
Babel(旧6to5)
Babel(旧6to5)
React 入ってる
実際に使ってみた感想
Object.assign
Objectのcloneやmergeしたりが簡単に
Object.assign
Objectのcloneやmergeしたりが簡単に
マジ便利!
Class
嬉しい。
もちろんextendsも
Class
嬉しい。
もちろんextendsも
マジ便利!
Module
export / importにも対応して、依存
管理ができるように
Module
export / importにも対応して、依存
管理ができるように
ぱねぇ!
Arrow Function
thisを束縛して、今までやってたこと↓のが(だいたい)不要に。
var _this = this;
hogehoge.bind(this)
Arrow Function
thisを束縛して、今までやってたこと↓のが(だいたい)不要に。
var _this = this;
hogehoge.bind(this)
いい!
Template Literals
複数行の記述、変数の仕様、関数の実行を文字列に埋
め込めるように
Template Literals
複数行の記述、変数の仕様、関数の実行を文字列に埋
め込めるように
マジぱねぇす
Template Literals
複数行の記述、変数の仕様、関数の実行を文字列に埋
め込めるように
※ただし評価された時にキャッシュされるぽいので
関数化とかしないと使い回しづらい
Railsでもだいたい使えるよ!

Contenu connexe

Tendances

あの日見たMVCを僕たちはまだ知らない for RoR
あの日見たMVCを僕たちはまだ知らない for RoRあの日見たMVCを僕たちはまだ知らない for RoR
あの日見たMVCを僕たちはまだ知らない for RoRshinnosuke kugimiya
 
Js frameworkの紹介
Js frameworkの紹介Js frameworkの紹介
Js frameworkの紹介Ryo Shimada
 
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」y torazuka
 
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介Yusuke Hirao
 
Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.jsTanUkkii
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCYu Nobuoka
 
Async DeepDive basics
Async DeepDive basicsAsync DeepDive basics
Async DeepDive basicsKouji Matsui
 
第三回 iOSアプリ勉強会
第三回 iOSアプリ勉強会第三回 iOSアプリ勉強会
第三回 iOSアプリ勉強会Daisuke Tsukagoshi
 
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるJavascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるShunji Konishi
 
async/awaitダークサイド is 何
async/awaitダークサイド is 何async/awaitダークサイド is 何
async/awaitダークサイド is 何Kouji Matsui
 

Tendances (10)

あの日見たMVCを僕たちはまだ知らない for RoR
あの日見たMVCを僕たちはまだ知らない for RoRあの日見たMVCを僕たちはまだ知らない for RoR
あの日見たMVCを僕たちはまだ知らない for RoR
 
Js frameworkの紹介
Js frameworkの紹介Js frameworkの紹介
Js frameworkの紹介
 
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
JJUG CCC 2013 Fall「JVMコードリーディング入門-JVMのOS抽象化レイヤーについて-」
 
JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介JavaScriptユーティリティライブラリの紹介
JavaScriptユーティリティライブラリの紹介
 
Isomorphic web development with scala and scala.js
Isomorphic web development  with scala and scala.jsIsomorphic web development  with scala and scala.js
Isomorphic web development with scala and scala.js
 
GUI アプリケーションにおける MVC
GUI アプリケーションにおける MVCGUI アプリケーションにおける MVC
GUI アプリケーションにおける MVC
 
Async DeepDive basics
Async DeepDive basicsAsync DeepDive basics
Async DeepDive basics
 
第三回 iOSアプリ勉強会
第三回 iOSアプリ勉強会第三回 iOSアプリ勉強会
第三回 iOSアプリ勉強会
 
Javascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみるJavascriptのあれやこれやをまとめて説明してみる
Javascriptのあれやこれやをまとめて説明してみる
 
async/awaitダークサイド is 何
async/awaitダークサイド is 何async/awaitダークサイド is 何
async/awaitダークサイド is 何
 

En vedette

JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6Aayush Shrestha
 
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめましたNet Kanayan
 
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScriptRyo Maruyama
 
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returnsdynamis
 
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptMohd Saeed
 
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server sildeNet Kanayan
 
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうGoogle App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうkenji4569
 
はじめてのWallaby.js
はじめてのWallaby.jsはじめてのWallaby.js
はじめてのWallaby.jsShunta Saito
 
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)taskie
 
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 ltushiboy
 
断言して間違えると信頼度が低下するというベイズの話
断言して間違えると信頼度が低下するというベイズの話断言して間違えると信頼度が低下するというベイズの話
断言して間違えると信頼度が低下するというベイズの話Junya Hayashi
 
アニメーションの実装つらい話
アニメーションの実装つらい話アニメーションの実装つらい話
アニメーションの実装つらい話kata shin
 
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6Haraguchi Go
 

En vedette (20)

JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6JavaScript : What is it really? AND Some new features in ES6
JavaScript : What is it really? AND Some new features in ES6
 
JavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, PerformanceJavaScript 実践講座 Framework, Tool, Performance
JavaScript 実践講座 Framework, Tool, Performance
 
jQuery勉強会#4
jQuery勉強会#4jQuery勉強会#4
jQuery勉強会#4
 
ES6 - JavaCro 2016
ES6 - JavaCro 2016ES6 - JavaCro 2016
ES6 - JavaCro 2016
 
kontainer-js
kontainer-jskontainer-js
kontainer-js
 
ES6 はじめました
ES6 はじめましたES6 はじめました
ES6 はじめました
 
Prototypeベース in JavaScript
Prototypeベース in JavaScriptPrototypeベース in JavaScript
Prototypeベース in JavaScript
 
JavaScript.Next Returns
JavaScript.Next ReturnsJavaScript.Next Returns
JavaScript.Next Returns
 
Getting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascriptGetting started with ES6 : Future of javascript
Getting started with ES6 : Future of javascript
 
FileReader and canvas and server silde
FileReader and canvas and server sildeFileReader and canvas and server silde
FileReader and canvas and server silde
 
Google App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろうGoogle App EngineでTwitterアプリを作ろう
Google App EngineでTwitterアプリを作ろう
 
Startup JavaScript
Startup JavaScriptStartup JavaScript
Startup JavaScript
 
はじめてのWallaby.js
はじめてのWallaby.jsはじめてのWallaby.js
はじめてのWallaby.js
 
ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)ECMAScript 6 Features(PDF 版)
ECMAScript 6 Features(PDF 版)
 
Hello npm
Hello npmHello npm
Hello npm
 
Nds meetup8 lt
Nds meetup8 ltNds meetup8 lt
Nds meetup8 lt
 
断言して間違えると信頼度が低下するというベイズの話
断言して間違えると信頼度が低下するというベイズの話断言して間違えると信頼度が低下するというベイズの話
断言して間違えると信頼度が低下するというベイズの話
 
アニメーションの実装つらい話
アニメーションの実装つらい話アニメーションの実装つらい話
アニメーションの実装つらい話
 
Learn ES2015
Learn ES2015Learn ES2015
Learn ES2015
 
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
Bacon.jsではじめる関数型リアアクティブプログラミング入門 with ES6
 

Similaire à 150421 es6とかな話

traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験Toshio Ehara
 
JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013dynamis
 
ES6で始めるNode.js / Starting NodeJS Development with ES6
ES6で始めるNode.js / Starting NodeJS Development with ES6ES6で始めるNode.js / Starting NodeJS Development with ES6
ES6で始めるNode.js / Starting NodeJS Development with ES6Taro Odashima
 
JavaScript.Next
JavaScript.NextJavaScript.Next
JavaScript.Nextdynamis
 
Scala Daysに行ってみて
Scala Daysに行ってみてScala Daysに行ってみて
Scala Daysに行ってみてKota Mizushima
 
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験Toshio Ehara
 
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについてNobukazu Hanada
 
Kanazawa.js.Next
Kanazawa.js.NextKanazawa.js.Next
Kanazawa.js.Nextdynamis
 

Similaire à 150421 es6とかな話 (8)

traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験traceur-compilerで ECMAScript6を体験
traceur-compilerで ECMAScript6を体験
 
JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013JavaScript (ECMAScript) 2013
JavaScript (ECMAScript) 2013
 
ES6で始めるNode.js / Starting NodeJS Development with ES6
ES6で始めるNode.js / Starting NodeJS Development with ES6ES6で始めるNode.js / Starting NodeJS Development with ES6
ES6で始めるNode.js / Starting NodeJS Development with ES6
 
JavaScript.Next
JavaScript.NextJavaScript.Next
JavaScript.Next
 
Scala Daysに行ってみて
Scala Daysに行ってみてScala Daysに行ってみて
Scala Daysに行ってみて
 
traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験traceur-compilerで未来のJavaScriptを体験
traceur-compilerで未来のJavaScriptを体験
 
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
現在のWebフロントエンドの現状と愚痴と、それに対するHaxeフロントエンドライブラリMageについて
 
Kanazawa.js.Next
Kanazawa.js.NextKanazawa.js.Next
Kanazawa.js.Next
 

Dernier

論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A surveyToru Tamaki
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムsugiuralab
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものですiPride Co., Ltd.
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...Toru Tamaki
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略Ryo Sasaki
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Yuma Ohgami
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdftaisei2219
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNetToru Tamaki
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)Hiroki Ichikura
 

Dernier (9)

論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
 
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システムスマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
 
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する       2024/04/19 の勉強会で発表されたものですSOPを理解する       2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
 
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
 
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
 
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
 
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdfTSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
 
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
 
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
 

150421 es6とかな話