朝、目が覚めた時に「雪のにおいがするなぁ。」と感じながらすくっと起き上がった。
珈琲を淹れて、早速、完成間近のウェブサイト案件の微調整を仕上げて、まだデザイン段階案件のデザイン修正を上げて、ちょっと買い物に外に出ると、雪が羽虫のようにふわりふわりと静かに舞っている。なるほど、雪のにおいもするはずだ。

買ってきた苺クッキーを囓りながら、ちょっと気になっている問題に着手した。

スマホ用のコーディングで単位《vw》を使って久しいのだが、今まではpx値をvw値に計算した数値を直接記述していたのだが、結果として、どうしても直感的に分かりづらい見た目になってしまう。

例えば、viewportが375px想定であれば、50pxは13.333vwになる訳だが、一度この記述に置き換えてしまうと、元が何pxだったのかは逆算しなければ分からなくなる。pxをvwに変換する、またはその逆の変換を行うツールはJavascriptで作ってローカルで使ってはいるのだが、もっとコード自体の見た目が直感的で分かりやすい方法を模索することにした。

そうした時に便利なのが、Sassの関数機能である。

@functionで繰り返し使える関数を構築し、@returnで処理結果を返してscssに反映させることができるので、うまく使えば実に有用な機能である。この機能を活用して、上記のpx→vw問題を解決することにした。

px値を引数として渡して、vw値に変換して単位付きで返す簡単な関数である。

左が、px値をvw値に変換して直接記述した場合。
右が、@functionを利用して記述した場合である。

どちらも、ブラウザでの表示は同じようになるが、コードの見た目や編集し易さは明らかに右の方がpxベースで直感的である。結果的にはvw指定でありながらも、元のpx値も確認できるため、特に他要素との比較や後の編集の可能性を考えた時、この分かり易さはとても有用である。

ただし、上記のpx_vw()関数でコンパイルされたcssを見るとひとつ問題があることに気付く。

それは、小数点以下の桁数がとても多いことである。特に割り切れない数値である場合には、13.3333333333vwというような無駄な出力になってしまう。それを回避する対処を施した関数が以下である。算出したvw値に一旦、1000を掛けて四捨五入することで不要な末尾を整理してから、1000で割って戻すことで小数点以下を3桁に制御している。無論、2桁にしたければ100を使えば良いし、4桁にしたければ10000を使えば良い。

また、@functionの関数は引数部分での簡単な演算も可能なので、px_vw(75 – 25) という記述も問題なく機能するが、calc() を併用する場合には注意が必要となる。

上の例で分かるように、calc() に直接関数を入れてしまうと、関数の計算が行われず、関数名のままcssにコンパイルされてしまう。それを防ぐためには、calc() 内の関数はインターポレーションする必要がある。

これから当面は、この方式でコーディングを行っていこうと考えている。コーディングはともすれば煩雑になりがちであるがゆえ、直感的で効率的な記述方法を模索したいものである。

────

今年の確定申告は、初めてe-Taxを使ってみた。というより「使わないと控除額を減らすぜ」というイヤがらせを受けて仕方なく使わざるを得なかった訳だが、思いのほかサクッと終わってしまった。マイナンバーカードを取得していないので、ID・パスワード方式で行なったため、ネットで様々に云われている “マイナンバーカード絡みのエラーや不具合” とは無縁だったのが幸いしたようである。

省庁が作っているWeb申請システムとしてはまぁ良く出来ている方ではないかと思われる。以前は随分と酷かったらしいが、今年のレベルなら悪くない。もっとも、省庁の作るものに対する期待値が元々極端に低いがゆえの評価ではあるのだが、紙に印刷して、台紙に書類を貼り付けて、封筒に入れて郵便局から発送という今までやっていたことに比べればとても効率的に申告を終えることができた。提出からたった15日で、早々に還付金が入るというスピード感も良い。

無駄な事は可能なら排除して、効率的に処理できるならそれはとても善きことである。
脳さんにはそういうことのために働いてもらいたい。