覚醒JavaScript -ES6で作るIsomophicアプリケーション-

覚醒JavaScript
ES6で作るIsomophicアプリケーション
株式会社サイバード
ゲーム事業本部イケメンスタジオ
大西啓太郎

自己紹介
{
name: '大西啓太郎',
twitter: '@keitarouhoge',
job: {
company: 'CYBIRD',
team: 'イケメンスタジオ',
role: 'WEBエンジニア',
age: '2014年新卒入社2年目'
},
skills: ['PHP', 'Ruby', 'JavaScript',
'Node.js', 'Java']
}

今日話したいこと
• ES6ってなんぞや
• Isomophicってなんぞや
• 実際に現場でES6を導入してみたという話

ES6って何？
ES6(ECMAScript6)は次のECMAScriptのスタンダードであり、
2015年6月に仕様が確定し、現在色々なブラウザやNode.jsなど
のJavaScript実行エンジンで実装が進んでいます。
新しい構文のサポートなどでJavaScriptでのプログラミングの表
現力が増します!
*ECMAScript: Ecma Internationalによって標準化されたスクリ
プト言語である。実装ごとの互換性が低い JavaScript 類（特に
JScript）の標準を定めたものである

ES6 -> ECMAScript 2015（ES2015）
ES6と今まで呼ばれていたものが改名された。今後は年単位のよ
り細かいリリースを計画しているようです

class構文をサポート
class Animal
{
constructor(name)
{
this.name = name;
}
sayName()
{
console.log('my name is %s', this.name);
}
tree()
{
return 'Animal';
}
static classname()
{
return 'Animal';
}
}

class構文をサポート
継承も簡単にできるようになりました
class Dog extends Animal
{
sayName()
{
console.log('wanwan. my name is %s', this.name);
}
tree()
{
return (super.tree() + ':Dog');
}
}

Generatorをサポート
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);

Generatorはすごい
• Generatorが関数の実行を状態を保ったまま中断できる特性
を活かして非同期処理の制御を行うことができる
• 非同期処理に対して、手続き型ちっくなアプローチが可能で
try~catch構文もカジュアルに利用することができる
• 『co』というライブラリと一緒に使うことですごい使いやす
くなる

1秒後に足し算結果を返す非同期関数
var calc = function(a, b)
{
return new Promise(function(resolve) {
setTimeout(function() {
resolve(a + b);
}, 1000);
});
}

{
resolve(a + b);
}, 1000);
});
}
calc(10, 20).then(function(result){
console.log(result);
});

Call Back Hell
});
});
});

then Chain
calc(1, 2)
.then(function(result){
return calc(10, 20);
})
return calc(100, 200);
})
});

非同期処理の並列実行
Promise.all([
calc(1, 2),
calc(10, 20),
calc(100, 200),
])
.then(function(results){
console.log(results);
});

Generatorを知らない
JavaScriptはこれが限界

yieldによる関数実行の中断
{
resolve(a + b);
}, 1000);
});
}
var co = require('co');
co(function *(){
var a = yield calc(1, 2);
console.log(a);
});

Call Back Hell, then Chainいらない
co(function *(){
var a = yield calc(1, 2);
console.log(a);
var b = yield calc(10, 20);
console.log(b);
var c = yield calc(100, 200);
console.log(c);
});

並列実行も簡単
co(function *(){
var results = yield [
calc(1, 2),
calc(10, 20),
calc(100, 200),
];
console.log(results);
});

大本命『Async, Await』
ES7でやってくる
var run = async function(){
var result = await calc(1, 2);
};
run();

JavaScriptの非同期処理制御の歴史
1. Ajaxの登場による非同期処理に対する需要が高ぶる
2. Callback Hell(コールバック地獄)(Ajax浸透)
3. ThenableインタフェースによるCallback Hellからの脱出・高
度な非同期処理制御の提供開始(Promise)
4. Generator構文, coによる手続き型ちっくな効果可読性を重視
した制御が可能に(ES6)
5. 言語レベルでの非同期処理制御のサポート(ES7)

Template Strings
`string text`
`string text line 1
string text line 2`
`string text ${expression} string text`

Default Paramaters
function add(x=10, y= 20)
{
return x+y;
}
console.log('1+2 = %s', add(1,2));
console.log('1 = %s', add(1));
console.log(' = %s', add());

ES6によってJavaScriptがもっと楽し
く書けるようになった！！

ブラウザでのES6対応状況
https://kangax.github.io/compat-table/es6/

デスクトップブラウザ
Edge > Firefox > Chrome >>>> IE, Safari

サーバーランタイム・モバイルブラウザ
Node.js v4から一気対応が増えた！
モバイルはまだまだ時間がかかりそう

こう思いませんか??
• なんだ数年後の話か
• こんな未来の話はいつの間にか消え去るのがいつもの流れ
• やっぱTypeScriptが最高なんや!

つまりどういうことだってばよ
ES6で書かれたJavaScriptのコードをES5(従来のブラウザで実行
できる形に変換します)
『トランスコンパイラ』と呼ばれています。
$ babel xxx.js > yyy.js
$ babel-node xxx.js

これが
class Animal
{
constructor(name)
{
this.name = name;
}
sayName()
{
}
}

