created_at
updated_at
tags
toc
headings

Web 技術年末試験 2023 講評 #web_exam2023

Intro

2023 年の Web 技術を振り返る試験として、「Web 技術年末試験 2023」を実施した。

その問題と想定解答、平均点などを公開する。

Web 技術年末試験

この試験は、「去年の Web にはどんな変化があったか」「どんな新しい技術が出てきたか」などを、試験形式で振り返るコンテンツを作ってみたことに端を発している。

2022 年はこれを狭い範囲で実施したが、思った以上に評判が良かったため、2023 年は受験者を一般募集してみることにした。

試験形式であるため点数は出るが、目的は「今年はこんなことがあった」を振り返ることや、「こんなことがあったのは知らなかった」という取りこぼしに気づく機会になることである。

解答用紙/想定回答

試験形式

いわゆる、学校で受けるような定期試験に似た形式で実施した。

  • 範囲: 2023 年の Web 技術の変化、トレンド、重要トピックなど
  • 方式: 選択、記述、コーディング
  • 時間: 60 分
  • 点数: 100 点満点
  • その他
    • 何を調べても良い(検索、AI など)
    • Google Docs で行うため、Google アカウントが必要です

2022 年の過去問は以下にある。

オンライン試験

オンライン試験に参加すると、 60 分の時間制限で実施でき、終了後に問題の解説が行われ、後日採点結果の点数を通知した。

予想よりも多く 66 名の受験者が参加登録し、Meet には 37 人が出席、そのうち提出したのは 33 人だった。

事前に N > 10 の場合にのみ平均と中央値を公表するとしていたため、以下の通り公開する。

  • 採点数: 33
  • 平均点: 51
  • 中央値: 49

作問は、ただただマニアックな問題を出して誰も点が取れないのでは、実施する意味がない。

ある程度歯応えがありつつ、全く無理ではない問題として、平均点 50 点を狙って作ったが、その目標自体は達成できたと思う。

問題解説

大問 1

Baseline は、今後の Web 開発の指標の 1 つとして採用されることが期待される概念である。2022 年は Interop を出題したため、今年はこちらを採用した。

文章穴埋め中心であり、調べればすぐ出てくるような知識問題となっている。

ただし、 Baseline はまだ発展中であるため、2023 年 12 月の更新で、新しい概念として Newly/Widely Available が追加された。そのため、これについては最新の記事を読んでいるか、探し出す必要があった。

また、Baseline 2023 にリストされていた、新しい HTML 要素として <search> の導入理由について問う問題は、ある程度上級向けの問題と想定している。

知らない場合でも、ARIA の Role に関連するというヒントを手がかりに、解説しているサイトを探すか、以下の一次ソースに辿り着ければ答えがある。

(ちなみに mozaic.fm では、2022 年の ep95 あたりから何度か触れてる)

HTML に要素が追加される頻度は、 JS や CSS ほど高くはないため、追加された際はそのモチベーションに着目し、適切に活用できると良いだろう。

大問 2

2023 年の重大トピックの 1 つである、 3rd Party Cookie Deprecation についての問題を採用した。

この問題は、広告ビジネスに関連する問題として捉えられることもあるが、多くのサービスにとって無関係ではないため、最低限の対応方法は把握しておきたい。

Privacy Sandbox の API は、非常に難解な API 群であるため全てを覚える必要はないが、これを機に「名前」と「代表的ユースケース」くらいは把握しても良いだろうということで、紐付け問題を出題した。

最後に、広告以外で最も遭遇する可能性が高いユースケースである「埋め込みを提供しているが、ログアウトされてしまう」という不具合に対処する方法についての問題にした。これには幅広い回答がある可能性があるため、Storage Access API と CHIPS の 2 点をベースに半分ずつ加点し、その他の対応については内容に応じて加点とした。

なお、「ホワイトボードサービス M」は Miro のことであり、Miro がこの問題そのものの調査内容をブログに書いていることのヒントであった。

ちなみに、このブログでは、アドベントカレンダーの 14 日目で解説している。

大問 3

2023 年にめざましかった CSS の新機能に関する問題とした。

