http://connpass.com/event/30188/ kintoneのフロントエンド開発について、大規模なJavaScriptを扱うために利用している技術スタックや開発スタイルを紹介します。また、React/ReduxやES6などの最近の潮流に対して、取り入れるべきものは何か、既存プロジェクトにどのように導入するのかについて話します。

1. kintoneフロントエンド開発 モダン化への道
サイボウズ×マネーフォワード×Goodpatch Front-end Meetup
2016/05/12 @ama_ch

2. 自己紹介
▌天野祐介 @ama_ch
▌kintone開発チームリーダー
▌フロントエンドエンジニア
▌2009年新卒入社
▌ずっとkintone開発
▌WEB+DB PRESSにて連載
『JavaScript活用最前線』
を2年間執筆

3. ▌https://kintone.cybozu.com/
▌チームで使うアプリを簡単に作れるサービス
▌ドラッグ＆ドロップで簡単にフォームとデータベースを作成
▌コミュニケーション機能も充実
▌国内外4,000社以上でご利用中

4. s

5. 開発体制
▌PM 2名
▌PG 東京9名 + 大阪3名
▌デザイナ 2名
▌QA 東京、松山、上海合わせて15名強
▌3ヶ月に1度の機能追加リリース
▌開発者環境→社内環境の二段階ドッグフーディング

6. kintoneのフロントエンド
▌JavaScript 40万行
▌SCSS 5万行
▌ユニットテスト 4,700テストケース
▌基本的にPG全員がフロントのコードも書く
▌フロント専業は今のところ自分一人
▌ツール導入は専業の自分が先導することが多い

7. 技術スタック&開発スタイル

8. ベースJSライブラリ: Google Closure Tools
▌Closure Library
フルスタックなJSのライブラリ
▌Closure Compiler
静的型チェック&minify
▌Closure Templates
テンプレートエンジン
▌当時はモジュール管理ができて機能豊富だったのが選定理由
▌今はClosure Compilerの静的型チェックの存在が大きい

9. タスクランナー
▌Grunt
▌npm
▌各タスクは npm run XXX で動くようにしてgruntコマンドは使わない
▌全員がgrunt-cliをインストールする必要がなくなる
▌npm経由にしておけば今後Gruntをやめる時が来ても混乱が少ない
▌職人的な作り込みが多くタスクに変更がないので無理に乗り換えない

10. ビルドプロセス
▌構文チェック
Closure Linter + JSHint
▌ユニットテスト
▌CSSビルド
Sass + Compass
▌型チェック&minify
Closure Compiler

11. ユニットテスト
▌mocha + Sinon.JS + expect.js でテスト記述
▌Karmaを使ってPhantomJSでテスト実行
▌PhantomJSが不安定なので4並列で4回に分けて実行
http://blog.cybozu.io/entry/7089

12. 型チェック&minify
▌Google Closure Compilerによる静的型チェック
▌JSDocアノテーションに基づいて検査
▌kintoneの大規模JSでは中心的な役割を果たす

13. これまでのモダン化への取り組み
▌ Closure Compilerの型チェック有効化
▌ Closure Linter, JSHintの導入
▌ CI & 自動テスト環境の整備
▌ ユニットテストのモダンツール化
▌ Graspによるソースコード変換でBDDスタイルに移行
▌ Grunt導入
▌ ビルドスクリプトのnpm run化
▌ Gruntタスクの並列化
▌ Sass + Compass導入
▌ CSSビルドをMaven→Gruntタスク化
▌ autoprefixer導入
▌ Yeoman generators
▌ etc…

14. 今後の課題
▌ES6導入
▌JSHintからESLintへの移行
▌power-assert導入
▌Compassからlibsassをベースにした構成に移行
▌不安定なPhantomJS対策
▌Grunt卒業
▌社内npmリポジトリ(Artifactory)の活用
▌etc…

15. 最近の取り組み

16. Closure Tools + React
http://www.slideshare.net/ama-ch/google-closure-toolsreact

17. 実験的プロジェクト
http://blog.cybozu.io/entry/2015/11/04/080000

18. KAIZEN合宿

19. Frontend Weekly Lunch

20. 変化の早いフロントエンド開発で
取り入れるべきもの

21. 心構え
https://twitter.com/t_wada/status/716843671795019776

22. 「ロードマップ」が指し示す未来の方向と違う方向に進むこ
とは致命的な間違いだが、「エコシステム」はむしろ中心部が
レッドオーシャンで、周辺部に生き残りが容易なブルーオー
シャンがある。「エコシステム」の中で王道を進むには、並みは
ずれた他の者にはない強みを持っている必要がある。
普通の人は「ロードマップ」の中では真ん中を進むべきで、
「エコシステム」の中では真ん中を避けるべきだ。
ロードマップ指向とエコシステム指向 - アンカテ
http://d.hatena.ne.jp/essa/20140330/p1

23. 心構え
▌話題になるのは基本的にエコシステムの中心部(レッドオーシャン)なので、
手当たり次第に追うと疲弊する
▌今できることを多少便利にするだけのツールに振り回されない
▌時代遅れになることを過度に恐れない
話題にならなくなったツールもユーザーがいればメンテされる
jQueryとBackbone.jsとMakeでうまく回ってるならそれでいい
▌導入するなら焦らず少しずつ

24. 個人的にキャッチアップしておくべきだと思うもの
▌ES2015(ES6)
▌React

25. まとめ

26. ▌常にピカピカの最新を取り入れる必要はない
▌生産性を上げるために必要だと思ったものを導入する
▌時代遅れになることを過度に恐れない
▌導入する時は少しずつ段階的に進めて理解を得る

27. WE’RE HIRING!!!
http://cybozu.co.jp/company/job/recruitment/
大規模フロントエンドのモダン化ならサイボウズ
で！

28. Thank you!