社内イベントでフロントエンドクイズ大会を開催しました - Cybozu Inside Out

この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY4 の記事です。

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

サイボウズでは開発、運用に関わる様々なチームや職能の人が集まって交流を深める社内イベントとして開運夏まつり 2024 が 7 月 2 ~ 4 日の 3 日間で開催されました。

開運夏まつり 2024 については詳しくは次の記事をご覧ください。
組織を強くするために！サイボウズ社内テックカンファレンス開催

この開運夏まつり 2024 の初日に Cybozu Frontend Day 2024 Summer と称し、社内でフロントエンドの交流ができるようなイベントを行いました。このイベントの詳細については後日、記事が公開される予定ですので、乞うご期待ください。

自分は、そんな Cybozu Frontend Day 2024 Summer のコンテンツの 1 つとしてフロントエンドクイズ大会の企画、運営を担当しました。

今回は社内イベントとしてフロントエンドクイズ大会を開催した際の学びと反省を紹介します。

フロントエンドクイズ大会の開催までの流れ

形式の検討

まずはじめにフロントエンドクイズ大会を、次のような形式で行うことを考えました。

1~3 人のチーム制
来た人全員が参加するのではなく、事前に出場チームを募集
問題は択一式
回答は早押しではなく、各チームで考えた回答をフリップ（スケッチブック）に記入するスタイル
司会を担当する自分が場の雰囲気をみて、ヒントを提示する
正答数が多いチームが優勝、優勝チームには景品を用意

チーム制や、問題を択一式にしたのはクイズ大会へ出場することへのハードルを下げるのが狙いでした。

フリップで回答と司会がヒントを出す形式を採用したのは、よくあるテレビのクイズ番組をイメージしています。ヒントを出せることで出場チームの様子を見ながら問題の難易度調整もできますし、単純に盛り上がるかなと思ったのもあります。

また、出場チーム以外で当日会場に来てもらった人たちには、出場チームが解いている様子を観戦したり、出場チームと一緒に問題を考えてもらうことで楽しみにながらフロントエンドのトピックを知れる機会になればいいなと考えました。

出場チームの募集

ある程度フロントエンドクイズ大会の概要を決めたら、社内に事前に次の内容で出場チームを募集しました。また、出場してくれるチームがいるかどうか不安だったので、個別に出場してもらえそうな人に声をかけたりもしました。

- 対象: 東京オフィスでオフラインで参加できる方
- 日時: 7/2(火) 15:00~15:50
- 問題: フロントエンドに関わる内容
  - 回答は選択形式を予定してるので、わからなかったら直感で選んでも大丈夫！
- チーム人数: 1~3 人
- 参加チーム数: 5 チーム
- 5 組集まらなかったら当日の飛び入り参加も OK！
- 正答数が一番多いチームにはなんと豪華景品が...！

当日は飛び入り参加のチームも含めて、5 チームが参加してくれました。

当日の運営

当日運営する上で、司会をしつつ、各チームの正答数を集計したり、タイムキープするのは無理だろうなと感じていたので、司会を自分が担当し、別の運営メンバーに正答数の集計やタイムキープをお願いしました。

フロントエンドクイズ大会を開催してみてのふりかえり

時間について

今回のクイズ大会では 50 分の間に、問題を 10 問出題する予定でした。しかし、時間が足りず 9 問までしか出題できませんでした。

また、回答時に各チームになぜその回答をしたのか、深掘りして話を聞きたかったのですが、その時間も取れませんでした。

なので、出場するチーム数にもよりますが、次のような時間を確保することを考えると 50 分間でやろうと思えば 5 問ぐらいが、問題数としては良さそうです。

問題の回答を各チームが考える時間
ヒントを出す時間
回答の理由を聞く時間
問題の解説をする時間
どのチームが正解したか運営メンバーが確認する時間

スライドについて

当日はスクリーンに問題と回答を映していたのですが、スライド操作で誤って解答を表示しないように間に次のような余分なスライドを挟みました。

また、前述しましたが、このクイズ大会では単に楽しんでもらうだけでなく、フロントエンドのトピックを知ってもらう機会にもなればと考えていたので、スライドに解説情報を載せて、しっかり解説時間を確保してもよかったです。

クイズ形式について

運営メンバーでふりかえりをした際に、会場に来てもらった人全員が参加できる形式も良さそうという意見が出ました。

今回の形式では出場チームをあらかじめ募集し、その他の参加者の方は観戦する形だったので、オー ○ スター感謝祭のような全員が参加できるようにする、クイズ大会用のアプリケーションを作成するのも面白そうです。

また、その他に各チームの正答数を把握するのが大変だったという反省がありました。あらかじめ、どのような問題を出すか、解答は何かを運営メンバーには共有し、どのチームが正答したかを把握する時間をもう少し確保すべきでした。

問題内容について

今回は最近のフロントエンドのトピックを中心に問題を作成しましたが、実際に出題した反応見ると、そのトピックを知っているか知っていないかが焦点になっており、チームで考える機会というのが頻繁には発生していなさそうでした。

なので、社内で開催するのであれば、フロントエンドトピックに限らず、実務に関連する問題を作り、チームとして考える機会を増やしても良かったかなと感じました。

また、CTO が好きな JS ライブラリは何か？など、自社特有の問題を作るのも盛り上がるポイントとして良いかもしれません。

