[js]別ファイルのjsをjsで読み込ませる方法

簡単な方法だけ。

html経由で読ませるのが早い
importする方法
1. 作り方
どっちがいいんだ

html経由で読ませるのが早い

こんな構造だとして。

folder
├ index.html
└ js
  ├ scripts.js
  └ inint.js

実行内容を書いたやつ（scripts.js）で色々格納したやつ（init.js）を呼び出したいとする。

こうなる。

document.write("<script src=\"js/init.js\"></script> ");

要するに<head>に<script>を追加してjsファイルを読ませようってこと。

実行するとこうなる。

︙
<script src="js/init.js"></script>
</head>

HTMLファイル基準の相対パスを指定してるので、階層分けとかすると使い勝手が悪い。

じゃあ絶対パスにすればいいかといえば、格納ディレクトリが変わったら動かない。

読み込み元と読み込み先の相対パスで指定できないから用途は限られる。

importする方法

まず完成形

Document

作り方

const test = {
    aaa:111,
    bbb:222,
    ccc:333,
};
export default test;

まず必要な準備として、使用する変数やら関数に「export」を与える必要がある。付いてなかったら使えない。

宣言時に付けてもいいし、後でまとめて書いても良い。

export const test = {
    aaa:111,
    bbb:222,
    ccc:333,
};

複数だとこんな感じ。

const test01 = {...};
const test02 = {...};
const test03 = {...};
export {test01,test02,test03};

で、インポートする。

特定の変数なり関数なりを呼び出すなら指定する。

import test from './export';
console.log(test);

jsファイル同士の相対パスで指定できるので助かる。

まるっと引っ張りたかったら*でやっていく。

import * as 【名前をつける】 from './export';
console.log(【名前をつける】.test);

//こんなかんじ
import * as export from './export';
console.log(export.test);

HTMLの記述もちょっと変わる。type=”module”にしないと動かない。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="js/import.js"></script>
</head>
<body>
    
</body>
</html>

更に、ローカル環境だと動かない。めっちゃだるい。

どっちがいいんだ

開発時にローカルで賄えないのはめちゃくちゃだるい。原因はセキュリティというかブラウザの仕様なので、そういうものだと飲み込むしかない。方法はあるけど。

それでやっていけるんだったらimport、だめだったら<head>に読ませる。

気持ち的に本番環境ではimportを使いたい。後で差し替えで済ませてもいいんだけどさ、その手間もめんどいのでどっちかにした方がいい。

そんな感じで。