WEB開発を行なう上で、
できるだけソースコードの量を減らすような工夫をすると、
よりパフォーマンスの高いワンランク上のサイトに仕上げることができます。
ここでは、jQueryソースコードをできるだけシンプルにするための工夫について紹介していきます。
目次
jQueryをシンプルにするメリット
サイトの表示速度が向上する
サイトを表示する際には、
ページを構成する各種プログラムを一気に読み込むというアクションが発生します。
プログラムが長いと、読み込みに時間がかかり、
それに比例する形でサイト全体の表示速度が落ちてしまいます。
逆に、jQueryプログラムをコンパクトにすることができれば、
読み込み時間を短縮し、サイトの表示速度を向上させることができます。
実行速度が早くなる
プログラムは上から順番に読まれていきます。
そのため、長いプログラムになってくると、
上の方のプログラムの実行は速く、下の方のプログラムが実行されるまでには若干の遅延が発生してきます。
jQueryプログラムを短くすることで、プログラムの記述場所に関係なく高速な実行速度を実現することができます。
メンテナンス性に優れている
通常、jQueryプログラムが無駄に長い原因は、IDやクラス名を個別で指定したアクション記述を行なっているためです。
そのため、例えば「class1」「class2」のjQueryプログラム記述がある場合、新たに「class3」のアクションをを追加する際には、HTMLだけではなくjQueryプログラムに対しても追記が必要になってきます。
これをシンプルで汎用性がある記述にすることで、
新たに「class3」を追加する際にはHTML側の追記だけで良くなるというメリットがあります。
jQueryをシンプルにする考え方
先にも述べたように、
無駄にjQueryプログラムが長くなる原因はIDやクラス名を個別で指定したアクション記述を行なっているためです。
そうではなく、より汎用性が高い記述方法を取ることで、
プログラムを大幅にカットすることができます。
詳しい内容はサンプルを見た方がわかりやすいので、
以下のサンプルで見ていきましょう。
jQueryをシンプルにするサンプル
元のプログラム
トグルを使ったプログラムのサンプルを見ていきましょう。
以下のサンプルでは質問数は３つですが、ソースコードの量にするとこれだけの長さになります。
また、質問数がさらに増えれば増えるほど、ソースコードは長くなり、質問を追加するたびにjQueryの追記が必要になります。
HTML
jQuery
シンプルなjQueryで表現する方法
上のプログラムを汎用性がある記述にすると、以下のような形になります。
この形で記述した場合、
質問数が今後いくつ増えてもjQueryプログラムは変更せずに済むため、
質問数が増えれば増えるほど、カスタマイズ前のサンプルとのソースコードとの「長さ」「読み込み」「実行速度の速さ」「メンテナンス性の良さ」の違いが顕著になります。
内容としては、ID名の付け方を工夫したことにより、jQueryでトグルアクションが起きた際にトグルボタンのID名を使って他の要素へもアクセスできるようにしています。
HTML
jQuery
