歴代の採用されたECMAScriptはいつの年代のものかを当てるクイズアプリ

code:md

- ECMAScriptは毎年新たなメソッドが使えるように更新されているが、公開されたもので何がいつから使えるかを把握できてなかった

- クイズという形式でどれくらい回答できるかを試したい

- 併せてどれくらい周りは知っているのかも知りたい

- 回答画面

- 画面に出てくるメソッドやAPIを見ていつの年代かを回答する

- ランダムで10問出す

- ユーザーはボタンを押せるようにする

- ES2021, ES2022, ES2023 ... と並んでいる

- メソッドやAPIが使用できる年代とボタンで回答したものが一致した場合は1点加点する

- 間違った場合は加点されない、減点もされない

- 正解したか間違ったかは回答時点ではわからない

- ページを開いている状態であれば回答は保持されたままにする

- リロードした場合や離脱した場合は回答は保存されない

- 結果ページ

- 全問回答したら結果ページを表示する

- 一旦ローディングを挟む

- 「クイズの回答結果xx点です！」という文字が表示される

- xxが正解した問題数＝点数

- 0詰め2桁の数字で表記する

- どの問題が正解したかのテーブルも表記する

- | 問題数 | 正誤 | 回答 | 問題内容 | というテーブルフォーマット

- 例

- | 1問目 | ◯ | ES2020 | Nullish coalescing operator (??) - ES2020 |

- | 2問目 | x | ES2021 | Async functions - ES2017 |

- ...以下10問目まで続く

- Xへの投稿URLを発行する

- Next.js App Router

- shadcn/ui