毎回書く必要のあるCSSをJSで自動適用してくれるライブラリ
Share
Web開発の中には、実質的にほぼ毎回書く必要がある手間のかかるデザインパーツがたくさん存在します。
代表的なものはラジオボタンやセレクトボックスなどのフォームパーツです。
デザイナーさんのデザインがHTMLそのままということはまずありえません。そのためエンジニアさんは毎回
- パーツを適切に囲むような別のタグをいくつも作り
- それぞれに適切にクラスを設定し
- 元あったパーツは一部非表示に
- 新しくCSS上でパーツを描きあげ
- 表示されたままのパーツは位置関係が壊れないように動かし
- マウスオーバーやタッチ動作などの時には見た目を変え
- 選択肢を変更したときはモーションをいれ
- できるだけ多くの機種やブラウザーで正しく動くようにし
- 以上を手作業で微調整していく
といった作業を繰り返すことになります。
Tailwind CSSなどのCSSライブラリーであればいい感じにしてくれるんじゃないの?て思いますよね?
確かにそういうものもあるんですが、実際にはCSSプラットフォームのほとんどはHTMLそのままよりもさらにシンプルなデザインにしてあることの方が多いのです。各社さんが自社で作り込むことを想定しているからです。
しかし思ったより実装に苦労して人件費が結構かかるという場面も少なくないため「まずはこれを適用しておいて後で差し替えよう」などの選択肢が欲しいところです。
そこで、CDNでJavaScriptを読み込むとフォームパーツをいい感じにデザインしてくれるJSライブラリーはいかがでしょうか?
実装イメージ
- 作るものを決める
- 基本のデザインを決める
- CSSで基本のデザインを実装する
- 一通りの環境で問題なく動く状態までデバッグする
- CSSを適用するJavaScriptを書く(Vanilla用、jQuery用、React用、Vue用など)
- 再度、一通りの環境で問題なく動く状態までデバッグする
- クエリに入れるなどによって呼び出し時に渡せるパラメーターを作り込む(色、大きさ、形などを切り替えられるなど
- CDNに配置(プラットフォームにアップロード、クラウドフレアなどで自前分散配置するなど)