ブログ書く枠で参加したので投稿致します。
当日までブログ枠が空いていたので、補欠のみなさんは枠変更して出席しても良かったんだよ…？

イベント概要

お寿司を食べながらフロントエンドを語る

Cybozu Meetup #1 フロントエンド
日時：2017年02月27日（月）19:00～21:00
場所：東京都中央区日本橋2-7-1 東京日本橋タワー 27階（サイボウズ株式会社）
ハッシュタグ：#CybozuMeetup

サイボウズのフロントエンド開発の現在とこれからの挑戦

スライド資料

サイボウズのフロントエンド開発の特徴
これまでの取り組み
これからの挑戦

特徴

Webが主戦場
大規模開発
プラットフォーム的なプロダクト

プロダクト

グループウェア
- サイボウズ Office（中小企業向け）
- Garoon（大企業向けグループウェア）
- cybozu Live （無料グループウェア）
クラウド
- 2011年 cybozu.com リリース
kintone（ビジネスアプリ作成プラットフォーム）

チームワーク溢れる社会を作る

主に企業向けのコラボレーションサービスを提供
B2Cに比べてWeb、PC比率が高い
Webサイトに比べて機能が複雑
フロントエンドエンジニアが活きる環境！

規模感

※数値を見せつけてビビらせる。

全体：契約ユーザーライセンス700万以上
cybozu.com：65万以上
サーバー：1000台
平日アクセス数：1.6億
社員数：600名
- グローバル開発本部：約200名

チーム

フロントエンドエンジニアは「プロダクト開発チーム」に所属する。

SREチーム
- インフラ
アプリ基盤
- ミドルウェア
- ドメイン共通管理
プロダクト開発チーム
- kintone
- Garoon
- Office
- メールワイズ
- 販売システム

大規模な開発

継続的に開発する。
→ 1回作って終わりではない。

モノ：コードの規模、機能の複雑さ
- kintone JavaScript: 約45万行
人：開発チームの人数
- Webアプリエンジニア全員がバックエンドもフロントも両方とも触る。
時間：プロダクトライフサイクルが長い
- 作り捨てではなく、継続的な開発が要求される。

静的型付け

コンパイル時に静的に型チェック
kintoneではGoogle Closure Compilerを2010年から活用
大規模開発でのリファクタリング時に絶大な効果
- コンパイルが通れば少なくとも動く
現在ではTypeScript, Flowなどでメジャーな概念に

JSDoc ベースの静的型付け

冗長だけど、既存JSとの親和性がいい
JavaScriptの進化に追随できる
コンパイルなしでも実行可能
- どうせJSDoc書きますよね？

/**
 * @param {number} num
 * @return {string}
 */

function toHex(num) {
  return num.toString(16);
};

toHex('string'); // Error!

UIコンポーネントの構築

Closure Library ベース
コンポーネント思考でUIツリーを構築
内部はクラシカルなMVC

/**
 * @constructor 
 * @extends {goog.ui.Component}
 * @param {!ocean.model.Space} space
 * @param {!Array.<ocean.model.Thread>} threads
 * @param {!ocean.model.SpaceMembers} members
 */
ocean.space.ContentsBody = function(space, threads, members) {
  ocean.space.ContentsBody.base(this, 'constructor');

  this.profile_ = new ocean.space.SpaceProfile(space, members, threads);
  this.content_ = new ocean.space.SpaceProfile(space, members, threads);
};
goog.inherits(ocean.space.ContentsBody, goog.ui.Component);

問題点

記述が冗長
- DOM職人が必要
イベント制御
フリースタイル

React化

ReactコンポーネントをClosureコンポーネントでラップして接続
Flux

サイドプロジェクトで実験

cybozu.com稼働状況のReact / Redux作り直し
大規模なメインプロダクトの前に、小規模なプロダクトで実験

その他

ユニットテスト
Lintツール
Yeoman
- コードを書く時、指定したテストケースなどの第一歩を手軽に作れるので便利。

kintoneの使い道

JIRAの代わり
仕様書の管理
バグ管理
勤怠

などなど。サイボウズ社内でも大いに活用している。
「こういう目的で使っている」と言えないくらい、いろんな形でkintoneを活用している。

デモ

ラーメン日記というブログアプリを作る。
タイトル設置。
豚骨、塩、味噌など数種類のスープを選択肢として選べるようにする。
画像添付できるようにする。
結果、ラーメンの写真を投稿しつつ、他の人からのコメントが貰えるアプリの完成。
日々の日記で選んだスープのデータを解析し、一定期間にどのスープのラーメンを食べていたかの頻度がグラフで表示できる。

プラットフォーム