実際に出した問題

今回のフロントエンドクイズ大会で出題した問題、ヒント、解説をいくつか紹介します。
（解答に関してはスライドをご覧ください）

実際に使ったスライドは次になります。

現在の Core Web Vitals を構成する指標の組み合わせとして正しいものを選べ

該当のスライド

選択肢

A: FCP、CLS、TBT
B: TTFB、INP、CLS
C: CLS、LCP、INP
D: FID、CLS、LCP

ヒント

この三つの指標は操作性、読み込み、画面のずれに関わるもの
略語の正式名称を一つ伝える

解説

2024 年 3 月から CWV の指標は CLS、LCP、FID → CLS、LCP、INP に変更された。
https://web.dev/blog/inp-cwv-launch?hl=en

他の選択肢の説明。
https://web.dev/articles/user-centric-performance-metrics#important-metrics

CLS: Cumulative Layout Shift
- ページが表示されるまでに発生するレイアウトのずれ
LCP: Largest Contentful Paint
- 最初にページに移動したときに、ビューポートに表示される最も大きなコンテンツのレンダリング時間
INP: Interaction to Next Paint
- ユーザー操作に対してブラウザが反応するまでの時間
FCP: First Contentful Paint
- ページが読み込み開始してからコンテンツの一部が画面に表示されるまでの時間
TBT: Total Blocking Time
- メインスレッドでブロックされてた時間
TTFB: Time to First Byte
- レスポンスの最初の Byte が到着するまでの時間
FID: First Input Delay
- 最初に画面を操作した時にブラウザが反応するまでの時間

次のフレームワークをリリースが古いものから順に並び替えてください

該当のスライド

選択肢

A: Next.js v14.0.0
B: Nuxt v3.0.0
C: SvelteKit v2.0.0
D: SolidStart v1.0.0

ヒント

どれか一つのライブラリのリリース日を伝える
もう一つライブラリのリリース日を伝える

解説

それぞれのフレームワークのリリース日は次の通り。

JavaScript ランタイムとエンジンの組み合わせとして間違っているものを選べ

該当のスライド

選択肢

A: Node.js、V8
B: Bun、V8
C: LLRT、QuickJS
D: WinterJS、SpiderMonkey
E: Deno、V8

ヒント

JS エンジンが間違っており、正しくは JavaScriptCore を使っている

解説

問題を作る際には次のスライドを参考にさせていただきました。 https://speakerdeck.com/shqld/2024-04-25

ブラウザで表示されるものとして正しいものを選べ

該当のスライド

<div class="container">
  <section>
    <h2>セクション</h2>
    <p>これは段落です。</p>
    <span>これはspanです。</span>
  </section>
</div>

.container :where(h2, p) {
  color: red;
}
.container :is(h2, p) {
  color: blue;
}
.container:has(h2, p) {
  color: green;
}

選択肢

選択肢のスライド

（スクリーンではどのような色になっているか伝わりづらいかもしれないと思ったので、出題の際に各選択肢がどのように表示されているかを口頭でも説明しました。）

ヒント

改めて HTML、CSS のコードをみましょう(コードが移されたスライドに戻す)
where 擬似クラスの詳細度は常に 0 です

解説

.container :where(h2, p)は:whereが詳細度を持たないので、0, 1, 0 になる
.container :is(h2, p)は詳細度を持つので 0, 1, 1
.container:has(h2, p)は 0, 1, 1
- しかし、このセレクタは.container が対象
- :isで指定したのは.container の子要素
- 結果として何も指定されてない span 要素が green になり、h2 と p 要素は blue になる

次の JavaScript を実行して出力されるものとして正しいものを選べ

該当のスライド

let x = 5;
console.log(x++);
console.log(++x);
console.log(x--);
console.log(--x);

選択肢

A: 5→7→7→5
B: 6→7→6→5
C: 5→7→6→5
D: 6→7→7→6

ヒント

インクリメント演算子（++）とデクリメント演算子（--）を置く場所が前の場合と後の場合でどう変わるかがポイント

解説

インクリメント演算子が後ろにある場合、現在の値を返してから値をインクリメントする。逆に前にある場合は、値をインクリメントしてから返す。デクリメント演算子も同様の動作をする。

console.log(x++)で 5 を出力し、x の値は 6 にインクリメント
console.log(++x)で x の値を 7 にインクリメントし、7 を出力
console.log(x--)で 7 を出力し、x の値は 6 にデクリメント
console.log(--x)で x の値を 5 にデクリメントし、5 を出力

最後に

今回は社内イベントとしてフロントエンドクイズ大会を開催した際の学びと反省を紹介しました。

クイズ大会を開催してみて、結構盛り上がったのではないかと感じましたし、実際に参加してもらった人からは、楽しかったと言ってもらえたのでホッとしています（問題めっちゃ難しかったみたいな意見もあった）。
また、開催してみることで色々な学びもあったので、次回に活かしたいです。

また、こういった企画はサイボウズだから開催しやすかったのかなとも感じました。クイズ大会を開催するための会場や設備があり、かつ、開催する上で多くの社内の人に協力してもらえたのはとても大きかったです。

最後に、これを機会にフロントエンドクイズ大会を開催されることがありましたら、どういった問題をどのような形式で行なったかなど、ぜひ記事などで共有していただけると嬉しいです。