D3 フロントエンド技術勉強会 2016.1.22 - 1年間まじめにSPA開発やってきた経験について - その中で、ぶつかった課題と対策 - SPA開発の全体像 - Web/JS界隈の激しい変化の波に溺れないためのTips - AngularJS と SPA の設計について - TypeScript と ES6 - Gulp タスク

1. サーバサイドエンジニアが
1年間まじめにSPAやってみた
D3 フロントエンド技術勉強会
2016.1.22
@kita_ly

2. 今日話すこと
• 1年間まじめにSPA開発やってきた経験について
• その中で、ぶつかった課題と対策
• SPA開発の全体像
• Web/JS界隈の激しい変化の波に れないためのTips

3. 今日触れる技術
• AngularJS と SPA の設計について
• TypeScript と ES6
• Gulp タスク

4. node
npm
Babel
TypeScript
AngularJS
React
Bower
Gulp
ES6
HTML
CSS
SASS
Browserify
コンポーネント指向
Flux
Nginx
TSLint
ESLint
Jenkins
FlowType
EJS
PDFViewer
TSD
UI-Router
LocalStorage
WebSocket
EmberJS
CycleJS
Redux
Angular2
promise RequireJS
CoffeeScript
１つ１つについては
深く話さないです

5. 自己紹介
• 北川 至 ( @kita_ly )
• 株式会社ビズリーチ
• Java -> Scala -> (エセ)フロントエンド
• 1年前から JS : Scala の割合が 7 : 3 に
• 最近使ってる技術:
MySQL, ElasticSearch, Scala,
Play2, TypeScript, AngularJS
• 家族: 嫁1名・子2名

6. サービス紹介
https://jp.stanby.co

7. スタンバイの技術スタック

8. サービス紹介
https://stanby.co

9. スタンバイカンパニーの構成
SPA
(AngularJS / TypeScript)
Backend API
(Play2 / Scala)
AWS
MySQL Elasticsearch
Other
API s
Memcached

10. スタンバイカンパニーの構成
SPA
(AngularJS / TypeScript)
Backend API
(Play2 / Scala)
AWS
MySQL Elasticsearch
Other
API s
Memcached
今日の話

11. デモ

12. AngularJS
とSPAの設計

13. AngularJS との出会い
• 1年前に今のチームに異動
• 「AngularJS で 開発してるらしい…」
• Directive とか聞いたことあるけど…

14. AngularJS との出会い
• 2Way データバインディング、凄いじゃん

15. 最初はライトに
フォームバリデーション程度
↓
徐々に規模が大きくなってきて…

16. 巨大な状態管理とテンプレート
• 巨大なテンプレートにJS (Angular Expression)
が散りばめられ見通しが全く効かない
• Super Fat な Controller
• 変数・メソッドが多すぎて解読困難
• 状態管理が複雑でバグが生まれる気しかしない
• Repeat Yourself しまくってる気がする

17. React に助けられた
!?

18. コンポーネント指向
• React の出現で根付いた
SPA (というかUI) の設計思想
• Angular2 でも 採用されている
• Angular1系 でも 1.3以降
徐々にコンポーネント指向寄りに…

19. Thinking in React
https://facebook.github.io/react/docs/thinking-in-react.html

20. コンポーネント指向
• コンポーネント = DOM と JS のセット、UI部品
• 再利用性
• カプセル化・責務の分離
• 複雑なものの単純化
• メンテナンス性

21. コンポーネント指向
• AngularJS でも実践可能 (限界はある)
• React の推奨するレベルでの細かい部品化はできてない
• 辛くならない大きさのコンポーネントを見極める
• コンポーネントのライフサイクルを見極める
• Tooltip、吹き出し、モーダルのようなUIパーツは迷いなく
ドンドン切り出す

22. さらに規模が
大きくなってきて…

23. モデル管理が破滅…

24. モデル管理が破滅…
• 大きな画面で、複数箇所の表示項目を同期する必要
• コンポーネント指向だけでは立ち向かえない
• React : Just the UI
• 共有範囲の広いモデルを全て押し付けて
Root のコンポーネントが肥大化
• コンポーネントのネストが深くなると
データを受け渡す中間のコンポーネントからすると
そのデータの意味が分かりづらい
• MVCもフィットしなかった

25. MVC does not Scale
Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw

26. MVC does not Scale
Hacker Way: Rethinking Web App Development at Facebook
https://www.youtube.com/watch?v=nYkdrAPrdcw

27. Flux に助けられた
!?

28. Flux
• Facebook が提唱
• 特定のライブラリやFWではなく、アーキテクチャの呼称
• コンポーネントの構造に縛られない Store
• モデルを保持する
• Single Source of Truth
• 各 Component (View) は自分が必要な Store だけ Subscribeする
• Uni-Directional Data Flow
• データの流れが決まっているので、デバッグも る
• Fluxxor, Redux, Reflux, etc..

29. Flux
• Angular でも応用可能
- https://github.com/wbuchwalter/ng-redux
- https://github.com/christianalfoni/flux-angular
• Store を Subscribe する Component の見極め
• アプリ全体で共有すべきデータと、コンポーネント内の一時
的なデータを区別

