福岡でチームビルディング合宿を開催し、Frontend Teamの開発行動指針をアップデートした

こんにちは、Kaizen Platform で Frontend developer やってます tatsuroro です。
先日、弊社Frontend Teamで初のチームビルディング合宿(以下、合宿)を福岡で開催しましたので、そのレポートをお伝えしたいと思います。

TL;DR

  • 「TECH DEEP SYNC: アプリ設計のベストプラクティス2018年春」と題し、福岡に集合して技術トピックについてディスカッション
  • 普段はリモートで働いているメンバーが一箇所に集まって集中議論することで日頃の開発知見を共有
  • 合宿のアウトプットとして、フロントエンド開発時の各メンバーの行動指針となる「チーム憲章」(後述) をアップデート
  • 福岡のごはんはとても美味しいです

なぜ「Frontend Team」合宿をやるに至ったのか

弊社の Frontend Team はメンバー4人のうち1人は大阪、もう1人は福岡でフルリモート勤務しているのですが、各人がそれぞれ別個のプロジェクトを担当していたりしてなかなか経験を共有する機会がなく、課題感を持っていました。 オンラインで Tech Sync やコードレビュー会を実施したりもしていましたが、皆日々忙しいのでなかなか時間を確保しづらかったり、オンライン開催だと議論の熱が失われがちだったりしていました。

そこで、合宿という形で集まって集中 Tech Sync をやろう、ホワイトボードを前に日頃の気づきや疑問、ベストプラクティスをぶつけあってみよう、どうせやるなら完全に業務を離れて地方開催だ!ということで Frontend Teamの合宿 in Fukuoka を開催する運びとなりました。

f:id:kaizenplatform:20180413145944j:plain 福岡オフィスとしてもお世話になっている The Company 福岡パルコ店にて開催

TECH DEEP SYNC: アプリ設計のベストプラクティス2018年春

朝の10時に集合し、ディスカッションテーマの確認から始めます。

今回は「TECH DEEP SYNC: アプリ設計のベストプラクティス2018年春」というお題のもと、各々気になるトピックを洗い出し、順にディスカッションしていくという形で実施しました。

f:id:kaizenplatform:20180413150034j:plain

SPAのルーティングやURL設計、認証などの構造的な話から GraphQL の活用スタイルまで、日頃溜め込んでいる知見や悩みがどんどんオープンに。
色んな視点・観点が重なり、議論は白熱してゆきます。

f:id:kaizenplatform:20180413150048j:plain

ランチ

ランチは会場近くの一風堂本店へ。

f:id:kaizenplatform:20180413163046j:plain 一風堂 大名本店

f:id:kaizenplatform:20180413163057j:plain ここ大名本店にしかない「元祖白丸・赤丸」は、味に深みがあってとても美味しかったです

f:id:kaizenplatform:20180413163108j:plain 九州人のソウルフード、ブラックモンブランを紹介してくれる laco 氏

午後:アイデア出し & ディスカッション

ランチの後もまだまだ話は尽きず。

「素の CSS 書くのやめて CSS in JS に一本化しません?」という提案に始まり、CustomElements の使いどころ、デザインチームとの協業の話、Google の Cloud Firestore を使って RealtimeDB をコンポーネントにバインドし、クライアントサイドの状態管理を無くすアイデアなど、話題は広がりおおいに盛り上がりました。

まとめ:チーム憲章をアップデート

1日の最後に、フロントエンド開発時の各メンバーの行動指針となる「チーム憲章」をアップデートして、今回の合宿のまとめとしました。

f:id:kaizenplatform:20180413163226j:plain 議論の内容をもとに、サービス設計・開発方針が更新されてゆきます

アップデート後のチーム憲章(一部)がこちら。

技術スタックについて

動作環境

  • 動作環境の保証ラインを設ける
    • プロダクトごとに変わってくるので、ちゃんと定めてメンテする
    • 基準を設けて機械的に判断する (e.g. 5%未満は切る)
      • リアルユーザー内での比率で見る
    • 後から切るほうが大変。マーケットに応じて広げることを検討する。

言語

  • 特別な理由がない限りTypeScriptを採用する

パッケージ管理

  • 特別な理由がない限りnpmを使う

フレームワークライブラリ

  • 基本的に自由

その他のライブラリ選定

  • 基本的に自由

コミュニケーションについて

with バックエンドチーム

  • FE / BE どちらか一方の都合を優先せず、相互に尊重する。スキーマに関するコンセンサスを最初に取る。

with デザインチーム

  • プロジェクト内での責務の分担を決めておく (UX設計 => UI設計 => UI実装)

今回のアップデートに際し、コミュニケーションについての項目が追加されたことはとても意義深かったです。
憲章には一言でまとめていますが、Production チームとしての成果を向上させるために積極的に他のチームと連携を取っていこう、スムーズな開発ができるよう尽力しよう、チームにとって必要であればデザイン作業も(得意不得意はあれど)担当するぞ、という各人の意志がここに結晶したのは大きな成果でした。

閉会〜打ち上げ

丸一日集中してディスカッションするのは大変ではありましたが、ともあれ初のFrontend Team合宿は充実した内容で終えることができました。 閉会後は、福岡の食を堪能しよう!ということで黒毛和牛もつのおいしいお店へ。

f:id:kaizenplatform:20180413163258j:plain 締めのちゃんぽんがこれまた美味かったです

f:id:kaizenplatform:20180413163311j:plain 中洲の屋台街へ。屋台のラーメンもまた乙な味です

おわりに

今回は知見を共有することが目的だったので、まずはやってみよう、発散も飛躍も大歓迎、行きすぎたら都度戻るというスタンスで議論していたのですが、やはり同じ空間で会話するメリットは大きく、終始多様なアイデアやアドバイスが飛び交っていました。 普段リモートで働いていて顔を合わせづらい分、業務を離れて1日でやりきるという意識のもと、集中して実施できたことも良い結果につながったのだと思います。

今後も、チームコミュニケーションの量と質の向上へ向けたイベントを継続し、より良いチーム作りを目指してゆきたいと思います。