2021/9/7

【jQuery】レスポンシブにコードを切り替える方法！注意点とコツも合わせて解説！

この記事からわかること

jQuery(javascript)のレスポンシブ対応
PC↔︎スマホで表示や動かすコードを変更方法
すぐに使えるコードを解説
私がハマった注意点

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

レスポンシブなjQueryのコード

jQueryでレスポンシブにコードを切り替えたいときは以下のコードで切り替えることができます。

responsive.js
if (window.matchMedia("(max-width: 768px)").matches) {
// windowのサイズが768px以下
}else{
// windowのサイズが768px以上
}

「window.matchMedia("(max-width: 768px)").matches」の意味

現在のメディアの状態.("判別したいメディアの状態※").真偽どっち？
windowオブジェクト.メソッド("条件").プロパティ
window.matchMediaメソッド→MediaQueryListを生成(現在のメディアの状況情報が集約)
("(max-width: 768px)")→条件を記入
window.matchMedia.matchesプロパティ→Boolean型の結果を返す

※他にもある条件式

orientation: landscape→縦長の画面(横幅が縦幅より小さい)の時true
orientation: portrait→横長の画面(横幅が縦幅より大きい)の時true
max-width: 768px→画面の横幅が最大値768pxより下ならtrue、上ならfalse
min-width: 768px→画面の横幅が最小値768pxより上ならtrue, 下ならfalse
条件式A and 条件式B→条件式Aかつ条件式B

条件式はいろいろあるのでさまざまな条件分岐が可能ですね！と言ってもよっぽどPC↔︎スマホの切り替えくらいしかしないかもですが。

複数条件での分岐コード

上でも軽く紹介しましたが複数の条件によって分岐したい時はこのようなコードになります。

responsive.js
if (window.matchMedia( "(max-width: 900px) and (min-width: 768px)" ).matches) {
// windowのサイズが900px以下768px以上
}else{
// windowのサイズが900px以上768px以下
}

andを使うことで条件を増やすことができます。

CSSのメディア分岐と同じ

レスポンシブ対応といえばcssの「@media」のコードですよね！一緒に復習しておきましょう。

こう見るとコードの本質は似ていますね。

responsive.css
@media  screen and  (max-width:768px) {
  body{
    background-color:#e7e7e7;
  }
}

CSSもandを使って条件式を複数用意することが可能です。

screenの部分にはメディアのタイプを指定できます。screen（一般的ディスプレイ）、projection(プロジェクター)、print(プリンタ)、tv(テレビ)、all(すべて)など...

私がハマったjQueryレスポンシブの注意点

私がやろうとしたことはwindowの大きさによってナビゲーションのアイテムにクラス名を付与しようとしました。

スマホサイズの時はアイテムにクラス「phone」を付与しcssで表示を制御しようとしています。

つまりスマホ時には表示をOffにPC時は表示をOnに、「display:none;」を使っていないのは表示、非表示のタイミングでアニメーションをさせたかったからです。

cssで全部やれよと聞こえてきそうですが、色々な兼ね合いでjQueryで実現したかったのです。

original.js
let $nav = $('#nav'),
    $navItem = $nav.find('.nav-item');

    if (window.matchMedia("(max-width: 768px)").matches) {
          $navItem.addClass("phone");
      } else {
          $navItem.removeClass("phone");
    }

style.css
.nav-item.phone {
        opacity: 0;
        transition: all 0.3s;
        height: 0;
}

しかしこのコードを記述しても最初からPCで開いた時や最初からスマホで開いた時は予想通りに動きましたが、PCでwindowのサイズを変えたりデベロッパーツール(F12)で動かしながら確認した時はうまく作動しませんでした。

しかし原因はこの記事を作成途中に気づくことができました笑

jsが動くのは基本HTML読取時のみ？

今思うと当たり前なのですがjsは自分で作動タイミングを指定できます。これが盲点でした。

jQueryでレスポンシブにコードを切り替えるコードを自動でサイズに応じて対応してくれると勘違いしてしまっていたのです。

◆jQuery(javascript)の実行タイミングを制御するコード

road.js
// HTML読込後に実行(jQuery)
$(function() {//処理})
// HTML読込後に実行(javascript)
document.addEventListener('DOMContentLoaded', function() {//処理})
// スクロールが発生するたびに実行(jQuery)
$(window).on('scroll ', function() {//処理})
// ⇨ windowのサイズが変わるたびに実行(jQuery)
$(window).resize(function() {//処理})

これはcssのレスポンシブ対応コードに慣れすぎてしまっていたために勘違いしてしまったことです。

無事解決

画面がリサイズするたびにこのコードを実行することで動的な変化にも対応できるようになりました！

しかし画面リサイズのたびにコードを実行するのもパフォーマンスが落ちそうだなと思い、結局cssで賄うことになりました。

original.js
$(window).resize(function() {
  let $nav = $('#nav'),
      $navItem = $nav.find('.nav-item');

    if (window.matchMedia("(max-width: 768px)").matches) {
          $navItem.addClass("phone");
      } else {
          $navItem.removeClass("phone");
    }
})