この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend Stage) DAY 15 の記事です。

ogp

こんにちは、フロントエンドエキスパートチームの @mugi_uno です。

DAY 4 の記事で nus3 がすでに一部紹介していますが、2024年7月2日にサイボウズ社内で実施された開発・運用に関わるメンバーの交流イベント "開運夏まつり 2024" に併せて、サイボウズでのWebフロントエンドの祭 "Cybozu Frontend Day 2024 Summer" を実施しました。

その中で、フロントエンドクイズ大会やライブコーディングバトルといった変わり種コンテンツも行われ、大変盛り上がりました。

今回は、Cybozu Frontend Day とは一体何なのかと、具体的にどのような企画が行われたかをご紹介します。

Cybozu Frontend Day ってなに？

簡潔に言うと「サイボウズ社内でWebフロントエンドに関係する人で交流するお祭り」です。

サイボウズ社内には、フロントエンドエンジニアとして専任でWebフロントエンドに関する業務に取り組んでいるメンバーも多く在籍していますが、プロダクト・プロジェクト・チームを横断して考えると、なかなかコミュニケーションを取れていないのが実情です。また、Webフロントエンドに関わるのはフロントエンドエンジニアに限った話ではなく、新機能開発チームでフルスタックに開発をしているメンバーでも、必要に応じてフロントエンド領域に深く突っ込むことも珍しくありません。

そこで、Webフロントエンドに関わるメンバーで集まり、LTなどで普段関わる機会のないチームの技術的な事例を聞いてみたり、お互いに人となりを把握しておくことで、今後のコミュニケーションを円滑にするきっかけにしよう！というのが狙いです。

これまでの Cybozu Frontend Day

Cybozu Frontend Day は今回で3回目の開催です。簡単に過去2回の開催内容をご紹介します。

第1回 / 参加者全員がLT必須スタイル

初回開催は、"参加する場合は必ずLTをしましょう！" というスタイルで実施されました。開催レポートも公開されています。登壇自体に慣れていないメンバーも多かったため、チャレンジするきっかけとして良い場になりました。

blog.cybozu.io

第2回 / 脱レガシーパネルディスカッションを実施

第2回開催時は、任意によるLTに加え、社内で複数の大規模脱レガシープロジェクトが進行しているため、そのメンバーによるパネルディスカッションを実施しました。

サイボウズ社内ではフロントエンドの脱レガシーはホットトピックの一つであり、プロジェクトごとに異なる知見を持っているため、それらを共有する場となりました。

過去開催から得られた学び = トークだけは集中力が切れる

過去の開催は、全体的にLTが中心の構成です。

他プロジェクトの知見が聞ける・人前で話す練習の場になる、などの一定の価値のあるコンテンツですが、半日近くLTをひたすら聞き続けると、さすがに後半は集中力が途切れてしまうという意見がありました。

第2回で実施したパネルディスカッションでは、笑いもあったりでワイワイ感を出せましたが、どうしても登壇者以外は聞いているだけの形になってしまうものでした。

せっかくの "祭" ですので、LTなどのトークの恩恵も受けつつ、参加者の "参加してる感" も味わえるイベントにしたいところです。

Cybozu Frontend Day 2024 Summer

というわけで、運営メンバーで前述の反省なども踏まえてコンテンツを企画し、今回の Cybozu Frontend Day 2024 Summer が実施されました。

実際の様子も踏まえて内容をご紹介します！

LT

LT自体も楽しいコンテンツではあるので、数を控えめにして実施しました（全部で8本ほど）。時間もきっちり5分と制限をつけた形です。

発表内容はバラエティ豊かでした。

OSSのメンテナになった話
最近新規開発した機能の裏話
UnicodeへのEmoji提案の話
HTML Standard での新規仕様の話
などなど..

ボリューム感もちょうど良く、最初から最後まで疲れることなく集中して聞けた印象です。

LTの様子その１ LTの様子その２ speakerdeck.com

