1.
- How to develop a Huge SPA using TypeScript & AngularJS -
Developers Summit 2016
2016.02.18

2.
自己紹介
俺の名前を言ってみろ
- Introduce myself -

3.
山田 直樹
@wakamsha
自己紹介
株式会社リクルートマーケティングパートナーズ ( 2014年7月 ∼ )
フロントエンドエンジニア
Naoki YAMADA

4.
http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

5.
リクルートマーケティングパートナーズの
エンジニア、デザイナー、スクラムマスターたちが
発信する Web 開発情報メディア
http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

6.
https://eigosapuri.jp
英語サプリ

7.
https://eigosapuri.jp
英語サプリ
• 『聴く力』『話す力』の向上に特化した学習サービス
• ドラマ仕立てのストーリーに登場するキャラになりきって会話の
練習
• 音声認識機能により発音の解析・フィードバックをリアルタイムに
表示
• 聞き取れなかった発音とその原因を自動検知し、一人ひとりの原因
に合ったトレーニングを提供

8.
2015年 4月上旬
- April 2015 early -

9.
新規サービス作るんですよ。
しかも iOS、Android、Web のマルチプラッ
トフォーム展開で！エンジニア A
wakamsha
へぇ∼…
せっかくなので
Swift、Kotlin、Scala、TypeScript と
都内某所 とある呑み会にて

10.
せっかくなので
Swift、Kotlin、Scala、TypeScript と
全部型推論な言語で作ってやろうかなと考えて
います！
エンジニア A
あ、サーバーサイドは API しか返さないよう
な仕様にしたいので、Web は SPA になっちゃ
いますね
wakamsha
へー、すごいじゃないですか。
完全 SPA なんて実現したらリクルート史上初
なんじゃないですかね？
都内某所 とある呑み会にて

11.
じゃ、Web 版のフロントエンド開発
おねがいしますね
エンジニア A
wakamsha
ファッ！？
都内某所 とある呑み会にて

12.
当時の スキルセット
HTML
CSS
( SCSS )
JavaScript
( CoffeeScript )
Vue.js GRUNT MIDDLEMAN RoR

13.
当時の スキルセット
HTML
CSS
( SCSS )
JavaScript
( CoffeeScript )
Vue.js GRUNT MIDDLEMAN RoR
• HTML、CSS はそれなりに自信あり
• JavaScript は人並み程度 ( CoffeeScript をメインに使う )
• JavaScript フレームワークは Vue.js を実務で使ったことあり
• 元々 Flash ディベロッパーだったが、ActionScript は殆ど忘れて
しまっている

14.
当時の スキルセット
HTML
CSS
( SCSS )
JavaScript
( CoffeeScript )
Vue.js GRUNT MIDDLEMAN RoR
SPA やったことない

15.
2015年 5月
- May 2015 -

16.
リリース日は決まっているが仕様は白紙状態
あるのは PO ( プロダクトオーナー ) の
壮大な夢が書かれた社内 Wiki くらい
- これまでに無い新しい英語学習サービス
- リスニング力とスピーキング力の訓練に特化
- 音声認識テクノロジーを使いたい
- 著名な先生方にも出演いただきたいよね！
- ユーザーごとに最適な学習方法を提案しよう
- その他にもたくさん…
？

17.
とりあえず
SPA を作るための
技術調査をはじめることに

18.
SinglePageApplication なので
JavaScript が大規模になるのは必然
- Too Fat Front-end Code -

19.
• Microsoft が開発した AltJS ( トランスパイラ )
• JavaScript のスーパーセット ( 完全上位互換 )
• 静的型付け言語
• 型推論あり
• 圧倒的多機能
• Class, Interface, Arrow func, Generic, Module, Namespace …
TypeScript

20.
• Google が開発したフルスタック JS フレームワーク
• 圧倒的多機能
• Data binding, Routing, Custom directive, D.I, Promise, and more…
• 特に強力なルーティング機能は SPA にうってつけ
AngularJS

21.
• 軽量・高速なタスクランナー
• チェーンメソッド風にタスクを定義するのが特徴
• GRUNT と違い、よりプログラマブルに定義できる
• 複雑なタスクもプロダクションコードを書くノリで押し切
る事ができる
Gulp

22.
etc …

23.
• 調査した内容はすべて弊社ブログにて公開済み
• 情報の出し惜しみはしない
• アウトプットまでやってはじめて技術調査
http://tech.recruit-mp.co.jp
NET BIZ DIV. TECH BLOG

24.
これでいこう ( かな )

25.
2015年 6月上旬
- June 2015 early -

26.
仕様が一向に決まらない…

