[js]js内で呼び出す画像を一元管理する方法

連想配列でやる。

普通は普通に呼び出す
連想配列でまとめてしまえ
注意が必要
ぶっちゃけいつ使うのか

普通は普通に呼び出す

こんな感じじゃん。

$(function(){
    $('#vegas').vegas({
        slides:[
            {src: 'img/img_01.jpg'},
            {src: 'img/img_02.jpg'},
            {src: 'img/img_03.jpg'},
        ],
    })
});

プラグインで完結させる場合はまあこれでいいんだけど、というか普通に自作するだけなら問題ないんだけど、膨大なjsを自作していくにあたっては、コードのあっちこっちで画像の呼び出しが発生するとパスの修正をするときにめんどくさいことになったりする。

画像パスを一元管理したくなる。

それに応える。

連想配列でまとめてしまえ

こうなる

$(function(){
    //配列にまとめる
    const imgArr = {
        img_01:'img/img_01.jpg',
        img_02:'img/img_02.jpg',
        img_03:'img/img_03.jpg',
    };
    //呼び出す
    $('#vegas').vegas({
        slides:[
            {src: imgArr.img_01},
            {src: imgArr.img_02},
            {src: imgArr.img_03},
        ],
    })
});

基本的に個別指定が前提になってくるし、そうなるとただの配列じゃめんどくさいので連想配列。多次元にするほどではないかなと思う。

注意が必要

他の関数の変数は引っ張れない。以下は駄目な例。

$(function(){
    //配列にまとめる
    const imgArr = {
        img_01:'img/img_01.jpg',
        img_02:'img/img_02.jpg',
        img_03:'img/img_03.jpg',
    };
});
$(function(){
    //呼び出す
    $('#vegas').vegas({
        slides:[
            {src: imgArr.img_01},
            {src: imgArr.img_02},
            {src: imgArr.img_03},
        ],
    })
});

ローカル・グローバルの仕様によるもの。

こうすれば動く。

//配列にまとめる
const imgArr = {
    img_01:'img/img_01.jpg',
    img_01:'img/img_02.jpg',
    img_01:'img/img_03.jpg',
};
$(function(){
    //呼び出す
    $('#vegas').vegas({
        slides:[
            {src: imgArr.img_01},
            {src: imgArr.img_02},
            {src: imgArr.img_03},
        ],
    })
});

jQueryばっかりやってると無名関数で囲う癖がつくので盲点になりやすい。

ぶっちゃけいつ使うのか

BASEでテーマを作るとき。

画像パスが全部異なるお陰で、アップロード時に一つずつ書き換える必要がある。

そんなのはやってられないわけで、アップして出力されたパスをエクセルでまとめてconcatで一気に配列にしてjsのそれを置換するわけである。