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

大問 1

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

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

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

• A definition update for Baseline | web.dev
  • https://web.dev/blog/baseline-definition-update?hl=en

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

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

• Add the <search> element by domenic · Pull Request #7320 · whatwg/html
  • https://github.com/whatwg/html/pull/7320

(ちなみに 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 がこの問題そのものの調査内容をブログに書いていることのヒントであった。

• The end of third-party cookies and its impact on Miro apps and integrations | by Darren | Miro Engineering | Medium
  • https://medium.com/miro-engineering/the-end-of-third-party-cookies-and-its-impact-on-miro-apps-and-integrations-ee73358cda1e

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

• 3PCA 14 日目: Partitioning | blog.jxck.io
  • https://blog.jxck.io/entries/2023-12-14/partitioning.html

大問 3

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

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

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

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

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

大問 4

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

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

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

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

• AbortSignal.any(), AbortSignal.timeout(), そして addEvnetListener() の Signal | blog.jxck.io
  • https://blog.jxck.io/entries/2023-06-01/abort-signal-any.html

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

作問意図

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

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

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

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

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

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

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

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