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

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

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

importで { } を使う場面とは

JavaScriptのESモジュールでは、エクスポート方法によって読み込み側の書き方が変わります。

  • 名前付きエクスポート：export { 関数名 } のようにエクスポートされたものを読み込む場合は、import { 名前 } from '...' と波括弧が必要です。複数の要素を一度に読み込むこともできます。
  • デフォルトエクスポート：各モジュールに1つだけ設定できる特別なエクスポートで、こちらを読み込む場合は波括弧なしで import 名前 from '...' と書きます。

つまり、波括弧 { } の有無は「どの形式でエクスポートされたか」に対応しているのです。

サンプルコード

以下は、JavaScriptのimportで { } を使用する具体例です。

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>Using '{ }' in javascript imports</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to execute the imported function</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 { testImport as test, tellTime } により、testImport 関数を test という別名で、tellTime 関数をそのままの名前で、それぞれ名前付きエクスポートしています。
  • script.js 側では、import {test, tellTime as showTime} とすることで、test をそのままの名前で、tellTime を showTime という別名で読み込んでいます。
  • as キーワードを使えば、エクスポート側・読み込み側のどちらでも自由に名前を変更できるのがポイントです。
  • <script type="module"> を指定することで、HTMLからESモジュールとしてJavaScriptファイルが読み込まれます。

実行結果

上記コードを実行すると、まず次のような画面が表示されます。

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

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

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

まとめ

JavaScriptのimportで波括弧 { } を使うのは、対象が名前付きエクスポートだからです。逆に、デフォルトエクスポートを読み込む場合は波括弧は不要になります。また、as を使った別名指定（エイリアス）を覚えておくと、名前の衝突を避けたり、可読性を高めたりするのに役立ちます。モジュール構文を正しく理解して、整理されたコードを書きましょう。

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

    JavaScriptにおけるインポートとエクスポートの名前変更とはJavaScriptのESモジュールでは、asキーワードを使うことで、エクスポートやインポートの際に関数や変数に別名を付けることができます。モジュール側の元の名前はそのまま維持しながら、利用する側では分かりやすい名前で扱えるため、コードの可読性と保守性が向上します。注意：このサンプルを実行するには、ローカルホストサーバー環境が必要です。HTMLファイルを直接ブラウザで開くと、CORSポリシーの制限によりモジュールの読み込みが失敗する場合があるためご注意ください。コード例index.html<!DOCTYPE html>

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

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