【解説】JavaScriptのimport／exportの使い方【モジュール】

【解説】JavaScriptのimport／exportの使い方【モジュール】

JavaScriptのimport／exportの使い方がこちら

順に解説してきます。

今回は例として「module.js」と「main.js」を用意しました。

①：別ファイルで使いたい文にexportをつける

まず別ファイルでも使いたい文に「export」をつけます。

module.jsにexport文をつけてみました。

export const a = 'test';
export function b () {
  console.log('code');
}

ちなみにdefaultを使えば、変数の名前がなくても大丈夫です。

直接値をエクスポートすることが可能です。

export default "javascript";

②：別ファイルのscriptタグに属性追加

続いてインポートしたいファイル（今回だとmain.js）のscript読み込みタグにtype属性を追加します。

「type=”module”」を記述しましょう。

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

③：別ファイルでimportを使う

次にインポートしたいファイルにて、import文を記述します。

import { 名前,名前 } from "ファイル名";

export時につけていた変数名や関数名を{}に記述。

そしてエクスポートしたいファイル名をfromのあとに書きましょう。

例とする書き方がこちら。

import { a, b } from "./module.js";

console.log(a); //test
b(); //code

ちなみにdefaultでエクスポートした文は、名前を自由につけることができます。

// defaultのみ使う場合
import 任意の名前 from "ファイル名";

// 一緒に使う場合
import 任意の名前, {名前、名前} from "ファイル名";

使い方の例がこちら。

import test, { a, b } from "./module.js";

console.log(a); //test
b(); //code
console.log(test); //javascript

色々なimportの仕方

ちなみに「as」を使えば、名前を変えることができます。

import {a as d} from "./module.js";
console.log(d); // test

また「import * as」と書けば、インポート先の中身をオブジェクトとして取得することができます。

import test, * as module from "./module.js";

console.log(module.a); //test
module.b(); //code
console.log(test); //javascript

④：サーバーから動作確認

import／exportの動作確認するには、サーバーから見る必要があります。

「file://〜」のようなローカル環境では動作しません。

そのためサーバーにアップするか、ローカルサーバーを立てて確認しましょう。

【解説】JavaScriptのimport／exportの使い方【モジュール】：まとめ

ジト

JavaScriptにてimport／exportする時はためしてみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