受験の動機

もともとはJavaScriptを体系的に学ぶのに良さそうな試験を探していたときに、この試験を知りました。
ただ、JavaScriptはLevel2にしか出題されず、Level2を受けるにはLevel1に合格する必要があったため、Level1から受験した次第です。

受験してよかったこと

より良い実装方法を考えられるようになった
お試しの機会が得られた
仕様書を読まねばと気づいた

それぞれ説明します。

より良い実装方法を考えられるようになった

今までHTML,CSSはまとまった仕様書も参考書も読んだことがなかったため、場当たり的な実装しかできていませんでした。
今回HTML、CSSでできることを広く学ぶことで、実装の引き出しがぐっと増えました。
例えば、アルファベットを大文字にしたいとき、今まではJavaScriptで書いていましたが、CSSの text-transform で実装可能とわかりました。（しかもほとんどのブラウザで対応済み）
text-transform - Can I use...
逆に、前から使ってみたかった<datalist> (サジェスト用のリストを作る要素) を試してみたら、スタイルをCSSで上書きできないことが判明し、実利用は難しいと思いました。

このリストのスタイルを変えられない

入力値が長いと▼が潰れるのもいただけない

このように、より良い実装方法に気づけたり、知識止まりだった技術の使い所を想像するきっかけが持てたことは、大きな収穫でした。
当初はJavaScriptを勉強したいと思っていましたが、HTML,CSSでできることを先に知っておくことで、より適材適所を意識できるのではと思います。

お試しの機会が得られた

受験にあたって、書いたことのないもの・よく理解できていないものは片っ端からサンプルコードを書いてみました。
例えば、今までメディアクエリはなんとなく「難しそう」と敬遠してフレームワークに任せていましたが、実際にサンプルコードを書くと基本の書式は単純だったので、親しみが持てるようになりました。
サンプルだけでも実装しておくと、いざ業務で応用させる必要が出た時にもハードルが下がるはずです。

仕様書を読まねばと気づいた

サンプルコードを書いていくと、参考書を読んだ時には「わかったつもり」でも、疑問がたくさん出てきます。
例えば、CSSのメディアクエリで device-orientation を使うとスマホの向きによってレイアウトを変えることができますが、それを知った段階では「デバイスを横にしたら横用のスタイル、縦にしたら縦用のスタイルが当たるだろう」と思っていました。しかしそれが間違いでした。PCでサンプルコードを書いたとき、PCは横向きであっても、ブラウザの表示幅を狭くしていくと、「縦用」のスタイルに切り替わったのです。
この事象の詳細はこちらでわかりやすく説明してくださっています。
@mediaのorientationはviewportの縦横がどっちが長いかであって、デバイスが縦か横かじゃないですよ

言葉やイメージに囚われず仕様を確認することが大事だと気づくことができました。

次に活かしたいこと

試験勉強の中での経験から、次に活かしたいことをまとめます。

手を動かしながら覚える
日々仕様書を読む
時々体系的に学ぶ時間をつくる

手を動かしながら覚える

最初は参考書をひたすら読んで問題を説いていく「読書型」の勉強法でした。
ただ、参考書を1,2週したところで自分が過去に線を引いた内容をあまり覚えていないことに気づいたため、「暗記よりも手を動かして理解しよう」と方針を変えました。
そうすると、何度も本で間違えたところが、一度コードを書くことで、すっと理解できるようになりました。
疑問に思ったところは更に検索したり、開発者ツールや拡張機能を使って、自分の実装が「見た目以外も」意図通りになっているかを確認しました。
例えば、どのセクショニングがどうアウトラインに影響するか話は本で何度読んでも忘れたので、サンプルコードを書いて、下記のツールで意図通りの出力になっているかを確認しました。
headingsMap

他にも気になったところは「書く」→「調べる」を繰り返したおかげで理解力が上がりました。この方針転換をしていなければ、合格しても1週間で忘れてしまい、使える知識にならなかったと思います。
参考書の知識を自らの力とする上ではアウトプットは必須と心得ました。

日々仕様書を読む

正直、これまではChromeの開発者ツールやVSCodeが予測してくれる候補の中から「それっぽいもの」をブラウザ上で確認して問題なさそうなら使うことがありました。HTML、CSSはある程度雰囲気で書いても動いてくれるので、仕様を理解して使うのが義務と知りつつ調べずに使ってしまっていたのですが、今回仕様を頻繁に調べる中で、「思ったのと違う」ものが多いことに気づきました。それが今までの行為は他のブラウザでどう見えるかや、他の挙動を起こさないか等の点を考慮できておらず非常に良くなかったと反省し、今後は仕様を調べてから使っていこうと心を改めました。
それに加えて、今まで当たり前に使っていたものも、思い違いや理解していない部分がきっとあるので、時々仕様書をまとめて読み返そうと思います。

時々体系的に学ぶ時間をつくる

今回はHTML,CSSなどWebアプリ開発における基礎知識の大々的な見直しや補完をしたことによって、上記の益を得ることができました。他の技術についても同じことが言えるので、時々このような試験を受けるのはよい気づきの機会だと思いました。

まとめ

この試験に限らずですが、手を動かしながら知識を使って理解すること、それをどう活用できそうかイメージすることが生きた知識につながるのだと思いました。
次は本懐であるLevel2を受験する予定なので、そちらの勉強はじめから手を動かしてやっていこうと思います。