Livesense technightでの発表内容

1. ServerSide
ES6
(๑╹◡╹๑)ﾉ
timakin / @timadayon

2. こんにちはこんにちは！

3. Profile:
- DeNA入社１年目
- エンジニア
- github: timakin
- blog: timakin.log
およそ8 9ヶ月ほど
リブセンス（様）
にはお世話になりました

4. Twitter: @timadayon
idも画像も違う。
気分で下手に
変えていいもんじゃない。

5. [某所での初タスク]
JavaScriptでのちょっとしたDOM操作

6. 僕が取った手段

7. getElementById(..)
onClick= hoge()

8. jQueryってものがあってな。

9. リブセンス様、その節はほんとうに
温かい目で見守ってくださって
ありがとうございました。
ほんっとに死ぬほど感謝してます。

10. 時は流れましたが…

11. 今日は

13. 一部ES6の紹介と、
フロントエンドではなく、
サーバーサイドの言語として
ES6を実際に使ってみたときの話。

14. • Block scoping
• Classes (strict mode only)
• Collections
• Typed arrays
• Generators
• Binary and Octal literals
• Object literal extensions
• Promises
• New String methods
• Symbols
• Template strings
• Arrow Functions
ES6 features ship with
Node.js by default(v4.2.1)

15. • Block scoping
• Classes (strict mode only)
• Collections
• Typed arrays
• Generators
• Binary and Octal literals
• Object literal extensions
• Promises
• New String methods
• Symbols
• Template strings
• Arrow Functions
ES6 features ship with
Node.js by default(v4.2.1)

16. 実際手元で触ってて
気になったのは
これくらい…

17. • Block scoping
• 変数のスコープ、定数化
• letで宣言された変数は、その変数が定義されたブロックにスコープ
が限定される。
• constで定数化。

18. function varTest() {
var x = 31;
if (true) {
var x = 71; // same variable!
console.log(x); // 71
}
console.log(x); // 71
}
function letTest() {
let x = 31;
if (true) {
let x = 71; // different variable
console.log(x); // 71
}
console.log(x); // 31
}

19. const MY_FAV = 7;
// this will fail silently in Firefox and
Chrome (but does not fail in Safari)
MY_FAV = 20;
// will print 7
console.log("my favorite number is: " +
MY_FAV);
// trying to redeclare a constant throws an
error
const MY_FAV = 20;
// the name MY_FAV is reserved for constant
above, so this will also fail
var MY_FAV = 20;

20. • Promises
• 非同期処理でメソッドを繋げる時、コールバック地獄を回避しつつ、
メソッドチェーンで書くことのできる子。
• もともとES6どうこうの前に結構使われてた。

21. function timeout(duration = 0) {
return new Promise((resolve, reject) => {
setTimeout(resolve, duration);
})
}
var p = timeout(1000).then(() => {
return timeout(2000);
}).then(() => {
throw new Error("hmm");
}).catch(err => {
return Promise.all([timeout(100),
timeout(200)]);
})

22. • Classes (strict mode only)
• 目玉商品。JavaScriptで（他の言語と同じような）クラスがかけ
るよ。
• 最高だよ。もうprototypeとか書かなくて済むよ。
• 書かなくて済むけど、prototypeの糖衣構文です。

23. class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' makes a
noise.');
}
}
class Dog extends Animal {
speak() {
console.log(this.name + ' barks.');
}
}

24. • Arrow Functions
• 関数型っぽいfunctionの書き方、レキシカルなthis（thisの参照
先が、意図に反してグローバルオブジェクトになって、「あれ？こ
のインスタンスのプロパティ更新されないぞ？」「値が入ってない
ぞ？」というようなことにならない。そのメソッドが呼び出される
オブジェクトの中に閉じている状態）を簡単に扱える。
• というかthisが自動で関数にbindされる

25. function Person(){
this.age = 0;
setInterval(() => {
this.age++; // |this| properly refers to
the person object
}, 1000);
}
var p = new Person();

26. • Generators (Function)
• イテレーターを簡単に作れる特殊な関数。任意のタイミングで処理
を止められる。オブジェクト自身が今どこまで処理を進めたか覚え
ておき、next()メソッドを使って止めたところから先の処理を再度
実行する。
• 特に用事がなかったので僕は使いませんでした。

