SlideShare a Scribd company logo
1 of 76
Download to read offline
ES2015の今とこれから
自己紹介
ホスピタリティエンジニア
ライオン
@lion_man44
今日のターゲット
・ES2015をまだ使っていない人
・ES2015を知らない人    
・ES2015をこれから使いたい人
・ES2015をよく分かってない人
今日話す事
・ES2015
・ES.next
去年は大分ES2015をやり尽くした感
ふとここで見てみる
Qiita
まだまだES2015という言い方は浸透していない
よう
Google トレンド
まだまだES2015という言い方は浸透していない
よう
ES5の時はそれで良かったのですが、今回の仕
様書から正式名称はES2015です
まぁ伝われば良いかと
話変わりますが、現場でES2015使っていますか?
お願いです
ES2015を使いましょう
何故始めなければいけないのか
もうブラウザに取り込まれている
Chrome
FireFox
Safari
Edgeは...一旦忘れましょう
(ChakraCoreはいずれ対応するはず)
V8, SpiderMonkey, JavaScriptCore
が対応を既に進めている
今が時代に乗る瞬間でもあるんです
乗りましょう、時代に
おもちゃ言語と呼ばれていた時代と
「さよなら」しましょう
ここからはおさらいです
ES2015が何をもたらしてくれたか
Class構文
function Hoge() {
this.name = ‘Hoge Class’;
}
Hoge.log = function() {
console.log(‘log method’);
};
Hoge.prototype.name = function() {
console.log(this.name + ‘ です’);
};
class Hoge {
constructor() {
this.name = ‘Hoge Class’;
}
static log() {
console.log(‘log method’);
}
name() {
console.log(this.name + ‘ です’);
}
}
// extendsもあるよ
class Foo extends Hoge {}
内部構造が分かりやすい!
let, const
hoge = 1; // => global汚染
var foo = ‘abc’; // => ホイスト、再代入可
function hoge() {
console.log(i);
for(var i = 0; i < 10; i++) {
console.log(i);
}
}
hoge(); // => 通っちゃう
let hoge = 1; // => ホイストなし、再代入可
const foo = ‘abc’; // => ホイストなし、再代入不可
function hoge() {
console.log(i);
for(let i = 0; i < 10; i++) {
console.log(i);
}
}
hoge(); // => Error
ブロックスコープ嬉しい!
Arrow Function
function hoge() {
console.log(1);
}
var hoge = function() {
console.log(1);
};
(function() { console.log(1); })();
let hoge = () => console.log(1);
(() => console.log(1))();
全体的に短くなって良い
Destructuring
var a = 1;
var b = 2;
var tmpB = b;
var b = a;
var a = tmpB;
var a = 1;
var b = 2;
var [b, a] = [a, b];
let [c, ...d] = [1, ‘a’, ‘b’, ‘c’];
はぁ〜〜便利〜〜〜
Rest Parameters
var hoge = function(a, b) {
var args = Array.prototype.slice.call(
arguments,
hoge.length
);
};
const hoge = (a, b, ...args) => {
}
これももはや便利以外の何者でも無い
Default Params
var hoge = function(name) {
var foo = name || ‘’;
console.log(foo);
}
const hoge = (name = ‘’) => {
console.log(name);
}
イイ!イイ!
Iterator
hoge = (arr) => {
let nextIndex = 0;
return {
next: () => {
return nextIndex < arr.length ?
{ value: arr[nextIndex++], done: false} :
{ done: true };
}
}
}
foo = hoge([1, 2]);
console.log(foo.next()); // => 1, done: false
console.log(foo.next()); // => 2, done: false
console.log(foo.next()); // => done: true
Generator
function* hoge() {
var index = 0;
while(true) yield index++;
}
var gen = hoge();
gen.next(); //=> value: 0, done: false
gen.next(); //=> value: 1, done: false
gen.return(); //=> value: undefined, done: true
良さそう
Template Literal
var hoge = ‘ほげお’;
console.log(‘this name is ‘ + hoge);
let hoge = ‘ほげお’;
console.log(`this name is ${hoge}`);
例だとあまりメリット感じられないけど、一つの塊
であるということは分かりやすい
もはや採用しない理由が無い
移行コスト?
とりあえずbabeっとけ
そんでも分からなかったら懇親会で!
これからES2015はどうなっていくのか?
ES.nextと呼ばれています
1年ごとに更新(ESなんとか)されていくようです
ES.nextに入る内容はasync/await
他もいろいろとproposalに上がっているので
tc39/ecma262を見ると面白いかも
ここからは自分の思い
ESの開発スピードが今後は上がっていきます
今やってない人はどこで追いつくんですかね?
失敗?
コスト?
(自分の経験談です)
失敗しましょう!
コスト(を最低限)かけましょう!
最近ボロ泣きした宇宙兄弟から文言を借ります
「本気の失敗には価値がある」
©小山宙哉/講談社
ご清聴ありがとうございました

More Related Content

What's hot

「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜
「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜
「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜Chihiro Tomita
 
「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018
「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018
「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018Masanori Hayashi
 
20151010 四国クラウドお遍路2015 LT
20151010 四国クラウドお遍路2015 LT20151010 四国クラウドお遍路2015 LT
20151010 四国クラウドお遍路2015 LTMidori Ikegami
 
