モジュールとは？
「～.js」等、１つのファイルとして定義するのが基本です。
モジュールの特徴
モジュールはグローバルスコープではないので、モジュールの外側との名前の衝突はしないです。（Javaでいうパッケージに近い存在です。）
モジュール化できる対象
割と何でも、モジュール化することができます。
- 変数
- 関数
- クラス
- 型のエイリアス
- インターフェイス
importキーワード
別ファイルで定義されたモジュールや関数、オブジェクトを、自分のモジュールにインポートするのは、import命令の役割になります。
構文
同階層のファイルを読み込む場合は読み込むファイル名の先頭に「./」を付けます。複数のメンバを指定する場合はカンマ区切りで波括弧内でメンバ名を指定する必要があります。
|
1 |
import {インポートするメンバ1,インポートするメンバ2} from './読み込むJavaScriptファイル' |
エイリアス
asキーワードを使う事で別名としてメンバをファイル内で使用する事ができるようになります。
|
1 |
import {インポートするメンバ as エイリアス名} from './読み込むJavaScriptファイル' |
ワイルドカード
「* as エイリアス名」と指定する事でimportするファイル内からexportされているモジュールを全てインポートする事が可能になります。
|
1 2 3 |
import * as all from "./add.js"; console.log(all.add(3, 2)); console.log(all.a); |
重複呼び出し
ワイルドカードを使っていれば、importしたファイルがさらにimportしているモジュールに関しても重複して呼び出す事が可能です。
exportキーワード
モジュールとして外部からアクセスできるメンバーには、exportキーワードを付与します。
例
|
1 2 3 |
export function 関数名(a,b){ 処理内容 } |
export default
ワイルドカードを使わなくても「export default」を使えば同じ事ができます。
使う時は、クラスや関数の名前は不要です。
定義する時の構文
|
1 2 3 4 |
export default{ メンバ名1:メンバの内容1, メンバ名1:メンバの内容2 } |
例
呼び出し元のファイル（add.js）
|
1 2 3 4 5 6 7 8 9 10 |
export function add(a, b) { return a + b; } export const a = 4; export default { add: add, a: a } |
呼び出し先のファイル（index.js）
|
1 2 3 |
import all from "./add.js"; console.log(all.add(3, 2)); console.log(all.a); |
インポートする時の構文
export defaultにてエクスポートを行った場合はimportのメンバ名に{}をつける必要がなくなります。
|
1 |
import 任意の名前 from 'JavaScriptファイル名' |
この記事へのコメントはありません。