簡単コピペ！読込むJavaScriptをスマホとPCで変える方法

PCとスマホでJavaScriptの動作を変えたいことってありませんか？

例えばアコーディオンメニューはスマホ表示の時だけにしたいとか、サイズや動作条件をPCとスマホで変えたい時などにとても便利な機能です。

CSSでは簡単に切り替えられるのに、JavaScriptだと急にハードルが上がってしまう印象がありますよね。

ここではコピペするだけで、簡単にJavaScriptの読み込みコードを切り替えられる方法をご紹介します。

JavaScriptを読み込む準備

まずはJavaScriptを読み込む準備をします。

既に読み込みは問題なくできているという方は、飛ばして次へ進んでください。

JavaScriptは外部ファイルから読み込む方法と、HTMLの中に記述する方法があります。

ここでは外部ファイルから読み込む方法をご紹介します。

<!-- jquery CDN 読み込み -->
<script
  src="https://code.jquery.com/jquery-3.6.1.min.js"
  integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
  crossorigin="anonymous"
></script>
<!-- 自作JavaScript 読み込み -->
<script src="./js/script.js"></script>

このコードをJavaScriptを読み込みたいページの</body>のすぐ上に記述します。

自作のJavaScriptファイルはあなたが読み込みたいJavaScriptのファイルを指定してください。

今回の場合はjsフォルダの中にある、script.jsを読み込んでいます。

JavaScriptに切り替え用のコードを書く

CSSと同じ様にJavaScriptのコードの切り替えも、JavaScriptのファイルの中に書いていきます。

今回はscript.jsファイルを読み込んでいますので、その中に分岐用のコードを記述します。

if (window.matchMedia("(max-width: 350px)").matches) {
  // スマホ処理
}
else {
  // PC処理
}

こんな感じになります。

if直下にはスマホ表示の時に動かしたいJavaScriptのコードを記述し、else直下にPC処理のコードを書いていきます。

お気づきの方もいるかと思いますが、ifの条件に画面サイズが0pxから350pxになるまでは・・・という意味のmax-widthが設定されています。

これはCSSでも使う表現ですね。

min-widthで設定すると、動作が逆になります。

切り替わらない時の注意点

コーディング中はChromeなどを使って、ソースコードを開いて作業することがありますよね。

特にスマホ表示とPC表示の確認をする時なんかは特に。

この時、CSSは画面サイズを切り替えるだけで、読み込まれるコードが変わってくれるのですが、JavaScriptはリロードをかけないと切り替わってくれません。

なので、今回の方法で画面サイズを切り替えて、上手くJavaScriptが切り替わらない時は画面サイズごとでリロードをかけて確認するようにしましょう。

応用編

応用編というと大げさですが、ちょっとした小技をご紹介します。

先程のコードでPCとスマホで読み込むコードが切り替えられるようになったと思いますが、そもそも切り替えるのではなく、スマホの時だけ読み込むとか、PCの時だけ読み込むという設定も簡単にできます。

その方法とは、ifの部分だけを使って、else以下を使用しないという方法です。

PCの時だけ読み込む方法

PCの時だけ読み込むには、下記のように記述します。

if (window.matchMedia("(min-width: 350px)").matches) {
  // PC処理
}

elseの部分は削除しても機能するのがポイントです。

また、先程と違うのは画面サイズの指定をmin-widthとしているところです。

これは画面が小さくなって行って、「350pxより小さくなるまでは」という意味です。

画面サイズが大きいうちはここのコードを読んでねという指示なので、PC表示用の設定として使用します。

スマホの時だけ読み込む方法

スマホのときだけ読み込むには、max-widthを使ってifだけ記述すればOKです。

こんな感じ。

if (window.matchMedia("(max-width: 350px)").matches) {
  // スマホ処理
}

画面サイズが0pxから350pxを超えるまではこのコードを読んでね、という意味なのでスマホなど小さな画面用として使用されます。

350pxという数値はクライアントの要望やトレンドに合わせて変えて使ってください。

まとめ

なんかとんでもなく凶暴なコードが襲いかかって来るんじゃないかって、当時の私は思っていましたが、あっけなくて拍子抜けしたのを覚えています。

いろんなサイトからコピペで持ってきたコードも、どこからどこまでが１つの機能になっているかを把握して、今回のコードと上手く組み合わせて使ってみましょう。

そうすることで、クライアントの満足度向上やよりユーザーライクなWEBサイトが実現します。

もっと上達したい、独学に限界を感じた時はオンラインスクールもおすすめですよ。

　

最小限の投資で、自己実現に快速で近づきます。