Webデザインにおいて、レスポンシブ対応は主にCSSで行うのが基本です。しかし、「画面サイズに応じて要素の配置を大きく入れ替えたい」「スマホの時だけ特定のプラグインを動かしたい」といった、CSSだけでは実装できない挙動が必要になる場面があります。
今回は、jQueryを使ってデバイスサイズごとに処理を切り替える具体的な方法と、パフォーマンスを落とさないためのコツを解説します。
ウィンドウ幅の取得
jQueryでレスポンシブ処理を行う際、最もよく使われるのが $(window).width() です。
$(function() {
// 画面サイズ判定用の関数
function checkWindowSize() {
let windowWidth = $(window).width();
// ブレイクポイント（例：768px）
let bp = 768;
if (windowWidth <= bp) {
// スマホ・タブレット用処理
console.log('スマホ表示です');
} else {
// PC用処理
console.log('PC表示です');
}
}
// 初回読み込み時に実行
checkWindowSize();
// リサイズされるたびに実行
$(window).on('resize', function() {
checkWindowSize();
});
});初回読み込み時だけでなく、リサイズ時にも関数が走るように設定しています。
クラスの付け替えを制御
「スマホの時だけハンバーガーメニューを有効にする」といった場合は、jQueryで特定のクラスを付与・削除するのが効率的です。
let windowWidth = $(window).width();
let $header = $("header");
// 768px 以下の時に'is-mobile'のクラス名を付与
if (windowWidth <= 768) {
$header.addClass('is-mobile');
} else {
$header.removeClass('is-mobile');
}⚠️リサイズイベントは負荷が大きい
$(window).on('resize', ...) は、ブラウザの横幅が変化するたびに数十回実行されます。そのまま複雑な処理を書くと、動作が重くなる原因になります。
対策：タイマーを使って実行回数を抑える
リサイズが終わった瞬間にだけ処理を実行させる手法を推奨しています。
let timer = false;
$(window).resize(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
// ここにリサイズ完了後に実行したい処理を書く
console.log('リサイズが止まりました');
}, 200);
});まとめ
これらを意識するだけで、スムーズでメンテナンス性の高いレスポンシブサイトが作れるようになります。ぜひ試してみてください！