27.
どうして仕様が決まらない？
• PO はとある事情から現場と距離を置いてしまっている
• 現場リーダーがチーム内の意向をまとめて PO に報告する
にも、微妙にお互いの認識が合わず衝突の繰り返し
• 日に日に憔悴していく現場リーダー (́・ω・`)
• 傍観する

28.
2015年 6月下旬
- June 2015 in late -

29.
仕様が一向に決まらない…
シャレになってないので二回言いました

30.
• 全員で仕様策定のためのカンヅメを敢行
• 朝から晩まで会議室に篭もり、全員で仕様を決める
• PO にも会議に参加してもらい、スクラム開発の一員とし
て動いてもらう
• およそ 2週間で 80％ ほどの仕様が固まる

31.
2015年 7月
- July 2015 -

32.
メンバーも増えていよいよ本開発スタート
- Two man cell Front-end engineers -
New Comer

33.
2DAYS
1WEEK
極
め
た
！
フ
ロ
ン
ト
エ
ン
ド

34.
この仕組みだとダメっすね…
wakamsha
え…？
New Comer
設計は何度でも見直す

35.
これがヤバイ１
New Comer
これがヤバイ２
これがヤバイ３
設計は何度でも見直す

36.
ちょっと先輩
そんなんで大丈夫っすかｗｗｗNew Comer
wakamsha
がががが、頑張ります！
設計は何度でも見直す

37.
UI Router 導入
The companion suite(s) to the AngularJS framework.

38.
コードの品質に妥協しない
プルリクエストは優先的に対応
分からなければ即座に教えを請う
開発ポリシー

39.
2015年 10月下旬
- October 2015 in late -

40.
放置していた細かいバグが大量に積み上がる
iOS & Android エンジニアも Web に参戦
分からないところがあれば、
プルリクレビュー や ペアプロでカバー
佳境に差し掛かったので総力戦

41.
2015年 11月下旬
- November 2015 in late -

42.
リリース直前になって問題発生
IE よ、お前はどれだけ我々を苦しめれば気が済むんだ…
IE 9 のみで発生するクロスドメイン問題
API 疎通がどうしても出来ない…

43.
これもう無理っすよ。
時間もないことですし、
IE9 のサポート切りましょうよ！
wakamsha
くっ、もはやこれまでか…
New Comer
IE9 のみで発生するクロスドメイン問題

44.
PO
データ解析班
マジか∼。
ちなみにさ、他の弊社サービスにおける IE9 の
利用率ってどれくらいなの？
えーと…
現在 約 8% ですね
IE9 のみで発生するクロスドメイン問題

45.
PO
んじゃ、
ひとまず切り捨てよう！
wakamsha
うおおおおおおおおおおおおおお
おおおおおおおおおーっ！！！！
New Comer
うおおおおおおおおおおおおおお
おおおおおおおおおーっ！！！！
IE9 のみで発生するクロスドメイン問題

46.
PO
んじゃ、
ひとまず切り捨てよう！
wakamsha
うおおおおおおおおおおおおおお
おおおおおおおおおーっ！！！！
New Comer
うおおおおおおおおおおおおおお
おおおおおおおおおーっ！！！！
IE9 のみで発生するクロスドメイン問題
• 一応この問題はリリース後に改修済み
• ただし Windows7 10 の場合、IE11 未満はサポート対
象外となるため、今後 IE9 のサポートは消極的になると
思われ

47.
2015年 11月30日
- November 30, 2015 -

48.
https://eigosapuri.jp
英語サプリ
Out Now
!!

49.
英語サプリ Web 版リリース
• リリース2日前までは何かとアーキテクチャの見直しを敢行
• リファクタリングの手も最後まで止めなかった
• リリース直前は比較的穏やか
• この頃になると残業もほぼナシ
• 振り返ってみれば開発期間中の休日出勤はゼロ

50.
数字で振り返ってみる
36CUSTOM
DIRECTIVE
ARCHITECTURE
8 2 171 5STEP COUNT
,

51.
学び 1/3
• TypeScript に救われた
• 型は正義
• 冗長・コード量が増えるというのであれば、それは使用してい
るテキストエディタを見直すチャンス
• JavaScript が苦手という人にこそオススメしたい

52.
学び 2/3
• AngularJS の採用は正解だった
• 学習コストは高いが、その代償を払う価値は充分にある
• ハードルが高いというのであれば、Vue.js から入るのもアリ
• UI Router は積極的に採用していきたい

53.
学び 3/3
• コードの品質に満足せず、絶えずリファクタリングを
• プルリクエストは溜め込まず優先的に捌く
• どんな小さなことでも分からなければ く
• PO ( ステークホルダー ) とはいつでもどこでもコミュニ
ケーションを取れるようなチーム体制を築く

54.
最後に
• Twitter やブログなどで感想をいただけると非常に励みに
なります
• 弊社のテックブログを御覧いただいた方はシェアなどして
いただけると最高に嬉しいです

55.
Thank you :)