[js]jsから外部jsファイルを読み込む方法

moduleのやつ。

どういうあれか
moduleを使う
1. 条件分岐で読み込み先を指定したい場合
オフライン環境だと動かない

どういうあれか

普通はページ内で使うjsをまとめたファイルを読み込ませて済む。

だけど、状況に応じて読み込みたい内容が変わる場合もある。

それ込みでそれぞれに全部書いちゃってもいいんだけど、内容が膨大だと修正とかする場合に触りにくくなっちゃう。

moduleを使う

こんな感じで配置されてるとして

index.html
js
 ├ scripts.js
 └ import.js

index.htmlでscripts.jsを読み込んで、scripts.jsでimport.jsを読み込むとする。

まず、こうなる。

<script type="module" src="js/scripts.js"></script>

type=”module”じゃないとダメ。

先に読み込む方、こんな感じ。

export const testArray = [{
        ****: '****',
        ****: ['****','****','****','****','****'],
        ****: '****',
        ****: '****',
    },{
        ****: '****',
        ****: ['****','****','****','****','****'],
        ****: '****',
        ****: '****',
    },{
        ****: '****',
        ****: ['****','****','****','****','****'],
        ****: '****',
        ****: '****',
}];
export const test = 'hello world';

宣言の最初に「export」をつける。

で、普通に読み込むならこう。

import importTest from "./import";

console.log(importTest.test);
console.log(importTest.testArray[0]['***']);

importで変数名を決めつつjsを読み込む。

出力するときはその変数名から始めて、配列っぽい呼び出し方になる。

条件分岐で読み込み先を指定したい場合

条件で変えたい場合。

index.html
js
 ├ scripts.js
 └ import
    ├ import01.js
    ├ import02.js
    ︙

HTMLでこんな感じだったとして

<label><input type="radio" name="select" value="import01">import01</label>
<label><input type="radio" name="select" value="import02">import02</label>
<label><input type="radio" name="select" value="import03">import03</label>
<label><input type="radio" name="select" value="import04">import04</label>
︙

こう。

$(function(){
    $(document).on('change','input[name="select"]',function(){
        const selectVal = $('input[name="select"]:checked').val();
        import('./import/' + selectVal + '.js')
        .then(a => {
            console.log(a.testArray[1]['***']);
        });
    })
})

radioの値とインポートするファイル名をリンクさせて、選択時に指定ファイルの読み込みを発火させる。

はじめに書いたimportは最上位に書かないといけないけど、import()だったら条件分岐とかの中で書けるようになる。使い分けですね。

オフライン環境だと動かない

moduleを使うにあたり、ローカル環境だと動かないことに注意。

サーバーにアップしないと動かない。

いちいちサーバーにアップするのはめんどいので、ローカル環境でどうにかしたいならXAMPPとかでサーバーを作るとかで対処する。