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

フロントエンド クイズ大会 Cybozu Frontend Day 2024 Summer

参加者の人はステージの上へ お願いします

飛び入り参加、あと2組いけます！ 1チーム、1~3人まで受け付けてます！

参加チームの紹介 所属と普段やってることと、意気込みを一言！

概要 1チーム、1〜3人で 回答はスケッチブックに記載くださ 問題はスクリーンに表示しま 答えは調べたらすぐ出てくるものもあるので、
 PCやスマホを使って調べるのはやめてくださ チームメンバー間での相談は自由で 雰囲気を見て、司会がヒントを出すこともありま 正答数が最も多かったチームが優勝です

むずかしい問題もあるかもしれないケド そんな時は自分の直感を信じよう 楽しむ心を大事にネ

業務連絡

mugishimaさん、 正当数メモって！！ タイムキープもお願い！！

そ⁩⁨ れじゃあ早速始めよう

第１問 次のグラフはそれぞれ State of JS 2023で公開された React、Vue、Storybook、Vite のどれかである 組み合わせとして正しいものを選べ

❶ これはReact、Vue.js、Storybook、Viteのどれか 使ったことがある 使ったことがない ポジティブな意見

❷ これはReact、Vue.js、Storybook、Viteのどれか ポジティブな意見 使ったことがある 使ったことがない

❸ これはReact、Vue.js、Storybook、Viteのどれか 使ったことがある ポジティブな意見 使ったことがない

❹ これはReact、Vue.js、Storybook、Viteのどれか 使ったことがある ポジティブな意見 使ったことがない

第１問 ❶ ❷ 次のグラフを表すライブラリとして正しい組合せを選べ ❸ ❹ A ❶ Vue.js ❷ Storybook ❸ React ❹ Vite B ❶ React ❷ Vue.js ❸ Vite ❹ Storybook C ❶ Storybook ❷ Vue.js ❸ Vite ❹ React D ❶ Storybook ❷ Vue.js ❸ React ❹ Vite

3

2

1

第１問 ❶ ❷ 次のグラフを表すライブラリとして正しい組合せを選べ ❸ ❹ A ❶ Vue.js ❷ Storybook ❸ React ❹ Vite B ❶ React ❷ Vue.js ❸ Vite ❹ Storybook C ❶ Storybook ❷ Vue.js ❸ Vite ❹ React D ❶ Storybook ❷ Vue.js ❸ React ❹ Vite

mugishimaさん、 正当数メモよろしく！

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

第２問 A 現在のCWVの指標として正しい組合せを選べ C FCP、CLS、TBT CLS、LCP、INP B D TTFB、INP、CLS FID、CLS、LCP

3

2

1

第２問 A 現在のCWVの指標として正しい組合せを選べ C FCP、CLS、TBT CLS、LCP、INP B D TTFB、INP、CLS FID、CLS、LCP

第３問 次のうち、WAI-ARIAの ランドマークロールではないものを 選べ

第３問 A ランドマークロールではないものを選べ banner B C navigation header D E main search

3

2

1

第３問 A ランドマークロールではないものを選べ B navigation banner D main E search C header

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

第４問 A リリースが古いもの順に並び替えてください C Next.js v14.0.0 SvelteKit v2.0.0 B D Nuxt v3.0.0 SolidStart v1.0.0

3

2

1

第４問 Nuxt v3.0.0 1 B 2023/01/20 Next.js v14.0.0 2 A 2023/10/27 SvelteKit 3 C 2023/12/15 SolidStart 4 D 2024/05/22 リリースが古いもの順に並び替えてください

第５問 https://web.dev/baseline/2023?hl=ja

• https://web.dev/baseline/2023?hl=ja

第５問 Baseline2023に 含まれていない機能を選べ

第５問 A Baseline2023に含まれていない機能を選べ C dialog要素 inert属性 B D :has() CSSのネスト構文

3

2

1

第５問 A Baseline2023に含まれていない機能を選べ C dialog要素 inert属性 B D :has() CSSのネスト構文

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

第６問 A JSのランタイムとエンジンの組合せとして間違っているものを選べ C B Bun V8 Node.js V8 D WinterJS SpiderMonkey LLRT QuickJS E Deno V8

3

2

1

第６問 A JSのランタイムとエンジンの組合せとして間違っているものを選べ C B Bun V8 Node.js V8 D WinterJS SpiderMonkey LLRT QuickJS E Deno V8

第7問 まずは、次のコードを見てください

第7問

第7問 ブラウザで⁨⁩は どのように表示されるか 正しいものを選べ

第7問 A B ブラウザで表示されるものとして正しいものを選べ C D

3

2

1

第7問 A B ブラウザで表示されるものとして正しいものを選べ C D

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

第８問 A 5→7→7→5 B 6→7→6→5 C 5→7→6→5 D 6→7→7→6

3

2

1

第８問 A 5→7→7→5 B 6→7→6→5 C 5→7→6→5 D 6→7→7→6

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

A B Start End Promise 1 Promise 2 Result 2 Timeout 1 Result 1 Start Promise 1 Promise 2 End Timeout 1 Result 1 Result 2 C D Start Promise 1 Promise 2 End Result 2 Result 1 Timeout 1 Start Promise 1 Promise 2 End Result 2 Timeout 1 Result 1

3

2

1

A B Start End Promise 1 Promise 2 Result 2 Timeout 1 Result 1 Start Promise 1 Promise 2 End Timeout 1 Result 1 Result 2 C D Start Promise 1 Promise 2 End Result 2 Result 1 Timeout 1 Start Promise 1 Promise 2 End Result 2 Timeout 1 Result 1

優勝は... 口頭で発表するよ

優勝賞品は！

近所のデパートで買った ちょっと高そうなお菓子！