Webフロントエンドにまつわるいろいろな話
ネコメシでは週に１回、持ち回り制で勉強会を開催しています。各々が気になっているトピックについてスライドを作って、30分～1時間くらいの発表を行います。
先日の勉強会にて、JavaScriptフレームワークのStimulusについて発表したので、その内容を公開します。
Stimulusは控えめなフレームワークで、非SPAのウェブサイト制作（コーポレートサイト、キャンペーンサイト等）において非常に強力なツールだと思います。jQueryをメインに使っている制作者や、オブジェクト指向的にコードを書こうとしているけどいまいちコレといった腹落ちができていない人には、特におすすめできるものです。
とても個人的な話ですが、ここ最近で自分自身のプライバシー意識の高まりを感じて、ブラウザの設定を見直す機会がありました。見直したのはCookieの設定で、許可したドメインにしかCookieを記憶しないようにしました。設定変更によるある程度の不便は覚悟していました。とはいえ、ま〜せいぜい、初回アクセスの時のモーダルが何度も出るようになるとか、ログインできなくなるとか、そのくらいかなと思っていました。
しかし実際は、悪い意味で期待を裏切られることになりました。
Cookieが無効なだけで、“全く”動かなくなってしまうウェブサイトやウェブアプリが、本当にたくさんあることに気づいたのです。
全く動かなくなってしまう原因は単純（後述）だったのですが、ちょっとした対処で簡単に直せることなのに、サイト全体が一切使い物にならなくなってて、もったいない！！ と思いました。
問題です。とあるアニメーションデータの各フレームを静止画として書き出した200枚前後のPNGファイルがあったとします。この連番の静止画を秒間30コマでアニメーションさせてください。さあ、どうしますか？
この問題にたいして、自作の画像生成ツールを作って解決したというお話です。
ブラウザデフォルトの select 要素は、いろいろな事情で JavaScript でゼロから実装しないといけない場合はあるにせよ、特に理由がなければそのまま使うことが望ましい。独自に実装したものはどうしても、デフォルトのものよりユーザビリティーやアクセシビリティーの面で劣ってしまう。
とはいえそのまんま使うとデザインにそぐわない場面は少なくないし、デザイナーがゆるさんという場合だってある。見た目を変更しなきゃいけない時はよくある。
UA が提供する見た目があまりにもデザインとマッチしなければ select の見た目を CSS を使って調整することになる。このやり方は最近では一般的になってきていて、Google などでも使われている（路線検索時）など。やり方をググればブログなどがいくつか引っかかる程度にはメジャーだ。が、これらは全部、幅を固定しなければいけないという制約がある。
そういうわけで、幅を可変にしつつ、select の見た目を独自にデザインする方法を探った。
成果物はこちら。