「フレームワークを使っていれば 脆弱性は出ない」って本当?
「フレームワークを使っていれば 脆弱性は出ない」って本当?「フレームワークを使っていれば 脆弱性は出ない」って本当?
「フレームワークを使っていれば 脆弱性は出ない」って本当?thatblue
 
地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話Tomoe Sawai
 
いずみちゃんナイト15 第一部資料
いずみちゃんナイト15 第一部資料いずみちゃんナイト15 第一部資料
いずみちゃんナイト15 第一部資料いずみ よねざわ
 
20180425 phpstudy-my-first-laravel
20180425 phpstudy-my-first-laravel20180425 phpstudy-my-first-laravel
20180425 phpstudy-my-first-laravelMasanori Hayashi
 
35歳だけどrailsチュートリアルを完走したら人生が変わった話
35歳だけどrailsチュートリアルを完走したら人生が変わった話35歳だけどrailsチュートリアルを完走したら人生が変わった話
35歳だけどrailsチュートリアルを完走したら人生が変わった話Hironori Yokoyama
 
社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話
社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話
社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話Hironori Yokoyama
 
田舎のWeb屋さん@俺聞け6
田舎のWeb屋さん@俺聞け6田舎のWeb屋さん@俺聞け6
田舎のWeb屋さん@俺聞け6Yohei Tsutsumi
 
在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選Tomoe Sawai
 

What's hot (13)

「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜
「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜
「ダウンシフト」という越境〜成長を追い求めなくなってから見えてきたワクワク〜
 
「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018
「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018
「クソコード」言い換えのご提案 - 2018-12-15 #phpcon2018
 
20151010 四国クラウドお遍路2015 LT
20151010 四国クラウドお遍路2015 LT20151010 四国クラウドお遍路2015 LT
20151010 四国クラウドお遍路2015 LT
 
「フレームワークを使っていれば 脆弱性は出ない」って本当?
「フレームワークを使っていれば 脆弱性は出ない」って本当?「フレームワークを使っていれば 脆弱性は出ない」って本当?
「フレームワークを使っていれば 脆弱性は出ない」って本当?
 
地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話地方フリーランスとして ゆるいチームで生き抜いてる話
地方フリーランスとして ゆるいチームで生き抜いてる話
 
いずみちゃんナイト15 第一部資料
いずみちゃんナイト15 第一部資料いずみちゃんナイト15 第一部資料
いずみちゃんナイト15 第一部資料
 
20180425 phpstudy-my-first-laravel
20180425 phpstudy-my-first-laravel20180425 phpstudy-my-first-laravel
20180425 phpstudy-my-first-laravel
 
Ti.tokyo.gig
Ti.tokyo.gigTi.tokyo.gig
Ti.tokyo.gig
 
35歳だけどrailsチュートリアルを完走したら人生が変わった話
35歳だけどrailsチュートリアルを完走したら人生が変わった話35歳だけどrailsチュートリアルを完走したら人生が変わった話
35歳だけどrailsチュートリアルを完走したら人生が変わった話
 
社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話
社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話
社外コニュニティでLTした話とQiitaアドベントカレンダーに参加した話
 
SJ2018LT
SJ2018LTSJ2018LT
SJ2018LT
 
田舎のWeb屋さん@俺聞け6
田舎のWeb屋さん@俺聞け6田舎のWeb屋さん@俺聞け6
田舎のWeb屋さん@俺聞け6
 
在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選在宅フリーランスで 失敗した話3選
在宅フリーランスで 失敗した話3選
 

Viewers also liked

2016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り201605142016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り20160514Seigo Tanaka
 
その時、Bowerに何が起こったのか
その時、Bowerに何が起こったのかその時、Bowerに何が起こったのか
その時、Bowerに何が起こったのかlion-man
 
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディングRiot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディングTsutomu Kawamura
 
いまさら始めてみたRxJS
いまさら始めてみたRxJSいまさら始めてみたRxJS
いまさら始めてみたRxJSlion-man
 
ライオンでも分かるVuejs
ライオンでも分かるVuejsライオンでも分かるVuejs
ライオンでも分かるVuejslion-man
 
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発   takusuta tech conf #1Riot.jsを用いたweb開発   takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1Keisuke Imai
 

Viewers also liked (9)

2016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り201605142016初夏のJavaScript祭り20160514
2016初夏のJavaScript祭り20160514
 
その時、Bowerに何が起こったのか
その時、Bowerに何が起こったのかその時、Bowerに何が起こったのか
その時、Bowerに何が起こったのか
 
gulp勉強会@IVP
gulp勉強会@IVPgulp勉強会@IVP
gulp勉強会@IVP
 
Riot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディングRiot + generator で始める新しいデータバインディング
Riot + generator で始める新しいデータバインディング
 
いまさら始めてみたRxJS
いまさら始めてみたRxJSいまさら始めてみたRxJS
いまさら始めてみたRxJS
 
ライオンでも分かるVuejs
ライオンでも分かるVuejsライオンでも分かるVuejs
ライオンでも分かるVuejs
 
Riot.jsに触れてみた話
Riot.jsに触れてみた話Riot.jsに触れてみた話
Riot.jsに触れてみた話
 
Riot.jsを用いたweb開発 takusuta tech conf #1
Riot.jsを用いたweb開発   takusuta tech conf #1Riot.jsを用いたweb開発   takusuta tech conf #1
Riot.jsを用いたweb開発 takusuta tech conf #1
 
Angular1&2
Angular1&2Angular1&2
Angular1&2
 

ES2015の今とこれから