月刊JAVASCRIPT – コーダーは「JS」がやめられない！ Vol.4 –

はたらく仲間たち

2022.04.06

＼ついに最終回／

どうも、大好きなソーシャルゲーム「ブルーアーカイブ」がついに1周年となったDJよろずやです。
先日初めてソシャゲに課金しました。メルカリの売上金なので痛くも痒くもありません✌

ストーリーもBGMも最強＆最 THE 高なのでぜひ皆さんもプレイしましょうね。

ブルーアーカイブ

Yostarが新たに贈る、スマートフォン向けアプリゲーム学園×青春×物語RPG『ブルーアーカイブ -Blue Archive-』の公式サイトです。

閑話休題

ついに最終回！ Javascript(jQuery)シリーズ です。
今までの記事はこちらから。

それじゃあ行ってみましょう。拍手👏。

月刊JAVASCRIPT Vol.4
1. 画像切り替え
おわりに

月刊JAVASCRIPT Vol.4

最終回では、
画面幅に応じて画像のPC/SP切り替え
について説明していきます。

動きはこう。

画像切り替え

$(function () {
  //変数spに文字列[150x150.]を代入
  var sp = '150x150.';
  //変数pcに文字列[600x300.]を代入
  var pc = '600x300.';
  //変数replaceWidthに[768]を代入
  var replaceWidth = 768;
  //関数[imageSwitch]を定義
  function imageSwitch() {
    //変数windowWidthにウィンドウの内側の幅を数値型の整数で代入
    var windowWidth = parseInt(window.innerWidth);
    //class[js-image-switch]に対して繰り返し処理を行う
    $('.js-image-switch').each(function() {
      //変数thisにclass[js-image-switch]を代入
      var $this = $(this);
      //もし、ウィンドウの大きさが768px以上なら
      if (windowWidth >= replaceWidth) {
        //画像のファイル名の「150x150.」を「600x300.」に置換する
        $this.attr('src', $this.attr('src').replace(sp, pc));
      //それ以外なら(ウィンドウの横幅が767px以内なら)
      } else {
        //画像のファイル名の「600x300.」を「150x150.」に置換する
        $this.attr('src', $this.attr('src').replace(pc, sp));
      }
    });
  }
  imageSwitch();

  var resizeTimer;
  //ウィンドウをリサイズしたら
  $(window).on('resize', function() {
    //resizeTimerのタイムアウトを解除
    clearTimeout(resizeTimer);
    //imageSwitchは200ミリ秒で起動する
    resizeTimer = setTimeout(function() {
      imageSwitch();
    }, 200);
  });
});

今回はダミー画像を使用しているため、画像名に画像サイズを入れているから、それを置換しています。
本来コーディングする際には[-sp][-pc]のような名前を付けて置き、それを画面幅に応じて置換させてあげると良いです。

200ミリ秒をセットしてるのは、リサイズ中に何回も置換するのを防ぐために書いています。

おわりに

今回で本シリーズは最終回となるので、新しいネタ探しをしようかと思っています。

書く頻度が落ちてきてるので、次回は長文記事を予定しているのでこうご期待～✋