#11 CSSのテクニックを使えばJavascriptなしで実現できて速度もUP
今回はCSSの話をしたいと思います。
普段はあまり重要でないと思われているcssですが、
ベストプラクティスを知らないとネットワークリソースを浪費
したり、無駄なコーディングをすることにつながるのでとても重要です。
1.javascriptよりcss
2.CSSスプライト
3.scssは不要
例えばバリデーションのCSSの擬似クラスを
使用すればjavascriptでわざわざコーディングしなくてもいい事はあります。
まずはじめはcssで数値のみ且つ1文字以上５文字未満という
バリデーションを作成します。
次にvuejsでバリデーションを作成します。
computedもしくはwatchを使えばリアルタイムでバリデーションできると
思いますが、さらに時間がかかるためチェックボタンを用意して
methodsを使うことにしました。
ソースコードを見ても分かる通りjavascriptでバリデーションすると
CSSに比べると複雑になっている事がわかります。
なのでJavascriptよりCSSの方が簡単に時間をかけずに作成することができます。
これらの理由で本来はJavascriptよりもCSSを使うべきなのですが、多くの
エンジニアが故意にJavascriptを使いたがります。
その理由は先程も述べたようにJavasciptは応用が効いてより柔軟に
作成できるので確実に作りたい機能を作成できます。
そのためCSSで実現できるかどうかを確認する前に
Javascriptで作成してしまう理由があります。
それ以外にはJavascriptの方がCSSよりもはるかに需要が多いので
経歴書に「CSSでバリデーションを実現」と記載するより、
「Vuejsでバリデーションを実現」と記載したほうが経歴書の見栄えがよくなって
しまいます。
そうなると、できる限り多くJavascriptで書きたくなってしまうエンジニアが
多くなってしまいます、しかし、本質的にはCSSで実現出来たほうがいいので、
CSSでできる限り使用することをおすすめします。
2.アイコンはCSSスプライトを使うとネットワークの通信のやり取りを10数回から
1回にできるのでネットワークリソースの節約ができ、スピードも早くなります。
CSSスプライトとは使用する複数のアイコンを一つの画像に合成して、その画像を
CSSでバックグランドイメージと扱う事です。
画像を合成しないといけない事と
position,画像の幅、高さを調整しないといけないため、時間がかかりますが、
WEBのユーザー体験の観点からミリセカンドでも早くしたほうがいいので、
このCSSスプライトを多用してスピードアップを向上させたほうがいいかと思います。
この動画では元々アイコンが３つそれぞれ違うアイコンとして画像取得していた所を
CSSスプライトを利用して、１つの画像として取得してネットワークのやりとりを
３回から１回に減らしています。
本番のページではもっとより多くのアイコンを利用されると思いますので
このネットワークの減らせる量も増えるかと思います。
3.最後にscss,sassについてですが、コンパイルが必要で元々
CSSは簡単に書けて書いてすぐに確認、リリースできるのがいい点なのですが、
そんな所をコード量を少なくするためにあえて
環境を用意して、別ファイルにするのは面倒です。
さらにコンパイルしないといけないのでページ確認のために
毎回コンパイルしないといけないのは時間がかかるのと本番と開発のCSSコードが
違ってきて本番のデバッグを難しくさせるので「コード量を少なくする」に対しての
デメリットの方が大きく上回っているのでおすすめはしません。
javascriptの最適化の動画でも実証しましたが、google のページインサイトでは
キャッシュを考慮しないためインラインの方が速いと証明しています。
SEOもキャッシュを考慮しないのでSEOが必要なページは
インラインを多用したほうがいいのですが、
SCSSではそもそもインラインでコーディングすることはできません。
マイページなどSEOとは関係ないページではキャッシュの効果が大きいですが、
CSSを一つのファイルにしてキャッシュさせたとしても
訪れることのないページのCSSまでキャッシュさせることはその分パフォーマンス
が下がってしまいます。なので、全てブラウザキャッシュありきというわけではなく
ユーザーのアクセス回遊具合によって決める事がいいのではと思います。
