kintone フロントエンド開発 モダン化への道

サイボウズ × マネーフォワード ×Goodpatch Front-end Meetup2016/05/12 @ama_ch

自己紹介

▌天野祐介 @ama_ch▌kintone 開発チームリーダー

▌フロントエンドエンジニア

▌2009 年新卒入社

▌ずっと kintone 開発

▌WEB+DB PRESS にて連載

『 JavaScript 活用最前線』

を 2 年間執筆

▌https://kintone.cybozu.com/▌チームで使うアプリを簡単に作れるサービス

▌ドラッグ＆ドロップで簡単にフォームとデータベースを作成

▌コミュニケーション機能も充実

▌国内外 4,000 社以上でご利用中

s

開発体制

▌PM 2 名

▌PG 東京 9 名 + 大阪 3 名

▌デザイナ 2 名

▌QA 東京、松山、上海合わせて 15 名強

▌3 ヶ月に 1 度の機能追加リリース

▌開発者環境→社内環境の二段階ドッグフーディング

kintone のフロントエンド

▌JavaScript 40 万行

▌SCSS 5 万行

▌ユニットテスト 4,700 テストケース

▌基本的に PG 全員がフロントのコードも書く

▌フロント専業は今のところ自分一人

▌ツール導入は専業の自分が先導することが多い

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

ベース JS ライブラリ : Google Closure Tools

▌Closure Libraryフルスタックな JS のライブラリ

▌Closure Compiler静的型チェック &minify

▌Closure Templatesテンプレートエンジン

▌当時はモジュール管理ができて機能豊富だったのが選定理由

▌今は Closure Compiler の静的型チェックの存在が大きい

タスクランナー

▌Grunt▌npm

▌各タスクは npm run XXX で動くようにして grunt コマンドは使わない

▌全員が grunt-cli をインストールする必要がなくなる

▌npm 経由にしておけば今後 Grunt をやめる時が来ても混乱が少ない

▌職人的な作り込みが多くタスクに変更がないので無理に乗り換えない

ビルドプロセス

▌構文チェック

Closure Linter + JSHint▌ユニットテスト

▌CSS ビルド

Sass + Compass▌型チェック &minify

Closure Compiler

ユニットテスト

▌mocha + Sinon.JS + expect.js でテスト記述

▌Karma を使って PhantomJS でテスト実行

▌PhantomJS が不安定なので 4 並列で 4 回に分けて実行

http://blog.cybozu.io/entry/7089

型チェック &minify

▌Google Closure Compiler による静的型チェック

▌JSDoc アノテーションに基づいて検査

▌kintone の大規模 JS では中心的な役割を果たす

これまでのモダン化への取り組み

▌ Closure Compiler の型チェック有効化

▌ Closure Linter, JSHint の導入

▌ CI & 自動テスト環境の整備

▌ ユニットテストのモダンツール化

▌ Grasp によるソースコード変換で BDD スタイルに移行

▌ Grunt 導入

▌ ビルドスクリプトの npm run 化

▌ Grunt タスクの並列化

▌ Sass + Compass 導入

▌ CSS ビルドを Maven→Grunt タスク化

▌ autoprefixer 導入

▌ Yeoman generators▌ etc…

今後の課題

▌ES6 導入

▌JSHint から ESLint への移行

▌power-assert 導入

▌Compass から libsass をベースにした構成に移行

▌不安定な PhantomJS 対策

▌Grunt 卒業

▌社内 npm リポジトリ (Artifactory) の活用

▌etc…

最近の取り組み

Closure Tools + React

http://www.slideshare.net/ama-ch/google-closure-toolsreact

実験的プロジェクト

http://blog.cybozu.io/entry/2015/11/04/080000

KAIZEN 合宿

Frontend Weekly Lunch

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

心構え

https://twitter.com/t_wada/status/716843671795019776

　「ロードマップ」が指し示す未来の方向と違う方向に進むことは致命的な間違いだが、「エコシステム」はむしろ中心部がレッドオーシャンで、周辺部に生き残りが容易なブルーオーシャンがある。「エコシステム」の中で王道を進むには、並みはずれた他の者にはない強みを持っている必要がある。

　普通の人は「ロードマップ」の中では真ん中を進むべきで、「エコシステム」の中では真ん中を避けるべきだ。

ロードマップ指向とエコシステム指向 - アンカテhttp://d.hatena.ne.jp/essa/20140330/p1

心構え

▌話題になるのは基本的にエコシステムの中心部 ( レッドオーシャン ) なので、手当たり次第に追うと疲弊する

▌今できることを多少便利にするだけのツールに振り回されない

▌時代遅れになることを過度に恐れない

話題にならなくなったツールもユーザーがいればメンテされる

jQuery と Backbone.js と Make でうまく回ってるならそれでいい

▌導入するなら焦らず少しずつ

個人的にキャッチアップしておくべきだと思うもの

▌ES2015(ES6)▌React

まとめ

▌常にピカピカの最新を取り入れる必要はない

▌生産性を上げるために必要だと思ったものを導入する

▌時代遅れになることを過度に恐れない

▌導入する時は少しずつ段階的に進めて理解を得る

WE’RE HIRING!!!http://cybozu.co.jp/company/job/recruitment/

大規模フロントエンドのモダン化ならサイボウズで！

Thank you!