開発と運用のパフォーマンスを向上させるための「JSは最低限」ルール

酒井 琢郎のプロフィール画像
エンジニア 酒井 琢郎

439 view

私はwebサイトをコーディングする上で「JSは最低限」という自分ルールを作って、守るようにしている。

「JSは最低限」とは?

例えば、「フェードイン」で要素を表示するとき、実装方法として以下の手段が考えられる。

  1. .visibleというクラスをJSで付与することでopacity: 1に切り替えて表示する。アニメーションはtransitionで設定する。
  2. 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サイトまでだろう。常にこの方法を採っていれば絶対に上手くいく、というものはない。状況に応じてどんなアプローチを採るのか柔軟に選択するべきである。重要なのは物事を考えるときに方針を決定する「芯」を持っておくことだ。

関連する日報

    フリー素材のアイコン・イラストを流用する時のコツ

    2,486 view

    岡本 早樹のプロフィール画像
    岡本 早樹 デザイナー
    経験やスキルがなくても、デザインのフィードバックはできる

    2,159 view

    原浦 智佳のプロフィール画像
    原浦 智佳 デザイナー
    「壁打ち相談」をうまく使って、情報設計を効率よく進めよう!

    1,491 view

    高島 藍子のプロフィール画像
    高島 藍子 デザイナー
    ベイジディレクターのリアル

    2,541 view

    本山 太志のプロフィール画像
    本山 太志 コンサルタント
    BtoBサイトにおける「ファーストビュー攻略法」

    2,869 view

    池田 彩華のプロフィール画像
    池田 彩華 デザイナー
上に戻る