ｊQueryもっと効率の良いコードはありますか？？？

現状

https://liginc.co.jp/designer/archives/7149のプラグインを使用しております。

WebPに対応させる為、ユーザーエージェントを参照してブラウザ毎に出す画像フォーマットを変更させたく下記のコードを書きました。
(一部ワードプレスのコードも入っています）

jQuery
1<script>
2$(function(){
3  var userAgent = window.navigator.userAgent.toLowerCase();
4  console.log(userAgent);
5  if(userAgent.indexOf('msie') != -1 ||
6          userAgent.indexOf('trident') != -1) {
7            $.sublime_slideshow({
8            src:[
9            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img.jpg"},
10            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img2.jpg"},
11            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img3.jpg"},
12            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img4.jpg"},
13            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img5.jpg"},
14            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img6.jpg"},
15            {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img7.jpg"}
16            ],
17            duration:   7,
18                fade:       1,
19                scaling:    true,
20                rotating:   false,
21            });
22  } else if(userAgent.indexOf('edge') != -1 ||
23            userAgent.indexOf('chrome') != -1 ){
24              $.sublime_slideshow({
25              src:[
26              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img.jpg.webp"},
27              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img2.jpg.webp"},
28              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img3.jpg.webp"},
29              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img4.jpg.webp"},
30              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img5.jpg.webp"},
31              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img6.jpg.webp"},
32              {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img7.jpg.webp"}
33              ],
34              duration:   7,
35                  fade:       1,
36                  scaling:    true,
37                  rotating:   false,
38              });
39  } else if(userAgent.indexOf('safari') != -1) {
40    $.sublime_slideshow({
41    src:[
42    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img.jpg"},
43    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img2.jpg"},
44    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img3.jpg"},
45    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img4.jpg"},
46    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img5.jpg"},
47    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img6.jpg"},
48    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img7.jpg"}
49    ],
50    duration:   7,
51        fade:       1,
52        scaling:    true,
53        rotating:   false,
54    });
55  } else {
56    $.sublime_slideshow({
57    src:[
58    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img.jpg.webp"},
59    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img2.jpg.webp"},
60    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img3.jpg.webp"},
61    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img4.jpg.webp"},
62    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img5.jpg.webp"},
63    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img6.jpg.webp"},
64    {url:"<?php bloginfo('template_directory'); ?>/images/bg/top_img7.jpg.webp"}
65    ],
66    duration:   7,
67        fade:       1,
68        scaling:    true,
69        rotating:   false,
70    });
71  }
72
73
74});
75</script>

知りたいこと

現状、思った通りに動作しているのですがココの有識者の方々ならもっと効率の良いコードが書けるのではないか？と思い勉強のために教えていただけると幸いです。

m.ts10806

2020/01/25 00:15

JavaScript以外での方法は求めてないですか？ただこのコードだけでリファクタリングは簡単ではない(他者が動作確認できないから)ので、あまり期待されない方が良いかとは思います。

AMK

2020/01/25 01:02

JS以外でも問題ないです＞動作確認できない確かにそうですね・・・現状コードだと同じ設定値を何度も書いているのが釈然とししないので質問してみました。

m.ts10806

2020/01/25 01:06

基本は「違うところだけ変数にする」「同じ情報は先に変数・定数に持っておく」でだいぶ短くなると思います。

行動規範の内容に同意します

回答1件

ベストアンサー

動作確認できないので、何か違うところあれば自身で調整願います。

まずはこんな感じの関数を作る。
（WordPressの機能使うなら同じPHP内に入れるとかfunction.php？とかheader.php？とかに含んだ方がいいかもしれません）

js
1const image_num = 7;
2
3function getImageObjects(webp){
4    let image_object = [];
5    for(let i = 0;i<image_num;i++){
6        image_name = "/images/bg/top_img"+ (i===0 ? '' : i+1) +".jpg" + (webp ? '.webp' : '');
7
8        image_object[i] = {url:image_name};
9 
10    }
11    return image_object;
12}
13
14

あとは適宜呼び出す。

js
1$(function() {
2	var userAgent = window.navigator.userAgent.toLowerCase();
3	console.log(userAgent);
4	if (userAgent.indexOf('msie') != -1 ||
5		userAgent.indexOf('trident') != -1) {
6		$.sublime_slideshow({
7			src: getImageObjects(false),
8			duration: 7,
9			fade: 1,
10			scaling: true,
11			rotating: false,
12		});
13	} else if (userAgent.indexOf('edge') != -1 ||
14		userAgent.indexOf('chrome') != -1) {
15		$.sublime_slideshow({
16			src: getImageObjects(true),
17			duration: 7,
18			fade: 1,
19			scaling: true,
20			rotating: false,
21		});
22	} else if (userAgent.indexOf('safari') != -1) {
23		$.sublime_slideshow({
24			src: getImageObjects(false),
25			duration: 7,
26			fade: 1,
27			scaling: true,
28			rotating: false,
29		});
30	} else {
31		$.sublime_slideshow({
32			src: getImageObjects(true),
33			duration: 7,
34			fade: 1,
35			scaling: true,
36			rotating: false,
37		});
38	}
39});
40

今回srcのところだけ切り出しましたが、他の設定も引数で渡して作るようにすれば、もう少し短くかけると思います。
同じ設定しかないのであれば、尚更、全設定外に持った方が良さそうですね。

投稿2020/01/25 01:42

m.ts10806

総合スコア80850

AMK

2020/01/25 02:44

なるほど、ファイル名のところを自動的に変更することができるんですね！！ブラウザの判定は、どうしようもないですよね？？ IEとサファリ以外はWebP対応しているので、私の知っている知識では４つに別れちゃったので・・・理想は if IEとsafari else それ以外のブラウザだとスッキリするのになぁ～と思ってました。