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

JavaScriptモジュール入門：ES2015のexportとimportを使いこなそう

JavaScriptモジュールとは

モジュールはES 2015（ES6）で導入された機能です。大規模化しがちなコードを、再利用しやすい小さな単位に分割することを目的としています。モジュールにはクラスや関数などを格納でき、exportキーワードで変数・関数・オブジェクトを外部に公開し、別のファイルからimportキーワードで読み込んで使用します。

注意：この記事のサンプルを実行するには、ローカルホストサーバーが必要です。HTMLファイルを直接開いた場合、CORSポリシーによりモジュールの読み込みがブロックされることがあります。

モジュールのメリット

  • コードの分割により保守性が向上する
  • 関数やクラスを複数のファイルで再利用できる
  • 名前空間が分離されるため、グローバル変数の衝突を防げる

サンプルコード

以下は、ボタンをクリックするとモジュールをインポートして実行するシンプルな例です。

INDEX.html

<!DOCTYPE html>
<html lang="en">
<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:blueviolet;
    }
</style>
</head>
<body>
<h1>JavaScript Modules</h1>
<button class="Btn">IMPORT</button>
<div class="result"></div>
<h3>Click on the above button to import module</h3>
<script src="script.js" type="module"></script>
<script src="sample.js" type="module"></script>
</body>
</html>

ポイント：<script>タグにtype="module"属性を指定することで、そのスクリプトがモジュールとして扱われます。これによりimport/export構文が使用可能になります。

script.js

import test from './sample.js';
document.querySelector('.Btn').addEventListener('click',()=>{
   test();
})

sample.jsからデフォルトエクスポートされた関数をtestとして読み込み、ボタンがクリックされたタイミングで呼び出しています。

sample.js

let resultEle = document.querySelector(".result");
export default function testImport(){
   resultEle.innerHTML = 'Module testImport has been imported';
}

export defaultを使うことで、このファイルから1つの関数をデフォルトとして公開しています。インポート側では任意の名前で受け取ることができます。

実行結果

ページを開いた直後の表示は以下の通りです。

JavaScriptモジュール入門：ES2015のexportとimportを使いこなそう

「IMPORT」ボタンをクリックすると、モジュールが読み込まれて結果が表示されます。

JavaScriptモジュール入門：ES2015のexportとimportを使いこなそう

  1. Selenium WebDriverでJavaScript変数を読み取る方法

    Selenium WebDriverを使用すると、ページ内のJavaScript変数の値を読み取ることができます。SeleniumはexecuteScriptメソッドを利用してJavaScriptのコマンドを実行します。実行したいJavaScriptのコードは、このメソッドの引数として渡します。また、JavaScriptを扱う場合は、import org.openqa.selenium.JavascriptExecutorというステートメントを追加する必要がある点に注意してください。 構文 JavascriptExecutor j = (JavascriptExecutor) driver;

  2. SeleniumでJavaScriptのコンソールエラーを取得・キャプチャする方法

    Seleniumでは、ブラウザ上で発生したJavaScriptのエラーを自動的にキャプチャ(取得)できます。この種のエラーは、通常、開発者ツール(Developer tools)を開いた際に表示される「Console」タブで確認できるものです。エラーの発生原因は、ページ自体の機能的な不具合の場合もあれば、余分なログ出力が積み重なってパフォーマンス問題につながっているケースもあります。テスト自動化の中でこれらのエラーを検知できれば、リリース前の品質チェックに大きく役立ちます。 JavaScriptエラーの取得方法 JavaScriptのエラーは、driverオブジェクトとmanage()メソ