JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法

JavaScriptにおけるインポートとエクスポートの名前変更とは

JavaScriptのESモジュールでは、asキーワードを使うことで、エクスポートやインポートの際に関数や変数に別名を付けることができます。モジュール側の元の名前はそのまま維持しながら、利用する側では分かりやすい名前で扱えるため、コードの可読性と保守性が向上します。

注意：このサンプルを実行するには、ローカルホストサーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーの制限によりモジュールの読み込みが失敗する場合があるためご注意ください。

コード例

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 18px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptでのインポートとエクスポートの名前変更</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、インポートされた関数が実行されます</h3>
<script src="script.js" type="module"></script>
</body>
</html>

script.js

ここでは、tellTimeをshowTimeという別名でインポートしています。

import { test, tellTime as showTime } from "./sample.js";
let resultEle = document.querySelector(".result");
document.querySelector(".Btn").addEventListener("click", () => {
    resultEle.innerHTML += test();
    resultEle.innerHTML += showTime();
});

sample.js

エクスポート時には、testImportをtestという別名で公開しています。

function testImport() {
    return "モジュールtestImportがインポートされました" + "<br>";
}
function tellTime() {
    return new Date();
}
export { testImport as test, tellTime };

ポイント解説

  • エクスポート時の別名付け：export { testImport as test }のように記述すると、元の関数名testImportをtestという名前で外部に公開できます。
  • インポート時の別名付け：import { tellTime as showTime }のように記述すると、インポートした関数をshowTimeとして使用できます。
  • 名前の衝突を避けたいときや、より直感的な名前に置き換えたい場合にasキーワードが便利です。

実行結果

ページを起動すると、以下のような画面が表示されます。

【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法

「CLICK HERE」ボタンをクリックすると、インポートされた関数の実行結果が画面に出力されます。

【初心者向け】JavaScriptでインポートとエクスポートの名前を変更する方法


  1. JavaScriptのimportで波括弧「{}」を使う理由とは？名前付きエクスポートの基本をわかりやすく解説

    JavaScript（ESモジュール）でモジュールを読み込む際、import 文に波括弧 { } を付けるかどうか迷ったことはありませんか？実はこの波括弧は、名前付きエクスポート（named export）を読み込むために必要な記法です。本記事では、実際のコード例を使いながら、{ } の役割と使い方を詳しく解説します。 importで { } を使う場面とは JavaScriptのESモジュールでは、エクスポート方法によって読み込み側の書き方が変わります。 名前付きエクスポート：export { 関数名 } のようにエクスポートされたものを読み込む場合は、import { 名前 } fro

  2. JavaScriptで動的インポート（dynamic import）をawaitする方法

    この記事では、JavaScriptの動的インポート（dynamic import）をawaitを使って読み込む方法について解説します。 注意： このサンプルコードは、モジュールを読み込むためローカルサーバー（localhost）環境が必要です。HTMLファイルを直接開くのではなく、Live Serverなどの開発用サーバー経由で実行してください。 動的インポートとは？ 通常のimport文はファイルの先頭で静的に宣言しますが、import()関数を使うと、必要なタイミング（例：ボタンクリック時）でモジュールを遅延読み込みできます。戻り値はPromiseであるため、awaitと組み合わせることで