'use strict';
var _createClass = .......
function _classCallCheck(instance, Constructor) { ..... }
var Animal = (function () {
function Animal(name) {
_classCallCheck(this, Animal);
this.name = name;
}
_createClass(Animal, [{
key: 'sayName',
value: function sayName() {
}
}]);
return Animal;
})();
※一部削っています。

今日からES6で
JavaScriptは書ける!!

JavaScriptビルドツール
• Grunt
• Gulp
• Fly
これらのツールを使うことでBabelでのトランスコンパイル作業
を自動化することも簡単にできるようになります。
※FlyはES6/ES7で作られたビルドツールです。

Isomophicのコンセプト
アプリケーションの状態とコードは、ブラウザとサーバ間で共
有されています。サーバがリクエストを受け取ると、新しい
ﬂux-reactアプリケーションインスタンスを生成してレンダリン
グをします。すると、ストレージ（アプリケーション）の状態
がそのレンダリング済みのHTMLアウトプットに渡されます：
サーバはこのレンダリング済みのファイルで応答します。ブラ
ウザは（BrowserifyやWebpackで作られた）同じコードをロー
ドし.....

私の中のIsomophicのキーワード
• Node.js/JavaScriptで書かれたコードである
• サーバーサイド・ブラウザ(クライアント)環境にてソースコー
ド・ライブラリを使い回すことができる
• サーバーサイド・ブラウザどっちでも動くプログラムである

Isomophicであることに
よるメリット

Validation処理を1つのソースコード
で定義することでサーバー・クライア
ント両方でValidationできる
ゲームであればチート対策などに効果的！
しかも低コスト！

サーバー・クライアントのどっちかソ
ースコードを修正するだけでもう片方
の振る舞いも変化させることができ
る。
ソースコードの修正が少なくて低コスト!

全部JavaScriptで書くことができる
学習コストが低い!
サーバー担当・クライアント担当みたいな変な役割を無くすこ
とでコミュニケーションコスト削減!

ブラウザ用JavaScriptの出力などは自動化!
• RequireJS
• Browserify
• Webpack
最近はWebpackが流行っている模様

こんなはなしがやってきた
• 某シリーズもののゲームの集計システムを作ってくれ。
• バッチ処理で夜間に集計を集計をブンブン回して、集計結果
をAPIで取得できて、ブラウザで閲覧できるやつね。
• 将来的に色々なタイトルで利用するから汎用性高くてイケて
るやつね。

こんな構成に
• バッチ処理: Node.js
• API: Node.js(Express)
• ブラウザ: Backbone.js / Marionette.js

お気づきでしょうか・・・

そう、すべてJavaScriptで作られてい
ることに
• Node.js(v4.0.0)
• ECMAScript6
• トランスコンパイラ: Babel

他にも
• ソースコードのリポジトリも1つで全部やっています。
• OSSのライブラリに頼って開発していますが、全部同じライ
ブラリを使っています。
• テスティングフレームワークも『Mocha』『power-assert』
『Nightmare2』などを使って同じしくみでテストができてい
ます。

export function* build () {
yield this.start(['to5', 'browserify'])
}
export function* to5 () {
yield this.clear(paths.dist.lib)
yield this
.source(paths.src)
.babel({
stage: 0, sourceMaps: true
})
.target(paths.dist.lib)
}
export function* browserify () {
yield this.clear(paths.dist.browser)
yield this
.source(paths.dist.lib + '/www/public/app.js')
.browse()
.concat('app.js')
.target(paths.dist.browser)
}

ES6/Isomiphic使ってよかったこと
• Class構文により、やっとJavaScriptが普通の言語になったの
で、他の言語の人もJavaScriptにとっつきやすくなった
• Generatorの導入によって非同期処理の制御が簡単にできる
ようになった
• 書くソースコードの量が圧倒的に少なくて楽できている
• JavaScript芸人というポジションを確立できたこと

ES6/Node.jsを現場に浸透させるため
の苦労
• 社内・社外のパートナー含め、周りはPHPの人が多い
• JavaScriptはある程度触れる人は多いが、新しく覚えてもら
うことも多い

Lesson教材が実は充実している
• javascripting(JavaScriptお勉強用ライブラリ)
• learnyounode(Node.jsお勉強用ライブラリ)
• tower-of-babel(ES6お勉強用ライブラリ)
• how-to-npm(パッケージ管理に関してのお勉強ライブラリ)

辛い話
• 他の言語も書いてみたい(Golang, Elixir, Rubyとかね)
• Class構文でPropertyを扱いづらい
class Sample
{
name: 'sample';
sayName()
{
}
}
// my name is undefined
new Sample().sayName();

※半年後にはどうなっているかわかりませんが常に最新の
JavaScriptを追い求めていきます！
みんなでJavaScriptの波に乗りましょう!

ご清聴ありがとうござい
ました。

覚醒JavaScript -ES6で作るIsomophicアプリケーション-

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to 覚醒JavaScript -ES6で作るIsomophicアプリケーション-

Similar to 覚醒JavaScript -ES6で作るIsomophicアプリケーション- (20)

覚醒JavaScript -ES6で作るIsomophicアプリケーション-