私はwebサイトをコーディングする上で「JSは最低限」という自分ルールを作って、守るようにしている。
「JSは最低限」とは？
例えば、「フェードイン」で要素を表示するとき、実装方法として以下の手段が考えられる。
.visibleというクラスをJSで付与することでopacity: 1に切り替えて表示する。アニメーションはtransitionで設定する。- jQueryの
fadeIn()関数を使用して1.と同じアニメーションをJSで実装する。
この場合では言うまでもなく、1.が「JSは最低限」ルールに沿った実装方法と言える。つまり、肝となるアニメーション部分はCSSで実装し、アニメーションを発火させるトリガーとなるクラス付与だけをJSで行うということだ。このように実装するのには以下の理由からだ。
JS実装が苦手でなるべくCSSで完結させようとしていた
私はベイジ入社前は本当にJSを書くのが苦手で、まさにHTMLとCSSだけをコーディングするコーダー状態だった。そこで培われたのが、いかにJS実装を回避してCSSのみで「あたかもJSを使っているかのような動き」を再現するスキルだ。入社後は様々な実装を経験し、今となってはJSに苦手意識はないが、ここで培われた経験が「JSは最低限」ルールの基礎となっている。
運用を考慮すると、CSSだけで完結した方が容易
例えば上記2.のようにJSのfadeIn()関数を使用して実装した場合、アニメーションの秒数を変更するときにJSを改修しなければならない。JSを改修するよりはCSSを改修する方が簡単で、誰でも手を加えることができるはずだ。社内で完結する場合はそこまで問題にはならないが、納品後にクライアント側での修正などを考慮する場合は間違いなくCSSで完結させる方がよいだろう。
CSSで動かした方がパフォーマンスがよい
言うまでもなく、JSでアニメーションを動かすよりはCSSで動かした方が圧倒的に動作が軽い。ここでいうパフォーマンスとは「動作の軽さ」に限らず、「開発のパフォーマンス」のことも指す。たいてい同じページ内に似たアニメーションをする要素は複数ある。私の場合、特定のクラス名を付与すると同じアニメーションを実装できる構造を用意して、後はクラスを振るだけ、というようにしているのでJSを毎度チェックする必要もなく、コーディングも楽になっている。
まとめ
その場しのぎの対応でよいのなら、JSで実装する方が早く対応できる場合もあるため、絶対に「JSは最低限」ルールを守らなければいけないという訳ではない。また、大規模なwebサイトで様々な箇所に同じCSSをあてて実装した場合、影響範囲が広くなってしまって手を付けられない状況にもなり得る。現状、この手法が有効なのは中規模程度のwebサイトまでだろう。常にこの方法を採っていれば絶対に上手くいく、というものはない。状況に応じてどんなアプローチを採るのか柔軟に選択するべきである。重要なのは物事を考えるときに方針を決定する「芯」を持っておくことだ。
