Note

window.matchMedia

JavaScriptで ブラウザの幅に応じで処理を分けたいときがよくあります。

今までは次のコードのように、loadとresizeのたびにブラウザの幅を取得するやり方でした。
本来ブレイクポイントが切り替わるタイミングで発動して欲しいのに、リサイズ時 常に処理が実行されるため、ベストなやり方ではありません。

const setVideoFile = function(){
	const video = document.querySelector('.js-video');
	let file;

	const onResize = function(){
		if( window.innerWidth < 1024 ){
			file = './assets/video/hoge-sp.mp4';
		} else{
			file = './assets/video/hoge-pc.mp4';
		}

		video.setAttribute('src',file);
	}

	const onLoad = onResize;

	window.addEventListener('load',onLoad);
	window.addEventListener('resize',onResize);
}
setVideoFile();

 


window.matchMedia

「window.matchMedia」を使うと、よりシンプルに、無駄な処理を減らすことができます。

const setVideoFile = function(){
	const video = document.querySelector('.js-video');
	let file;

	const mediaQuerie = window.matchMedia( 'screen and ( max-width: 1023px )' );

	function checkBreakPoint( mediaQuerie ) {
		if ( mediaQuerie.matches ) {
			file = './assets/video/hoge-sp.mp4';
		} else{
			file = './assets/video/hoge-pc.mp4';
		}

		video.setAttribute('src',file);
	}

	mediaQuerie.addListener( checkBreakPoint ); // ブレイクポイントの度に
	checkBreakPoint( mediaQuerie ); // 初回
}
setVideoFile();

console.logなどで確認すると分かりますが、ブレイクポイントが切り替わった時のみ処理が実行されます。
また、mediaQuerieも cssの書き方と同じため、より直感的に理解できると思います。

 


Can I use

https://caniuse.com/?search=window.matchMedia