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

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

1. 1. 覚醒JavaScript ES6で作るIsomophicアプリケーション 株式会社サイバード ゲーム事業本部イケメンスタジオ 大西 啓太郎
2. 2. 自己紹介 { name: '大西 啓太郎', twitter: '@keitarouhoge', job: { company: 'CYBIRD', team: 'イケメンスタジオ', role: 'WEBエンジニア', age: '2014年新卒入社2年目' }, skills: ['PHP', 'Ruby', 'JavaScript', 'Node.js', 'Java'] }
3. 3. 今日話したいこと
4. 4. そう、JavaScriptです
5. 5. 今日話したいこと • ES6ってなんぞや • Isomophicってなんぞや • 実際に現場でES6を導入してみたという話
6. 6. ES6ってなんぞや
7. 7. ES6って何？ ES6(ECMAScript6)は次のECMAScriptのスタンダードであり、 2015年6月に仕様が確定し、現在色々なブラウザやNode.jsなど のJavaScript実行エンジンで実装が進んでいます。 新しい構文のサポートなどでJavaScriptでのプログラミングの表 現力が増します! *ECMAScript: Ecma Internationalによって標準化されたスクリ プト言語である。実装ごとの互換性が低い JavaScript 類（特に JScript）の標準を定めたものである
8. 8. ES6 -> ECMAScript 2015（ES2015） ES6と今まで呼ばれていたものが改名された。今後は年単位のよ り細かいリリースを計画しているようです
9. 9. ECMAScript7
10. 10. ES6のFeatureを一部紹 介
11. 11. class構文をサポート class Animal { constructor(name) { this.name = name; } sayName() { console.log('my name is %s', this.name); } tree() { return 'Animal'; } static classname() { return 'Animal'; } }
12. 12. class構文をサポート 継承も簡単にできるようになりました class Dog extends Animal { sayName() { console.log('wanwan. my name is %s', this.name); } tree() { return (super.tree() + ':Dog'); } }
13. 13. 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);
14. 14. Generatorはすごい • Generatorが関数の実行を状態を保ったまま中断できる特性 を活かして非同期処理の制御を行うことができる • 非同期処理に対して、手続き型ちっくなアプローチが可能で try~catch構文もカジュアルに利用することができる • 『co』というライブラリと一緒に使うことですごい使いやす くなる
15. 15. 1秒後に足し算結果を返す非同期関数 var calc = function(a, b) { return new Promise(function(resolve) { setTimeout(function() { resolve(a + b); }, 1000); }); }
16. 16. 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); });
17. 17. Call Back Hell calc(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); }); }); });
18. 18. then Chain calc(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); });
19. 19. 非同期処理の並列実行 Promise.all([ calc(1, 2), calc(10, 20), calc(100, 200), ]) .then(function(results){ console.log(results); });
20. 20. Generatorを知らない JavaScriptはこれが限界
21. 21. 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); });
22. 22. 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); });
23. 23. 並列実行も簡単 var co = require('co'); co(function *(){ var results = yield [ calc(1, 2), calc(10, 20), calc(100, 200), ]; console.log(results); });
24. 24. Generator + co 最高！
25. 25. 大本命『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();
26. 26. JavaScriptの非同期処理制御の歴史 1. Ajaxの登場による非同期処理に対する需要が高ぶる 2. Callback Hell(コールバック地獄)(Ajax浸透) 3. ThenableインタフェースによるCallback Hellからの脱出・高 度な非同期処理制御の提供開始(Promise) 4. Generator構文, coによる手続き型ちっくな効果可読性を重視 した制御が可能に(ES6) 5. 言語レベルでの非同期処理制御のサポート(ES7)
27. 27. Template Strings `string text` `string text line 1 string text line 2` `string text ${expression} string text`
28. 28. 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());
29. 29. ES6によってJavaScriptがもっと楽し く書けるようになった！！
30. 30. ブラウザでのES6対応状況 https://kangax.github.io/compat-table/es6/
31. 31. デスクトップブラウザ Edge > Firefox > Chrome >>>> IE, Safari
32. 32. サーバーランタイム・モバイルブラウザ Node.js v4から一気対応が増えた！ モバイルはまだまだ時間がかかりそう
33. 33. こう思いませんか?? • なんだ数年後の話か • こんな未来の話はいつの間にか消え去るのがいつもの流れ • やっぱTypeScriptが最高なんや!
34. 34. Babel
35. 35. つまりどういうことだってばよ ES6で書かれたJavaScriptのコードをES5(従来のブラウザで実行 できる形に変換します) 『トランスコンパイラ』と呼ばれています。 $ babel xxx.js > yyy.js $ babel-node xxx.js
36. 36. これが class Animal { constructor(name) { this.name = name; } sayName() { console.log('my name is %s', this.name); } }
37. 37. '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; })(); ※一部削っています。
38. 38. 今日からES6で JavaScriptは書ける!!
39. 39. 自動化！自動化！
40. 40. JavaScriptビルドツール • Grunt • Gulp • Fly これらのツールを使うことでBabelでのトランスコンパイル作業 を自動化することも簡単にできるようになります。 ※FlyはES6/ES7で作られたビルドツールです。
41. 41. Isomophicってなんぞや
42. 42. Isomophicのコンセプト アプリケーションの状態とコードは、ブラウザとサーバ間で共 有されています。サーバがリクエストを受け取ると、新しい flux-reactアプリケーショ ンインスタンスを生成してレンダリン グをします。すると、ストレージ（アプリケーション）の状態 がそのレンダリング済みのHTMLアウトプットに渡されま す： サーバはこのレンダリング済みのファイルで応答します。 ブラ ウザは（BrowserifyやWebpackで作られた）同じコードをロー ドし.....
43. 43. なんか難しい
44. 44. 私の中のIsomophicのキーワード • Node.js/JavaScriptで書かれたコードである • サーバーサイド・ブラウザ(クライアント)環境にてソースコー ド・ライブラリを使い回すことができる • サーバーサイド・ブラウザどっちでも動くプログラムである
45. 45. Isomophicであることに よるメリット
46. 46. Validation処理を1つのソースコード で定義することでサーバー・クライア ント両方でValidationできる ゲームであればチート対策などに効果的！ しかも低コスト！
47. 47. サーバー・クライアントのどっちかソ ースコードを修正するだけでもう片方 の振る舞いも変化させることができ る。 ソースコードの修正が少なくて低コスト!
48. 48. 全部JavaScriptで書くことができる 学習コストが低い! サーバー担当・クライアント担当みたいな変な役割を無くすこ とでコミュニケーションコスト削減!
49. 49. ブラウザ用JavaScriptの出力などは自動化! • RequireJS • Browserify • Webpack 最近はWebpackが流行っている模様
50. 50. こんなはなしがやってきた • 某シリーズもののゲームの集計システムを作ってくれ。 • バッチ処理で夜間に集計を集計をブンブン回して、集計結果 をAPIで取得できて、ブラウザで閲覧できるやつね。 • 将来的に色々なタイトルで利用するから汎用性高くてイケて るやつね。
51. 51. こんな構成に • バッチ処理: Node.js • API: Node.js(Express) • ブラウザ: Backbone.js / Marionette.js
52. 52. お気づきでしょうか・・・
53. 53. そう、すべてJavaScriptで作られてい ることに • Node.js(v4.0.0) • ECMAScript6 • トランスコンパイラ: Babel
54. 54. 他にも • ソースコードのリポジトリも1つで全部やっています。 • OSSのライブラリに頼って開発していますが、全部同じライ ブラリを使っています。 • テスティングフレームワークも『Mocha』『power-assert』 『Nightmare2』などを使って同じしくみでテストができてい ます。
55. 55. ビルドフロー
56. 56. 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) }
57. 57. ES6/Isomiphic使ってよかったこと • Class構文により、やっとJavaScriptが普通の言語になったの で、他の言語の人もJavaScriptにとっつきやすくなった • Generatorの導入によって非同期処理の制御が簡単にできる ようになった • 書くソースコードの量が圧倒的に少なくて楽できている • JavaScript芸人というポジションを確立できたこと
58. 58. ES6/Node.jsを現場に浸透させるため の苦労 • 社内・社外のパートナー含め、周りはPHPの人が多い • JavaScriptはある程度触れる人は多いが、新しく覚えてもら うことも多い
59. 59. Lesson教材が実は充実している • javascripting(JavaScriptお勉強用ライブラリ) • learnyounode(Node.jsお勉強用ライブラリ) • tower-of-babel(ES6お勉強用ライブラリ) • how-to-npm(パッケージ管理に関してのお勉強ライブラリ)
60. 60. 辛い話 • 他の言語も書いてみたい(Golang, Elixir, Rubyとかね) • Class構文でPropertyを扱いづらい class Sample { name: 'sample'; sayName() { console.log('my name is %s', this.name); } } // my name is undefined new Sample().sayName();
61. 61. ※半年後にはどうなっているかわかりませんが常に最新の JavaScriptを追い求めていきます！ みんなでJavaScriptの波に乗りましょう!
62. 62. ご清聴ありがとうござい ました。