30. Flux やってみた
View View
View
View
View
View
JobList
Store
Application
List Store
Timeline
Store
Application
Store

31. Flux やってみた
View View View View
JobList
Store
Application
List Store
Timeline
Store
Application
Store
Dispatcher
Resume Update
Action

32. 結局 Angular 嫌いなの？
• 2009年に生まれいる先駆者として
リスペクトしている
• 豊富なAPI で結構何でもできる
(逆にどう作ったらいいか分からない)
• フルスタックのFWであり、Angularチームが
メンテしてくれる安心感
• HTML を拡張して JS(風なもの) を書けるようにした
(不満有り)

33. 結局 React 好きなんでしょ？
• React が数年後にどう扱われているかは分からない
• コンポーネント指向・Flux という考え方は
FW/言語を超えて暫く応用可能だと思っている
• フルスタックではないので 3rd Party のライブラリの選定は慎重に
• JSX: JS-Centric
• JSを拡張してHTMLを書けるように
• オレオレAPIに振り回されないで済む
• コンパイルタイムにバグを防ぐ仕組み
(型言語との相性)

34. TypeScript と
ES2015

35. TypeScript
• 静的型付けができるJavaScript
(Java とか C# の様なSyntax)
• 開発元: Microsoft
• いわゆるAltJS の一種
• 結構本格的
- interface, class, Generic Type
- Structural Sub-Typing
- abstract class
- 型推論
- many other ..
• ECMAScript の スーパーセット

36. TypeScript とは
• 動かす前に気付ける
• リファクタに強い

37. ECMAScript2015 (ES6)
• JavaScript系言語 の 標準仕様
• 2009 年の ES5 から 6年ぶり
• 新機能多数
- let, const
- class
- デフォルトパラメータ
- アロー関数
- 配列・オブジェクトの Desctucturing Assignment
- ES6 module (import/export)
- etc…

38. SPA開発で利用する言語
• ES6は今すぐ使うべき
• 一部ES7の機能も先行して利用検討すべき
• 大規模になる想定なら静的型付け言語も検討
• 慣れると型無しのJSを書く時にワナワナするよ
うになる
• 特にReact は相性が良いと思っている

39. React in TSX
http://blog.wolksoftware.com/working-with-react-and-typescript

40. ビルド編

41. ES6 とか TypeScript とか
ブラウザで動くの？
• 動かない
• npmモジュールを利用して実行可能な形に変換
• tsc, babel, browserify
• 使いやすくするために gulp などの
タスクランナー上で gulp-typescript

42. TypeScript ファイルを
ブラウザで動かすために
TypeScript
+ ES6 Module
ES6
+ RequireJS
Bundled
ES5
ES5
+ RequireJS
tsc
babel
browserify
ソース
ファイル
ブラウザ
で動く

43. ES6 Compatibility Table
https://kangax.github.io/compat-table/es6/

44. TypeScript/ES6 の実装が
イマイチ根付かない
• var 使ってる
• function の先頭に var を全部並べる
• unused variables/functions
• 型付けをサボっている

45. レビューで言うと面倒なので
TSLint, ESLint, TSC に怒ってもらう
• var 使ってる
→ Lint 「const/let 使ってください！」
• function の先頭に var を全部並べる
→ Lint 「ブロックスコープ活用しなさい！」
• unused variables/functions
→ Lint 「使われてないけどミスってない？」
• 型付けをサボっている
→ TSC 「暗黙に any 型は許しません」

46. Gulp Task 一覧
• キャッシュ対策
- RevisionHash for JS, CSS, 画像ファイル ( e.g. app-9x9x9x.js )
- 3rd Party 製ライブラリの Bundle
• パフォーマンス対策
- GZip 圧縮 for JS, CSS (e.g. app.js.gz )
- minify, uglify for JS, CSS
• TypeScript ビルド: Browserify, Babel, TSC
• SASSビルド
• ESJビルド
• 開発支援
- TS-Lint, ES-Lint, SASS-Lint
- Gulp-Webserver
- ソースマップ for TS, SASS
- 各種 watch (インクリメンタルビルド)
• その他、細かいもの多数…

47. 秘伝のタレ化！SPOF！
• 秘伝のタレ化しがち
• 誰かがビルド職人化してSPOFになる
• 乱立する npm モジュール間の依存解決が課題に
• Transpile(ES6 -> ES5) がTSCだったりBabelだったり…

48. Gulp = 秘伝のタレ
• ビルドスクリプトだからと軽視せず
リファクタを継続的に行う
• 似たような機能を持つ別の npm モジュールを乱立させない
• 便利なGulpプラグインになびかず、npm と仲良くする

49. まとめ
• れ出るライブラリ・FWのAPIの暗記をしようとしてはいけない
• そのライブラリが実現しようとしていること、思想を理解する
- コンポーネント指向、Flux、etc.
- SPA初学者はいずれかのFWを真面目にやった方が良い
• 大規模アプリなら静的型付け言語も視野にいれる
• ES6 は今すぐ使え
• ビルドスクリプトも軽視しない
• Grunt / Gulp などに依存し過ぎず npm モジュールと仲良くなる
• 変わるものと変わらないもの、を見分ける選球眼を鍛える

50. Let's NOT 消耗
Let s Enjoy Chaos!