【JavaScript】外部のJSファイルからモジュールを呼び出す方法
こんばんは！今日は一日雨でジメジメした日が続きますね。
まだ週初めなので頑張っていきましょう！
さて、今日は JSファイルをモジュールとして呼び出す方法を 紹介します。
まずは下記階層のフォルダを用意してください。
dist
└index.html
└js
└script.js
index.html
<!DOCTYPE html>
<html>
<head>
<title>外部モジュールの読み込み</title>
</head>
<body>
<p id="target"></p>
<script type="module">
import { sum } from './js/math.js';
let answer = sum(7,8);
document.getElementById('target').innerHTML = answer
</script>
</body>
</html>
ここの記述ではjsファイルを描写するpタグと外部のJSファイルを呼び出すための記述があります。さてここで一番重要なのがモジュールの呼び出し方です。importを使ってsum関数を呼び出しています。呼び出した関数はsum()として実行しanswerに格納していいます。
次に呼び出し元のファイルの設定を見ていきましょう。
js/script.js
export function sum(a,b){
return a + b;
}
ここでは定義したsum関数をexportを使って外部に渡しています。
たったこれだけの記述だけで外部ファイルで利用できるようになるんですね(^ ^)
あとはブラウザで確認し足し算結果が15となっているか確認してみてください。
今週も張り切っていきましょう！
ブログ始めました！
— フロントエンドブログ(よーさん) (@frontend_blog23) 2021年8月30日
よろしければ見ていってください！https://t.co/5oZys8GAIq#フロントエンジニア #WEB制作#WordPress