ユーザー、サードパーティが拡張可能。
REST API
JavaScript APIで拡張可能。
- 社内で固有の型番などの法則
- フォームの変更を検知してバリデーションを掛けたり出来る
- プラグインとして流通させることも出来る / 導入できる

これからの挑戦

未解決問題。

モダン化
- 詳細はkintoneフロントエンド開発モダン化への道参照。
セキュアなサンドボックス機構
デザインフレームワーク
アクセシビリティ

モダン化

Reactコンポーネント化の推進
ES2015＋導入
社内npmリポジトリの活用
CIツールの活用（with 生産性向上チーム）

セキュアなサンドボックス機構

プラットフォーム要件
kintone / GaroonのJSカスタマイズ / JS API
サンドボックスがないため管理者権限が必要。
サードパーティプラグインをユーザーレベルで利用可能にして、エコシステムを盛り上げたい。

先達

※こういうアプローチがあったという紹介。プロダクトで採用している訳ではない。

OpenSocial / Caja
- 静的解析による変換（悪いことをやってたら弾く）
Salesforce Lightning / LockerService
- Secure DOMによるオブジェクトの置換
- window, documentをセキュアなオブジェクトに置換する

先達の課題

本当に穴がないのか確証が持てない。
進化についていくのが辛い。
他のフレームワークとの互換性の問題。

iframeによる解決

やりたい方向性として上がっているのは下記。まだやれてない。

完全なsandbox
URLがあるのでOAuthにも応用可能
これはこれで課題
- 非同期通信しかできない
- メモリ食い
ES Realms API

デザインフレームワーク

プラットフォーム要件
サードパーティプラグインが統一性のあるUIを提供できるようにどうすればいいか？
- 他社事例：SalesforceのLightning

悩みは大きい

デザイナとエンジニアの深い強調
CSSつらすぎるだろ！
サードパーティ向けのAPIをReactなど特定ライブラリ依存に倒して良いのか？
- サードパーティに作り方を強要して良いのか問題。
- 共倒れの問題。

アクセシビリティ

草の根レベルから啓蒙活動をしている社員がいて、実際にそういう動きに。
プロダクトに限らず、オフィス全体のバリアフリー化。
弱視の方にサイボウズ製品を使ってもらい、どこで引っかかるかの調査。
アクセシビリティ基準に基づいたコントラストの設定。
- 各開発者がどう実装するかはこれから頑張る所。

おまけ

フロントエンドの共有が横の繋がりでできないのがつらいので「Frontend Weekly Lunch」

JSer.infoをみんなで読む会
ESLintかるたやってみたけど全然面白くなかった。

まとめ

これまで
- これまで大規模対応してきた。
- プラットフォーム開発面白い。
これから
- モダン化
- サンドボックス
- デザインフレームワーク
- アクセシビリティ

質疑応答

Closure Compilerは捨てていく方向？
- Closure Compilerの開発はまだまだ活発なので、既存プロジェクトでは継続して使う方向。
kintoneプラグイン、パッケージングがシェルスクリプトなのがちょっとつらい。
- 要望として承りました。

懇親会

転職の話
- 前の会社でいろいろあったけど、その頃に少ない休みの時間にエントリーシート書いてサイボウズに入った話。
- 同じ店舗を利用し続けた結果、某コーヒーチェーンで「いつもの」という注文で持ってきてもらえるレベルに。
マッチングの話
- 会社が求めているものが募集要項に全て反映できているとはいい難く、マッチングが上手くできないことがある。
- 例：会社でサーバーを持っているので「最新のクラウド事情に詳しいです！常にキャッチアップしてます！」という方が来られても、うちだとそのスキルを持て余してしまうという理由で断ることがあるとのこと。
副業の話
- インフラの話だが、会社的には伝統的なものを使っているので、モダンなものを導入する仕事をやったりしてる人がいたりする模様。
サイボウズの文化
- 「とりあえずやってみよう」な会社とのこと。
- まあ、燃える時は燃える。
「サイボウズはフロントエンドエンジニアを募集しております！」

所感

サイボウズはこんな感じでみんなやってます、な紹介イベントだった。
食べながら発表を聞いた後の懇親会がメイン。
オフィスがキレイ。
- 社内食堂はなく、昼事情は戦場だとのこと。
寿司！
「やってみよう」という思いでいろいろできそうな雰囲気を感じた。
フロントエンド開発事情的には、TypeScript等を使いたい人、Angular、vueをやりたい（React以外をやりたい）人は合わないかも。
モダンな開発をしていこうという姿勢が読み取れた。
従来型の手法としか思っていなかった、JSDocの利点を聞けたのはよかった。

Cybozu Meetup #1 フロントエンド