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

JavaScriptの「import as」「export as」構文を徹底解説！別名でのモジュール読み込みと書き出し方法

JavaScriptのモジュールシステムでは、asキーワードを使うことで、モジュールを任意の別名でインポートしたりエクスポートしたりできます。

import as と export as とは

import as を使うと、エクスポートされた名前付きモジュール（名前付きエクスポート）を、自分の好きな名前を付けて読み込むことができます。

export as を使うと、ローカルで定義した関数や変数に別名を付けて外部に公開できます。これにより、内部実装の名前と外部に見せる名前を分けることが可能になります。

以下に、JavaScriptにおける import as および export as 構文の具体的なコード例を示します。

コード例

<!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>Import as and Export as in 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

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

function testImport() {
    return "Module testImport has been imported" + "";
}
function tellTime() {
    return new Date();
}
export { testImport as test, tellTime };

コードの解説

sample.js側（export as）： 関数 testImport() は、export { testImport as test } の部分で「test」という別名をつけてエクスポートされています。つまり、外部からは元の名前ではなく「test」という名前でアクセスすることになります。一方、tellTime() は別名を付けずにそのままエクスポートしています。

script.js側（import as）： インポート時には、test はそのままの名前で読み込まれますが、tellTime は tellTime as showTime とすることで、「showTime」という別名で読み込んでいます。ボタンをクリックすると、それぞれの関数の結果が画面に表示されます。

実行結果

上記のコードを実行すると、次のような出力が得られます。

JavaScriptの「import as」「export as」構文を徹底解説！別名でのモジュール読み込みと書き出し方法

「CLICK HERE」ボタンをクリックすると、以下のように表示されます。

JavaScriptの「import as」「export as」構文を徹底解説！別名でのモジュール読み込みと書き出し方法

まとめ

  • export { 名前 as 別名 } — ローカルの関数や変数に別名を付けてエクスポートできる。
  • import { 名前 as 別名 } — インポートする際に、好きな名前に変更して利用できる。
  • 名前の衝突を避けたい場合や、より分かりやすい名前にしたい場合に非常に便利な構文です。
  1. Chromeのブックマークをエクスポート・インポートする方法｜HTMLファイルでのバックアップ手順を解説

    Google Chromeを長く使っていると、失うことができないほど大量のブックマークが蓄積されているはずです。デバイスの乗り換え、新しいブラウザプロファイルの作成、Chromeの再インストールなどを予定しているなら、事前にブックマークをエクスポートしておくことが重要です。あらかじめ書き出しておけば、後からいつでもデータを取り込めるようになります。 多くの方はGoogleアカウントを使って閲覧データをリアルタイムでGoogleサーバーに同期していると思います。それでも、より安全な対策として手動でのバックアップを習慣づけるのがおすすめです。 この記事では、ChromeのブックマークをHTMLファ

  2. Windows 10で既定のアプリの関連付けをエクスポート・インポートする方法

    Windowsでは、同じ種類のファイルを複数のプログラムで開くことができます。例えば、テキストファイルはメモ帳でもワードパッドでも開けますし、特定の拡張子をお気に入りのアプリに関連付けることも可能です。例えば、.txtファイルを常にメモ帳で開くように設定すれば、以降はダブルクリックするだけで自動的にメモ帳が起動します。 しかし、せっかく設定したファイルの関連付けが、Windows 10のアップデートによってMicrosoft推奨の初期設定にリセットされてしまうことがあります。特に大型アップデートやビルドの更新後には、カスタマイズした関連付けが失われやすい傾向にあります。 このような問題を回避