Es6-modules

提供：Dev Guides
移動先:案内、検索

ES6-モジュール

前書き

JavaScriptコードの一部を再利用する必要があるシナリオを考えます。 ES6 は、*モジュール*のコンセプトであなたを救います。

モジュールは、JavaScriptコードの関連セットを編成します。 モジュールには、変数と関数を含めることができます。 モジュールは、ファイルに記述されたJavaScriptコードのチャンクにすぎません。 デフォルトでは、モジュールの変数と関数は使用できません。 モジュール内の変数と関数は、他のファイル内からアクセスできるようにエクスポートする必要があります。 ES6のモジュールは* strictモード*でのみ機能します。 これは、モジュールで宣言された変数または関数にグローバルにアクセスできないことを意味します。

モジュールのエクスポート

exportキーワードを使用して、モジュール内のコンポーネントをエクスポートできます。 モジュールのエクスポートは次のように分類できます-

  • 名前付きエクスポート
  • デフォルトのエクスポート

名前付きエクスポート

名前付きエクスポートは名前で区別されます。 モジュールには複数の名前付きエクスポートを含めることができます。 モジュールは、以下に示す構文を使用して、選択したコンポーネントをエクスポートできます-

  • 構文1 *
//using multiple export keyword
export component1
export component2
...
...
export componentN
  • 構文2 *

または、以下のように\ {}バインディング構文で単一のエクスポートキーワードを使用して、モジュールのコンポーネントをエクスポートすることもできます- 

//using single export keyword

export {component1,component2,....,componentN}

デフォルトのエクスポート

単一の値のみをエクスポートする必要があるモジュールは、デフォルトのエクスポートを使用できます。 モジュールごとにデフォルトのエクスポートは1つだけです。

構文 

export default component_name

ただし、モジュールはデフォルトのエクスポートと複数の名前付きエクスポートを同時に持つことができます。

モジュールのインポート

モジュールを使用できるようにするには、* importキーワード*を使用します。 モジュールは複数の*インポートステートメント*を持つことができます。

名前付きエクスポートのインポート

名前付きエクスポートをインポートするとき、対応するコンポーネントの名前は一致する必要があります。

構文 

import {component1,component2..componentN} from module_name

ただし、名前付きエクスポートのインポート中は、asキーワードを使用して名前を変更できます。 以下に示す構文を使用してください- 

import {original_component_name as new_component_name }

すべての名前付きエクスポートは、アスタリスク* *演算子*を使用してオブジェクトにインポートできます。 

import * as variable_name from module_name

デフォルトのエクスポートのインポート

名前付きエクスポートとは異なり、デフォルトのエクスポートは任意の名前でインポートできます。

構文 

import any_variable_name from module_name

例：名前付きエクスポート

  • ステップ1 *-ファイルcompany1.jsを作成し、次のコードを追加します-
let company = "finddevguides"

let getCompany = function(){
   return company.toUpperCase()
}

let setCompany = function(newValue){
   company = newValue
}

export {company,getCompany,setCompany}
  • ステップ2 *-ファイルcompany2.jsを作成します。 このファイルは、company1.jsファイルで定義されたコンポーネントを使用します。 次のいずれかの方法でモジュールをインポートします。
  • アプローチ1 *
import {company,getCompany} from './company1.js'

console.log(company)
console.log(getCompany())
  • アプローチ2 *
import {company as x, getCompany as y} from './company1.js'

console.log(x)
console.log(y())
  • アプローチ3 *
import* as myCompany from './company1.js'

console.log(myCompany.getCompany())
console.log(myCompany.company)
  • ステップ3 *-HTMLファイルを使用してモジュールを実行します

両方のモジュールを実行するには、以下に示すようにhtmlファイルを作成し、これをライブサーバーで実行する必要があります。 スクリプトタグでは attribute type = "module" を使用する必要があることに注意してください。 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

上記のコードの出力は以下のようになります- 

finddevguides
finddevguides

デフォルトのエクスポート

ステップ1 *-ファイル *company1.js を作成し、次のコードを追加します- 

let name = 'finddevguides'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name = newName
   }
}

export default company

ステップ2 *- *company2.js ファイルを作成します。 このファイルは、company1.jsファイルで定義されたコンポーネントを使用します。 

import c from './company1.js'
console.log(c.getName())
c.setName('Google Inc')
console.log(c.getName())

ステップ3 *- HTMLファイル*を使用して*モジュール*を実行します

両方のモジュールを実行するには、以下に示すようにhtmlファイルを作成し、これをライブサーバーで実行する必要があります。 スクリプトタグでは attribute type = "module" を使用する必要があることに注意してください。 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
</head>
<body>
   <script src="./company2.js" type="module"></script>
</body>
</html>

上記のコードの出力は以下のようになります- 

finddevguides
Google Inc

例：デフォルトのエクスポートと名前付きエクスポートの組み合わせ

ステップ1 *-ファイル *company1.js を作成し、次のコードを追加します- 

//named export
export let name = 'finddevguides'

let company = {
   getName:function(){
      return name
   },
   setName:function(newName){
      name =newName
   }
}
//default export
export default company

ステップ2 *- *company2.js ファイルを作成します。 このファイルは、 company1.js ファイルで定義されたコンポーネントを使用します。 最初にデフォルトのエクスポートをインポートし、次に名前付きエクスポートをインポートします。 

import c, {name} from './company1.js'

console.log(name)
console.log(c.getName())
c.setName("Mohtashim")
console.log(c.getName())
  • ステップ3 *-HTMLファイルを使用してモジュールを実行します
<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
   </head>
   <body>
      <script src="company2.js" type="module"></script>
   </body>
</html>

上記のコードの出力は以下のようになります- 

finddevguides
finddevguides
Mohtashim
「https://www.finddevguides.com/index.php?title=Es6-modules&oldid=28488」から取得
Powered by MediaWiki