2025年9月6日（土）に北海道札幌市で開催された
「フロントエンドカンファレンス北海道2025」に、テックタッチはゴールドスポンサーとして協賛しました。
当日はスポンサーブースを出展し、来場者を対象にフロントエンド技術に関するクイズを実施しました。技術系イベントでのブース出展は、テックタッチとして初の試みです🌟
本記事では、ブース企画を担当した tsune、aki、shoko から、クイズの内容や結果をレポートします。
ブース企画：テックタッチフロントエンドクイズ
テックタッチのブースでは、来場者が参加できるフロントエンドクイズを実施しました。
Shadow DOM・ブラウザ API・Chrome 拡張機能など、テックタッチのフロントエンド開発に深く関わる領域を題材にしたクイズです。
テックタッチは既存のあらゆるWebサービス上で動作するため、プロダクト開発においてDOM 操作やブラウザ API を扱う場面が多々あります。
参加者のみなさんに「テックタッチではこんな技術を使っているんだ！」と知ってもらうことを目的として問題を選定しました💡
クイズ成績サマリー
今回のクイズには、64名の方が参加してくれました！
クイズ結果はこのようになりました。
| スコア | 人数 |
|---|---|
| 全問正解 | 0 |
| 4問 | 3 |
| 3問 | 6 |
| 2問 | 20 |
| 1問 | 23 |
| 0問 | 12 |
平均正解数は1.45問（全5問）。最難関は Shadow DOM に関連する問題で、正答率は14%でした。
DOM やブラウザの挙動に踏み込んだマニアックな問題を中心にしたため、参加者の多くは1問正解に留まり全問正解者はゼロという結果でしたが、参加者のみなさんとフロントエンドの奥深さを分かち合うことができました。
ご参加いただいたみなさま、ありがとうございました！
次の章で、当日出題したクイズを全問公開しています。
全5問のクイズを通してテックタッチのフロントエンド開発の雰囲気を感じてもらえたら嬉しいです🙌
問題と解説
この章では実際に会場で出題されたクイズとその解説をします。
各問題ごとに ①問い ②ヒント ③回答 ④解説の順番に記載していますので、ぜひチャレンジしてみてください💪
それではスタートです！
.
.
.
Q1. document.elementsFromPoint() の結果に含まれる要素は次のうちどれ？
- pointer-events: none の要素
- display: none の要素
- opacity: 0 の要素
- visibility: hidden の要素
ヒント💡
「描画されているか」「ヒットテストの対象か」の2軸で考えると整理しやすいかも！
正解と解説📝
正解は…「3. opacity: 0 の要素」です！
解説:
elementsFromPoint は指定された座標にあるすべてのヒットテストを通過した要素を配列で取得するAPIです。
各プロパティの動作は下記のようになるため、正解はopacity: 0 の要素 となります。
display: none… レイアウトから除去されヒットテスト対象外visibility: hidden… レイアウトは存在するがヒットテストで不可視扱いpointer-events: none… ヒットテストをスキップするopacity: 0… 透明でもレイアウト上は存在しヒットテスト対象
Q2. delete Date.prototype.toJSON した後に JSON.stringify(new Date()) を実行した結果は？
- '(現在時刻)’
- '{}’
- エラーが発生する
- undefined
ヒント💡
JSON.stringify は対象に toJSON があればそれを優先して呼ぶんだ！
正解と解説📝
正解は…「2. '{}’」です！
解説:
JSON.stringify() は toJSON があれば優先的に使用されます。
Date インスタンスには文字列を返す toJSON() が実装されています。
そのため、下記のように出力されます。
JSON.stringify(new Date()) // '"1970-01-01T00:00:00.000Z"'
この問題では Date.prototype.toJSON が削除されているため、toJSON がないオブジェクトの場合どのような挙動になるかに注目する必要があります。
toJSON がないオブジェクトの場合、列挙可能なプロパティのみが文字列化されます。
Date インスタンスには列挙可能なプロパティが存在しないため {} が出力されます。
この挙動は、以下のようなコードで確認できます。
const obj = { a: 'a value', b: 'b value' }; // a のみ enumerable を false にすることで // 列挙可能ではないことを示します。 Object.defineProperty(obj, 'a', { enumerable: false, }); JSON.stringify(obj) // '{"b":"b value"}'
列挙可能なプロパティが存在しないものとして、Map や Set などもあります。
Q3. ブラウザ拡張機能の content script からアクセス可能な API は次のうちどれ？
- chrome.tabs
- chrome.storage
- chrome.cookies
- chrome.safari
ヒント💡
「ブラウザ全体を動かす API」「ページの中でも完結できる API」かで分けて考えてみよう！content script は後者寄りかな？
正解と解説📝
正解は…「2. chrome.storage」です！
解説:
Content Script は ページの DOM に近い環境 で動作するスクリプトです。
利用可能な Chrome Extension API は限定的です。例えば下記のようになっています。
- 利用可:
chrome.runtime,chrome.i18n,chrome.storage - 不可:
chrome.tabs,chrome.cookies
よってこの問題の正解は chrome.storage になります。
chrome.tabs や chrome.cookies は 拡張 service worker と 拡張機能ページ で利用可能です。
ちなみに chrome.safari は存在しません。
Q4. Popover API が正式実装された Chrome のバージョンは？
- 108
- 110
- 112
- 114
ヒント💡
1548006 ÷ 13579 は？
正解と解説📝
正解は…「4. 114」です！
解説:
Popover API（popover 属性、showPopover()/hidePopover()、トップレイヤー管理）が Stable で有効になったのは Chrome 114 からです。
ちなみに問題の選択肢となっている他のバージョンでは下記のような機能が実装されました。
108: 新しいビューポート単位としてlvh, svh, dvh が追加されました
110: :picture-in-picture 擬似クラスが追加されました
112: CSS のネストがサポートされました
Q5. Shadow DOM 内のスタイリングについて正しいものはどれ？
- CSS カスタムプロパティ(--foo)は Shadow DOM の外から内へ伝わる
- Shadow DOM が mode: "open" の場合は、Shadow DOM の外のスタイリングが内に伝わる
- Shadow DOM 内の
<style>は Document 全体に作用する - Shadow DOM の外から内へはいかなるプロパティも伝わらない
ヒント💡
mode: "open" / "closed" は「JS から shadowRoot を触れるか」の違いであって、CSS のカプセル化挙動とは別物だよ！
正解と解説📝
正解は…「1. CSS カスタムプロパティ(--foo)は Shadow DOM の外から内へ伝わる」です！
解説:
Shadow DOM は スタイルがカプセル化 されており、通常の CSS セレクタや継承は境界を越えられません。
また、Shadow 内の <style> はその Shadow Tree にのみ作用します。
ただし、CSS カスタムプロパティはホストから Shadow Tree 内に伝搬します。
mode は DOM アクセス可否の設定でありスタイルとは無関係です。
"open" の時には、外部の JavaScript からアクセスできます。
"closed" の時には、外部の JavaScript からアクセスすることはできません。
この違いについては以下のようなコードで確認できます。
const openHost = document.createElement('div'); openHost.attachShadow({ mode: 'open' }); const closedHost = document.createElement('div'); closedHost.attachShadow({ mode: 'closed' }); console.log(openHost.shadowRoot); // ShadowRoot オブジェクトが出力される console.log(closedHost.shadowRoot); // Null が出力される (アクセスできない)
ちなみに、この問題と直接的な関係はありませんが、::part 擬似要素を用いることでホストからスタイルを適用できます。
参加者の傾向と学び
回答の傾向が印象的だった問題を考察してみようと思います！
document.elementsFromPoint()
約半数の人が 「pointer-events: none の要素」を選んで不正解となっていました。
他の選択肢はすべて、要素が画面上で視認できない状態になるのに対し、「pointer-events: none の要素」は唯一画面上で視認できるので、この選択肢を選んだ人が多かったのではないかと推察しています🧐
Shadow DOM のスタイリング
これは最も正解率が低い問題でした🤯. Shadow DOM はスタイルのカプセル化をするもの、という知識があった人にとっては「いかなるプロパティも伝わらない」という選択肢が引っ掛けになったのではないかと思います。
また「mode: "open" でスタイリングが伝わる」を選んだ人が一番多かったのは、Shadow DOM に馴染みがない人にとって mode: "open" というプロパティがいかにも何かが伝搬しそうなプロパティに見えたのかも？と感じました！
会場の反応・盛り上がり
当日は、クイズの解説を交えて参加者の面々と色々とお話させてもらいました😌
クイズの感想としては、
- 「思っていたより難しかった！」
- 「使ったことがない API だった！」
という声が多かったです！
クイズを開催している様子を見て、「自分もクイズやってもいいですか？」と声をかけてくれる方もいて、とても嬉しかったです🙌
クイズのヒントをテックタッチのプロダクトで実装するという工夫もしたため、プロダクトに実際に触れてもらう良い機会にもなり良かったです💡
詳細なイベントのレポートは、こちらの記事をぜひご覧ください💁♂️
まとめ
たくさんの人にクイズに参加してもらえて、ブースも盛り上がって嬉しかったです🥳
クイズに参加してくれたみなさま、本当にありがとうございました！
今回のブースで使ったクイズアプリの制作の裏側も今後の記事で紹介する予定ですので、そちらも読んでもらえたら嬉しいです！