27. function* anotherGenerator(i) {
yield i + 1;
yield i + 2;
yield i + 3;
}
function* generator(i){
yield i;
yield* anotherGenerator(i);
yield i + 10;
}
var gen = generator(10);
console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13

28. 実際に使ってみた例

29. モバイルの勉強がてら、
SwiftでNewsアプリ（笑）を作ってたんですが、
SwiftTaskというSwift版Promise実装
みたいなやつが、マルチリクエスト用途で使いにくくて、
「いっそNodeでAPI置いて、
モバイルが叩くエンドポイントは
１つに統一しよう…どうせ分化する予定だったし」
と思った。

30. その際に、ちょうどNode v4.0.0の
io.jsとNode.js統合があったので、
じゃあもうES6に置き換えようと決めた。
（途中まではES5でした）

31. 具体例

32. コントローラー部分

33. "use strict";
const _ = require('underscore');
const express = require('express');
const router = express.Router();
const newsCollectionModel = require('../
models/newsCollection.model');
router.get('/', (req, res) => {
let newsCollection = new
newsCollectionModel();
newsCollection.get(req, (items) => {
res.json({
response: items
});
});
});

34. モデル部分

35. class News {
constructor(props) {
this.title = props.title;
this.url = props.url;
this.origin = props.origin;
this.image_uri = props.image_uri;
this.created_at = props.created_at;
}
...
}

36. _convertNewsModelToObject(items) {
return _.flatten(items).map((item) => item.toObject());
}
get(req, cb) {
let promises = _.map(urls[req.query.country],
(url) => { return fetch(url, (res) => { return
res.body.items }) });
Promise.all(promises)
.then((items) => _.flatten(items) )
.then((items) => this._filterFeedlyItemsByImageExistance(items) )
.then((items) => this._createNewsModelCollectionByFeedly(items) )
.then((items) => this._convertNewsModelToObject(items) )
.then((items) => this._sortByCreatedAt(items) )
.then((items) => cb(items), (err) => console.error(err.stack) );
}

37. • Arrow Functionによってコールバック関数に
使う文字数を減らせて、視覚的に健康。コントロー
ラーだと多用するので結構変わりますよ。
• 特にモデルクラスだと思いますが、
constructorとそれ以外のメソッドを同じ
class内の記述としてかけるので、包含関係を意
識しやすいです。（prototypeを使って別々に
書かなきゃいけない頃とは違い、ちゃんと一個の
クラスとして書けてる感じがします）
• underscore.jsとArrow functionの合わせ
技で、軽いビジネスロジックなら１行で済ませる
ことができました。（underscore初見の人か
らすると邪魔っぽいので、ここは要検討）

38. • まとめて複数のAPIをコールするときとか、
request用のpromiseインスタンスを作る
メソッドを汎用の関数として用意しておく。
• Promise.allで一気に結果を取得した後、
then(…).then(…)で、綺麗に値をフィルター
/加工できます。
• requireした結果を格納してる変数を誤って
更新しないように、全部constで持っておく
と安全。
• package.jsonにnodeのバージョンを記載
しておけば、herokuで最新版が動かせるので、
すぐ試せます。webpackとかいらない。

39. 以下要検討の課題

40. • APIから返ってきた値のフィルタリングの処
理を、条件ごとに別関数に分けた。
• が、関数の数を減らそうと思うとthenの中
身が地獄になり、関数の数を増やせばthen
の中身は１行で済んでも、関数が増えすぎて
地獄になるか、underscoreで読みにくく
なるか、という板挟みだった。苦肉の策とし
てメソッド名を長くして中身の処理を命名か
ら推測しやすくした。
• 短く書けるからって調子乗ったら死にました。
(これはES6ではなく完全に僕の問題です)

41. • modulesがない…実装はよ…
• とはいえrequire50倍速という もあるし、
別にもうmodule.exportsで事足りる。
• Strong ModeかStrict Modeか迷って、
中途半端にStrict Mode使ってましたが、
Strong Modeで移行すればよかった。。

42. ともあれ、サーバーサイドの
言語として非常に使い勝手がいいです。
expressも軽量だから
書き換えがしやすいです。

43. フロントエンドでES6使うことが
多いですが、ES6のシンタックスだけ
速習したいなら、サーバーサイドから
入ったほうがいいと思います。
Node最新バージョン入れたらすぐ
動くのと、フロントエンド
フレームワークの激流に気を取られず、
シンタックスの学習に
集中できるからです。

44. おわり。