サイボウズ×マネーフォワード×Goodpatch Front-end Meetupを開催しました - Cybozu Inside Out

f:id:cybozuinsideout:20160513170935p:plain

こんにちは。Sales Systemチームの金子です。5月13日(木)にサイボウズ×マネーフォワード×Goodpatch Front-end Meetupというイベントをサイボウズ東京オフィス・大阪オフィスで同時開催したので、ここで報告させていただきます。

当日の様子はこちらにまとめられています。

togetter.com

サイボウズ×マネーフォワード×Goodpatch Front-end Meetupとは?

マネーフォワード、Goodpatch、サイボウズの3社合同で企画したフロントエンドエンジニアを対象とした勉強会です。

企業向けサービスを提供する3社でどのようにフロントエンド技術と向き合っているかといったことを中心にそれぞれのフロントエンドエンジニアが発表するという構成でした。

サイボウズのターン

f:id:cybozuinsideout:20160513171057j:plain

presentation by @ama_ch

トップバッターとして、弊社の天野(@ama_ch)からkintoneチームのフロントエンド開発事情を発表させていただきました。

kintoneフロントエンド開発モダン化への道 from ama-ch

kintoneチーム(プロダクトマネージャ+プログラマ+デザイナ+品質保証)の開発体制の紹介
Google Closure Toolsを中心にした大規模開発事情
ビルドプロセス(Lint、ユニットテスト、CSS/SCSSビルド、型チェック&minify)の紹介
大規模フロントエンド開発を支えるユニットテスト事情
モダン化への取り組みと今後の課題

といった内容でした。

kintoneではDrag&Dropで業務アプリを構築します。このような処理ではUIサイドで複雑な処理を要求されます。Google Closure LibraryのComponentをベースにUIを構築しながらも、UIの更新処理やイベント制御が煩雑になりやすいといった問題がありました。そこにVirtual DOMを扱えるReactを導入し交通整理を行うことで煩雑さを緩和しようという取り組みがモダン化の一例として紹介されました。

また導入に際しても、

プロダクションとは別のプロジェクトで試験的にReactを試す。
温泉合宿でReact仲間を増やしながら、React ComponentベースのUIパーツを増やしていく。

といった新しい技術をチームにどうやって取り入れていくかといったプロセスの紹介もありました。

マネーフォワードのターン

f:id:cybozuinsideout:20160513171155j:plain

presentation by @kotaro_hirayama

2つ目の発表はマネーフォワード社の平山さん(@kotaro_hirayama)による「健全なフロントエンド開発をしよう～Railsに乗っかるという選択編～」でした。

『健全なフロントエンド開発をしよう〜Railsに乗っかるという選択編〜』アップ用 from kotaro_hirayama

マネーフォワード社にはRuby/Ruby on Railsのコミッターがいる。
Rails wayに乗っかることで初期開発コストを抑える。
会計の金額入力などスピーディな入力が求められるUIでは、Railsプロジェクトとは独立したrepositoryでReact等適切な技術を選定して開発し、ライブラリとして本体から使用する。
しばらくはRails wayに乗っかるけど、node環境リライトも考えている。

といった内容でした。自社の強みを活かしながら、成長フェーズに合わせたフロントエンド戦略が印象的でした。

Goodpatchのターン

f:id:cybozuinsideout:20160513171304j:plain

presentation by @yoshiko_pg

最後の発表は、Goodpatch社の吉田さん(@yoshiko_pg)による「Prott Front-end in 2016」でした。

以前はCoffeeScript/AngularJSを中心にしたSPAだった。
ES2015の仕様化に伴い、ユニットテストから徐々に導入し、現在はプロダクトコードの一部をリプレイスした。
これから新機能をES2015/2016/Nextで書いていく。
Class Property Declarations (Stage 1)、This-Binding Syntax (Stage 0) も積極採用
既存コードのES2015化やリファクタリングもやっていきたい。

といった内容でした。CoffeeScriptを使ったプロダクトにおける、decafを用いた具体的なコード置き換え、ESLintを用いたES2015化のサポートの話など、Railsを採用しているプロダクトで参考になる話だったのではないでしょうか。

座談会

3社の発表後は、各社の発表者とともに弊社佐藤鉄平(@teppeis)がファシリテータを務めて座談会を行いました。

f:id:cybozuinsideout:20160513171359j:plain

@ama_ch @yoshiko_pg @kotaro_hirayama @teppeis による座談会の様子

各社のプロジェクト体制
フロントエンドのテスト事情
- ロジックのテストは当然書く
- DOMが関わるテストは?
ES2015をはじめとした新技術への挑戦
採用しているフレームワーク・ライブラリ
JavaScriptにおける型について

といったトピックについて、参加者からの質問を交えながら各社のフロントエンド事情を深掘りしました。企業向けサービスということもあってか、3社ともユニットテストに関しては積極的に取り組んでおり、会場からの質問もそれにまつわるものが多かった印象です。

ES2015への取り組みに関しては3社とも導入予定/やっているという状況で、Web標準仕様への追随はそれぞれの課題となっているようです。

座談会は、地の利を活かした弊社@teppeisと@ama_chによる「やっぱり大規模開発には型が必要だよね。」という締めくくりで幕を閉じました。

懇親会

各セッションが終わってから懇親会も行いました。懇親会でも、まだ熱冷めやらぬといった感じで参加者同士でのフロントエンドトークが盛り上がっていました。一部ではVimmerによるフロントエンドにおけるVim開発即興相談会なるものも行われていたようです。

懇親会では、マネーフォワードさん、Goodpatchさんのご協力でいつものピザとは違ったおしゃれな料理やドリンクが並びました。いつもピザの弊社メンバーからは「こんな旨いおにぎり食べれるなんて羨ましい。」といった感想が聞こえてきました。

f:id:cybozuinsideout:20160513171443j:plain

おいしそうな料理たち

おわりに

当日は、東京会場で40人、大阪会場で13人もの方々が参加してくれました。フロントエンドの技術にはまだまだ成熟しきっていないところもあり、開発で苦労することもあるかと思います。そんななかでエンジニアコミュニティの強みを活かして、今回のような勉強会でその苦労の緩和の手助けや情報共有ができればと思っています。

今回の発表は東京会場からのみでしたが、弊社自慢のテレビ会議システムのおかげで、大阪会場の参加者の方々から