覚醒JavaScriptES6で作るIsomophicアプリケーション

株式会社サイバードゲーム事業本部イケメンスタジオ大西 啓太郎

自己紹介

{ name: '大西 啓太郎',

twitter: '@keitarouhoge', job: { company: 'CYBIRD', team: 'イケメンスタジオ',

role: 'WEBエンジニア',

age: '2014年新卒入社2年目'

}, skills: ['PHP', 'Ruby', 'JavaScript', 'Node.js', 'Java']}

今日話したいこと

そう、JavaScriptです

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

ES6ってなんぞや

ES6って何？ES6(ECMAScript6)は次のECMAScriptのスタンダードであり、2015年6月に仕様が確定し、現在色々なブラウザやNode.jsなどのJavaScript実行エンジンで実装が進んでいます。新しい構文のサポートなどでJavaScriptでのプログラミングの表現力が増します!

*ECMAScript: Ecma Internationalによって標準化されたスクリプト言語である。実装ごとの互換性が低い JavaScript 類（特に JScript）の標準を定めたものである

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

ECMAScript7

ES6のFeatureを一部紹介

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); });}

var calc = function(a, b){ return new Promise(function(resolve) { setTimeout(function() { resolve(a + b); }, 1000); });}

calc(10, 20).then(function(result){ console.log(result);});

Call Back Hellcalc(1, 2).then(function(result){ console.log(result); calc(10, 20).then(function(result){ console.log(result); calc(100, 200).then(function(result){ console.log(result); }); });});

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

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

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

yieldによる関数実行の中断var calc = function(a, b){ return new Promise(function(resolve) { setTimeout(function() { resolve(a + b); }, 1000); });}

var co = require('co');co(function *(){ var a = yield calc(1, 2); console.log(a);});

Call Back Hell, then Chainいらないvar co = require('co');

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);});

並列実行も簡単var co = require('co');

co(function *(){ var results = yield [ calc(1, 2), calc(10, 20), calc(100, 200), ]; console.log(results);});

Generator + co 最高！

大本命『Async, Await』ES7でやってくるvar run = async function(){ var result = await calc(1, 2); console.log(result); var result = await calc(10, 20); console.log(result); var result = await calc(100, 200); console.log(result);};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が最高なんや!

Babel

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

これがclass Animal{ constructor(name) { this.name = name; } sayName() { console.log('my name is %s', this.name); }}

'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() { console.log('my name is %s', this.name); } }]);

return Animal;})();

※一部削っています。

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

自動化！自動化！

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

Isomophicってなんぞや

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

※http://postd.cc/from-angularjs-to-react-the-isomorphic-way/

なんか難しい

私の中の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() { console.log('my name is %s', this.name); }}

// my name is undefinednew Sample().sayName();

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

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