Tips

【2023年版】JavaScriptでレスポンシブ対応させる方法

  • このエントリーをはてなブックマークに追加

JavaScriptでもレスポンシブ対応させることができるのをご存知でしょうか?

具体的な使い道としてはアニメーションのレスポンシブ対応で、「スマホのみで実行したいイベント」などがあります。

スタイルについてはCSSでレスポンシブ対応させるのですが、アニメーションなどはJavaScriptで簡単にレスポンシブ対応させることができるので覚えておきましょう。

また動画もあるので必要に応じて使ってください。

JavaScirptでレスポンシブ対応させる方法

まずレスポンシブ対応させるにはブレークポイントを設定する必要があります。

JavaScriptではブレークポイントの設定を以下のように書くことができます。

const media = matchMedia("(min-width: 429px)");
console.log(media);

コンソールに何だかよく分からないものが出力されましたね。

こちらMediaQueryListというオブジェクトになっていて、簡単にいうとレスポンシブ対応に必要な情報が格納されています。

JavaScriptではmatchMediaというメソッドが用意されていて、引数にブレークポイントを指定するとMediaQueryListオブジェクトを返してくれます。

コンソールの出力されたものに「media」というプロパティがありますが、こちらがJavaScriptで実行した際にmatchMediaというメソッドの引数に指定した値になっています。

さらに「matches」というプロパティがありますが、こちらが真偽値で「mediaの値(ブレークポイント)に合っているか?」を判定しています。

先ほどのコードを少し修正してみます。

// こちらを修正
const media = matchMedia("(min-width: 429px)").matches;
console.log(media);

コンソールにtrueもしくはfalseと出力されましたね。

trueになるかfalseになるかは画面サイズによって結果が変わるので、ブラウザの検証ツールで画面の幅を変更して結果を確認してみましょう。

ちなみに画面の幅を変更した際にはリロードが必要なので注意しましょう。

matchMediaを使うことで指定したブレークポイントに合っているかをtrue、falseで検証することができるんですね。

こちらを使用して条件分岐を書くことで、「特定のデバイスのみでアニメーションを実行する」みたいなことが実現できます。

簡単な実例を作ってみます。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
<script src="./script.js" defer></script>
</head>
<body>
  <p class="results"></p>
</body>
</html>
const results = document.querySelector(".results");
const media = matchMedia("(min-width: 429px)");
media.addListener(mediaChange);

function mediaChange(media){
  if(media.matches === false){
    results.innerHTML = "スマホです";
  }else{
    results.innerHTML = "パソコンです";
  }
};
mediaChange(media);

ブレークポイントを429pxにして、画面の幅に応じてpタグのテキストを変更させることを想定しています。

またaddListenerを使うことでブラウザのリロードなしでmatchMediaの検証を実行しています。

ちなみにタブレットのような「〇〇px以上△△px以下」のようなブレークポイントは以下のように指定できます。

// 429px以上、1025以下のデバイスか検証
const media = matchMedia("(min-width: 429px) and (max-width: 1025px)").matches;

またスマホ、タブレットで起きる「画面の傾き」にも対応できます。

// 縦向きか検証
const media = matchMedia("(orientation: portrait)").matches;

// 横向きか検証
const media = matchMedia("(orientation: landscape)").matches;

色んなブレークポイントを指定できて便利ですね。

過去の記事で「innerWidth」を使ったレスポンシブ対応も紹介しました。

こちらも同じような用途で使うのですが、個人的にはmatchMediaの方がトレンドのように感じています。

というのも少し前までmatchMediaがIEに対応しておらず、innerWidthを使わざるを得ないという感じだったんですね。

事実上のIE廃止になった今ではmatchMediaの方が指定できる選択肢が多いので、これから作成するものはmatchMediaで良いと考えます。

  • このエントリーをはてなブックマークに追加

コメントを残す

*