Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

業務連絡

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

3

Slide 17

Slide 17 text

2

Slide 18

Slide 18 text

1

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

3

Slide 24

Slide 24 text

2

Slide 25

Slide 25 text

1

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

3

Slide 30

Slide 30 text

2

Slide 31

Slide 31 text

1

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

3

Slide 36

Slide 36 text

2

Slide 37

Slide 37 text

1

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

3

Slide 43

Slide 43 text

2

Slide 44

Slide 44 text

1

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

3

Slide 49

Slide 49 text

2

Slide 50

Slide 50 text

1

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

第7問

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

3

Slide 57

Slide 57 text

2

Slide 58

Slide 58 text

1

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

3

Slide 63

Slide 63 text

2

Slide 64

Slide 64 text

1

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

3

Slide 69

Slide 69 text

2

Slide 70

Slide 70 text

1

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

優勝賞品は！

Slide 74

Slide 74 text

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