Serverside ES6@Livesense technight
0 likes2,011 views
Livesense technightでの発表内容
![[某所での初タスク]
JavaScriptでのちょっとしたDOM操作](https://image.slidesharecdn.com/sses6-151026135600-lva1-app6892/85/Serverside-ES6-Livesense-technight-5-320.jpg)
![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)]);
})](https://image.slidesharecdn.com/sses6-151026135600-lva1-app6892/85/Serverside-ES6-Livesense-technight-21-320.jpg)
![_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) );
}](https://image.slidesharecdn.com/sses6-151026135600-lva1-app6892/85/Serverside-ES6-Livesense-technight-36-320.jpg)
Serverside ES6@Livesense technight
- 2. こんにちはこんにちは！
- 3. Profile: - DeNA入社１年目 - エンジニア - github: timakin - blog: timakin.log およそ8 9ヶ月ほど リブセンス（様） にはお世話になりました
- 6. 僕が取った手段
- 10. 時は流れましたが…
- 11. 今日は
- 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)
- 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. 実際に使ってみた例
- 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で移行すればよかった。。
- 44. おわり。