LoginSignup
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@yama-t(yamato)

Cybozu Meetup #1 フロントエンド

Last updated at Posted at 2017-02-28

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

イベント概要

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

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

スライド資料

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

特徴

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

プロダクト

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

  • 主に企業向けのコラボレーションサービスを提供
  • 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で拡張可能。
  • 社内で固有の型番などの法則
  • フォームの変更を検知してバリデーション を掛けたり出来る
  • プラグインとして流通させることも出来る / 導入できる

これからの挑戦

未解決問題。

モダン化

  • 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の利点を聞けたのはよかった。

関連リンク

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?