こんにちは！

今回は先日Webを作成していた時に陥った落とし穴に関してここに残したいと思います。普段私はjQueryを主に用いてWebサイトの動きの部分を実装していたのですが、先日、画面幅によってPC版とモバイル版の画面デザインを変更するときにうまくいかなくなってしまいました。

現象

ロードとリサイズの時に画面を対応させたいと思い、下記のようなコードを書いて実際に動きを確認してみました。

main.js

$(function(){
    $(window).on('load resize', function(){
    // 処理を記載
    }
});

ここで処理を記憶のところに画面幅の変化でPC版とモバイル版が変化する処理を書きます。すると、画面幅を縮小してモバイル版に変更した後にリロードすると、PC版で表示されてしまいます。

原因と対処法

はっきりとした原因はわかっていませんが、おそらく、loadの処理がfunctionの処理よりも先に起きてしまったことでloadが機能していないのではないかと思います！

主な対処法は2点あるかと思います。

1点目は$(window)~の塊ごとfunctionの前に出すという方法です。

コードで書くとこんな感じ

main.js

$(window).on('load resize', function(){
    // 処理を記載
});

$(function(){
    // 処理を記載
});

ちなみに私はこちらの方法で対応しました。

もう一つの対処法としてはresizeの動きは正常に行われていたので、loadの動きに問題があるだろうと考えてloadだけ外に出すように考えます！

main.js

$(window).on('load', function(){
    // 処理を記載
});

$(function(){
    $(window).on('resize', function(){
        // 処理を記載
    }
    // 処理を記載
});

おそらくこちらの方法でも対応することができると思います！

今回はこの対処法で解決できてなんとか助かりました、、、。

そろそろReactをガンガン使った業務ができるようにちゃんと勉強したいな～と思いつつ、、、、なかなか勉強が進んでないですねー