Q&A
コードは外部サービスだけでなく、質問文にコードブロックでお書きください。
お世話になっております。
以下、jQueryのコードをより効率的な（可読性も重視した）実装にできないか
教えていただきたいです。
サンプルコード
Jsfiddle
jQuery
1$(function() { 2 var winWidth= $(window).outerWidth(); 3 var navUA= navigator.userAgent; 4 // 画面幅が639px以下、または UAがiPhone 又は Androidスマートフォンの時 5 if (winWidth <= 639 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) { 6 // SP時の処理 7 console.log('SP') 8 } else { 9 // PC時の処理 10 console.log('PC') 11 } 12 // リサイズ処理 13 $(window).resize(function() { 14 var winWidth= $(window).outerWidth(); 15 var navUA= navigator.userAgent; 16 // 画面幅が639px以下、または UAがiPhone 又は Androidスマートフォンの時 17 if (winWidth <= 639 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) { 18 // SP時の処理 19 console.log('SP') 20 } else { 21 // PC時の処理 22 console.log('PC') 23 } 24 }); 25}); 26
疑問点
①PC・SP判定でググると、「windowsサイズで切り分ける方法」「UAで切り分ける方法」
「どちらも使う方法」があるように見受けられるのですが、正解はあるのでしょうか？
※サンプルコードは、「どちらも使う方法」で実装しています。
②window.resizeのため、同じ処理を２回書くことに美意識的なものかもしれませんが
少し抵抗があるのですが、より効率的で可読性の高い実装方法はあるでしょうか？
何卒宜しくお願いします。
回答3件
0
ベストアンサー
①
要件（何のために振り分けるか）次第では。
②
JavaScript
1$(function() { 2 // リサイズ処理 3 $(window).resize(function() { 4 var winWidth= $(window).outerWidth(); 5 var navUA= navigator.userAgent; 6 // 画面幅が639px以下、または UAがiPhone 又は Androidスマートフォンの時 7 if (winWidth <= 639 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) { 8 // SP時の処理 9 console.log('SP') 10 } else { 11 // PC時の処理 12 console.log('PC') 13 } 14 }).resize(); // .trigger( 'resize' ) でも可 15});
【.trigger() | jQuery API Documentation】
https://api.jquery.com/trigger/
投稿2019/09/09 14:56
総合スコア69407
ご回答ありがとうございます！
なるほど、スマートですごく良いですね
しっかり理解するための質問なのですが、
.resize();の部分で、リサイズ前（ロード時）にも実行されるようにしているという
理解で大丈夫でしょうか？
そんな感じです。 厳密に言うと $(function() {}); がHTMLの読み込み完了時に実行されるので、ロードより少し前です。
よくわかりました！詳細まで教えていただきありがとうございます！
0
「内容が同じ」なら関数にすれば良いのでは。
js
1$(function(){ 2 uaCheck(); 3 4 // リサイズ処理 5 $(window).resize(function() { 6 uaCheck(); 7 }); 8 9 10}); 11 12function uaCheck(){ 13 var winWidth= $(window).outerWidth(); 14 var navUA= navigator.userAgent; 15 // 画面幅が639px以下、または UAがiPhone 又は Androidスマートフォンの時 16 if (winWidth <= 639 || navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) { 17 // SP時の処理 18 console.log('SP') 19 } else { 20 // PC時の処理 21 console.log('PC') 22 } 23}
もしちょっとずつ違う部分が出てくるなら引数で分岐
投稿2019/09/10 00:59
総合スコア80850
ご回答ありがとうございます！
>もしちょっとずつ違う部分が出てくるなら引数で分岐
↑について、ifではなく、引数でも分岐させる事ができるという事でしょうか？？
場合によります。「分岐」なので基本はifですが
数値だけが変わるなら引数そのまま突っ込めばいいだけになります。
なるほど、ご回答ありがとうございます！
0
VW判別
メリット: CSSと同じ判別方法なので、CSSの描画とJSの処理が乖離しない。
デメリット: ブラウザのサイズを変更しただけでスマホ判定になる。（これは狙って行う場合メリットとも言える）
UA判別
メリット: スマホとPCを正確に判別できる。
デメリット: CSSと違う判別方法なので、CSSの描画はスマホ用のものなのに、JSの処理だけPC用の処理になったりする。
読み込み時と画面リサイズ時の処理を同時に書く方法
参考Qiita記事:JQueryで読み込み時とリサイズ時にブラウザサイズに横幅を合わせる
投稿2019/09/09 15:14
編集2019/09/10 23:25
総合スコア973
わかりやすくメリットデメリットまで教えていただきありがとうございます！
１点、以下なのですが、、、
>CSSの描画はスマホ用のものなのに、JSの処理だけPC用の処理になったりする。
UAでスマホ判定されているのに、PC用の処理になる場合があるのでしょうか？
UAスマホ判定時に、CSSがPC判定になる場合があるかという意味ですか？
上記の意味でしたら、メディアクエリで指定した値を超える画面幅のスマホの場合、そういう問題が発生します。
メディアクエリでスマホ判定する条件を「iPadを縦向きにしてる時の幅(768px)未満」としているサイトが多いので、
よくある例では、
「iPhoneXを横向きにしてる時」とか、
「Androidで画面解像度を変更している時」などでしょうか。
なるほど...！
例えば、ランドスケープしている時もスマホCSSをキープしたい場合は
「UA+メディアクエリで切らないといけない」という認識であってますか？
「UA+メディアクエリで切る」というのが、どういう処理のことを言ってるのかわかりませんが、
CSSにUAを判定する機能は無いので、
CSSだけで判定するなら、メディアクエリを出来るだけ作り込むしか方法はないです。
JSと組み合わせるなら、UA判定してstyleタグを埋め込むとか、読み込ませるcssを切り替えるとかの方法もあります。
ご返信ありがとうございます！
if (winWidth <= 639 && navUA.indexOf('iPhone') > 0 || navUA.indexOf('Android') > 0 && navUA.indexOf('Mobile') > 0) {}
とすれば、メディアクエリで639で切った時と同様且つ、UAでも処理を切り替える
ということにならないでしょうか？
そこまで複雑なコードを書く目的がよくわかりません。
複雑なコードは共同開発にむかないし、後からいろいろ変更したいとなったときにめんどくさいし、
百害あって一利なしなので、基本的に必要なければ単純なコードで書くのが一番です。
UAでCSSを分けたいなら、前コメでもいったとおり、JavaScriptでstyleタグを埋め込むか、読み込むcssを切り替えればいいのでは？
ありがとうございます！
そうですね、参考にさせていただきます
あなたの回答
tips
プレビュー