フロントエンドクイズ大会

2つ目のコンテンツは、Webフロントエンドの知識を問うクイズ大会を実施しました。

クイズ大会の様子

こちらの詳細については別途イベント運営の nus3 が記事を書いています。 blog.cybozu.io

出された問題については、毎週社内で開催しているフロントエンドの情報共有会である Frontend Weekly で取り扱われた内容からの引用で「なんか聞いたことあるけど、なんだっけ…？」という絶妙なものから、フレームワークのリリース年月日を並び替えろという、この知識いつ使うのというネタ問題もあり、大変盛り上がっておりました。

ちなみに、ここでの優勝者には、寸前にnus3が近くの高島屋で購入したオシャレなお菓子がプレゼントされていました。おめでとうございます。

ライブコーディングバトル

Frontend Day 最後のコンテンツとして実施したのが "ライブコーディングバトル" です。

これは、私も運営メンバーであり地元の富山県で毎年開催されている BuriKaigi というITカンファレンスでの名物コンテンツをパク…オマージュしたもので、当日発表されるお題を制限時間内に作って完成度を競い合うものです。

挑戦者は事前に募集し、3チームがチャレンジャーとして参加しました。

新卒チーム
中堅チーム
ベテランチーム（開発本部長を含む）

チャレンジャーには事前に次のようなレギュレーション情報だけ共有されています。

レギュレーション

お祭りなので、審査基準が「独断と偏見」というのがポイントです。

また、ライブコーディングを盛り上げるために、

mugi: 実況
nus3: 解説
hacchan: 神

という役割を用意し、リアルタイムでフリートークを繰り広げることにしました。

"役割: 神"は出題者であり仕様の責任者です。当日に仕様に対しての質問などが発生した場合もアドリブで回答します。

ライブコーディング前半戦

というわけで、当日に神から発表されたお題がこちらです。

お題「ビンゴカード」

ただビンゴカードを表示してね！というものです。

これだけを聞くと「簡単そうだな・・」と思うかもしれませんが、当日のコーディング時間はおおよそ１時間弱という制限がついており、かつコーディング風景はリアルタイムで画面共有され実況・解説されるという、日常ではなかなか味わえないシチュエーションでの開発となるため、意外と手こずります。（事前に運営メンバーでトライしてみた感じも、意外と難しいかも？という感触でした）

ライブコーディング風景

笑いも多く、実際に動作した画面が見えたときなどは「お〜！」と歓声が挙がったりもしていました。

実況＆解説＆神が画面を見ながら好き放題リアルタイムでコメントをしていたのもあり、オーディエンス視点では今何が行われているかを把握しやすかったり、お祭り感も非常に強く出ていた時間だったかと思います。

また、オーディエンスの中にもリアルタイムで同時にお題に挑戦している人も多かったのが印象的でした。エンジニアをやってると、プログラミング的なお題を出されるとついつい解こうとしちゃうのかもしれません。休憩時間もお題について話し合ってる人が多くいました。

ライブコーディング後半戦 / 追加仕様

時間も後半に差し掛かるところで、実況・解説・神による突然の茶番劇が始まりました。

解説(nus3)📣「ところで神、ビンゴカードって、表示するだけでいいんですかね？」
神(hacchan)👼「ん〜、なんかビンゴってさ・・・穴開けたりできなかったっけ？」
実況(mugi)🎤「あ〜、たしかにありますね」
神(hacchan)👼「今回の仕様に入れてなかったっけ？」
解説(nus3)📣「聞いてたのは表示だけだったような気がしますね」
実況(mugi)🎤「これはつまり・・・それもほしいってことですかね？」
神(hacchan)👼「ほしいでしょ〜、だってビンゴだもん！」
実況(mugi)🎤「では現場のみんなにできるか聞いてみましょう。できそうですか？」
現場の声 👩‍💻「追加料金です！！」
実況(mugi)🎤「できるそうです！！」