Nesting は、記法に何度か変更があったが、基本的には最新のもので落ち着いているため、それを選べていることを前提とする。ただし、他の記法も最新の仕様で間違っていなければ良しとする。

Scope は、ドーナツスコープ(上限と下限が決まったスコープ)の意味がある仕様にし、カードレイアウトのカードの中に「任意のコンポーネント」を配置でき、「そこに波及しないスコープを切る」という設問とした。

Subgrid は、まさしくカードレイアウトにおける頻出パターンであるため、「カード内のグリッドを揃える」という要件を満たすことができる。

便宜上実装は React だが、問題は React を知らない人でも普通に答えられるように作問している。

大問 4

非同期のエラーハンドリングは、地味ではあるが応用範囲の広い変更の 1 つだ。

  • AbortSignal.any()
  • AbortSignal.timeout()
  • addEventListener() の signal プロパティ

これら 3 つを用いることで、従来行っていた非同期処理の中断(Aborting)を、イベントリスナーが追加され続けるメモリーリークを解消する形で書き直す問題とした。

実は、このブログに書いた記事と全く同じ内容であるため、そこと差別化するのに苦戦した問題でもある(サーバのコードをフロントにしただけで基本は同じ)。

これも、様々な解法が予想されるが、基準は最終的にハンドラが綺麗に消えていれば良いとする。しかし、想定された API を使わず自前で実装するには、おそらく時間が足りないだろう。

作問意図

今回は、外部に広く募集したため、なるべく汎用的な問題にする方向にした。

去年は、エコシステム周りの問題として TypeScript の satisfies を採用したため、そうした問題も入れるつもりでいた。

2023 年といえば、 React Server Component や Server Action など、エコシステム系でも相応のテーマがあったため、その方向で考えていた。

しかし、さすがに React や Next を使っていない人にはピンとこないだろうし、使っていたとしても、まだプラクティスなど諸々が定まっていない中で、回答が安定する問題を作るのも難しかった。

Signals といった、複数のフレームワークに波及した話題もあったが、少し対象が狭すぎるため外した。

大問 4 自体を複数用意し、選べる形式にするなどもあったが、作問の負荷をこれ以上上げるのは、現実的では無かった。

結果、どんな開発者にとっても知っておいて損のない内容で、かつ平均を 50 点代にする作問ができたため、ある程度目的は達成できたと思う。

来年以降も、一般の受験を募集したいと思っているため、特にライブラリ周りはどのようにテーマを絞り、不公平感の少ない作問をするか、悩ましいところではある。

反省点

作問が非常に難しい。

  • 解答が一意に定まるような条件付け
  • 大きすぎず小さすぎないコーディング問題の調整
  • 対象を絞りすぎず、広げすぎないテーマ設定
  • 60 分でギリギリできるくらいの難易度
  • 2023 年という試験範囲
  • バグの無い問題と解答の用意

特に大問 3 では「Scope を切っているため、Nesting する必要がない」といった派生の回答や、大問 2 の「トライアルの名前」という表現は「Reverse Origin Trials」を想定していたが、「Deprecation trials: Trial for Third Party Cookie Deprecation」とトライアル自体の名前が回答されるなど、まだまだ隙はいくつかあった。

ガチガチに問題文で指定すると、それを書き起こすだけになりそうなため、ここはある程度採点で吸収するつもりではいたが、それが採点のブレを生じないようにするのもまた難しい。

あと、 Codepen が「試験用」と「想定解用」を用意し、かつその中身を「想定回答の Docs」にも同期する必要があり、ここが微妙に面倒だった。次回は何かいい方法を考えたい。

Outro

何度も言うが、点数が目的ではなく、今回の試験を通じて知らなかったことなどを振り返るきっかけになれば良いと思う。

また、キャッチアップで手一杯になりがちなエンジニアは、過ぎゆく話題や、自分の業務に関係ない話題に触れる機会が減りがちだ。試験形式でこうした内容をまとめて振り返る機会というのは、 Web 以外にも応用が効くのではと思う。(試験ばかりになると辛いが)

来年も実施できたらと思うが、来年もこの作問をするのかと思うと、少し気が重い。