---
# System prepended metadata

title: JavaScript　基礎編１３（学習日：9/25）（ECMAScriptモジュール、ECMAScript）
tags: [JavaScript]

---

# JavaScript　基礎編１３（学習日：9/25）（ECMAScriptモジュール、ECMAScript）
## 1. ECMAScriptモジュール＜ES2015＞
### ECMAScriptモジュールとは
JavaScriptファイルをモジュール化する言語標準の機能のこと。
モジュールには、保守性の向上や名前空間の分割、再利用性の向上などのメリットがある。

### 名前付きエクスポート・インポート
* 名前付きエクスポート
export{変数・関数名}で、宣言済の変数・関数を名前付きエクスポートできる。
また、export 変数・関数宣言 で、宣言時から名前付きエクスポートが可能となる。
* 名前付きインポート
import{変数・関数名}fromモジュール名で、ファイルからエクスポートされた変数・関数を名前付きインポートできる。

### エイリアス（名前変換）
* エクスポートのエイリアス
宣言済みの変数に対し、別の名前を付けてエクスポートできる。名前の後にasで新たな名前を指定する。
export{変数・関数名 as エクスポートしたい変数・関数名}
* インポートのエイリアス
インポートのエイリアスも可能である。こちらもasで名前を指定する。
import{変数・関数名as インポートしたい変数・関数名}fromモジュール名

### デフォルトエクスポート・インポート
モジュールごとに1つしかエクスポート・インポートできない。
* デフォルトエクスポート
export default{変数・関数名}で、宣言済の変数・関数を名前付きエクスポートできる。
また、export default 関数宣言 で、宣言時から名前付きエクスポートが可能となる。
※変数は複数指定可能なため宣言時のデフォルト指定は不可。
エイリアス可能。
* デフォルトインポート
import 任意の変数・関数名 fromモジュール名で、デフォルトエクスポートされた変数・関数を名前付きインポートできる。
エイリアス可能。（ただし、名前付きエクスポートの名前がdefaultの場合は必須。）
名前付きインポートとデフォルトインポートは同時記述可能。

### その他の構文
* 再エクスポート
他モジュールからインポートしたものを、エクスポートし直すこと。
export構文の後ろにfrom モジュール名を指定する。

* すべてをインポート
import * as 任意の名前 from モジュール名で、全てのエクスポートをインポートできる。
* 副作用のためのインポート
グローバルコードをいじるだけで、何もエクスポートしないモジュールがある。
このモジュールをインポートするには、import　モジュール名で、指定したモジュールを読み込み実行できる。

### モジュールの実行
モジュール実行の際は、script type="module"にする必要がある。

## 2. ECMAScript
### ECMAScriptとは
ECMAScriptは、Ecma Internationalという団体によって標準化されている言語使用である。
同団体の技術委員会が中心に議論し、ブラウザベンダーや関心のある企業で構成される。

### バージョンの歴史
初代のバージョン1は1997年6月にリリースされた。
1999年のバージョン3まで毎年リリースされ、バージョン4は破棄となった。
以降しばらくバージョンアップはなかったが、2009年に5が、2011年に5.1がリリースされた。
そこから4年の歳月を経て仕様策定プロセスが変更され、2015年からはバージョン名が年数を冠するようになった。以降毎年リリースされている。

### 仕様策定まで
2015以前は、議論が終結するまでリリースしていなかったが、仕様策定以降は毎年アップデートされる形に変更された。
2か月ごとにミーティングを行い、追加機能提案書（プロポーザル）を審査し、成熟基準を表すステージ評定がなされる
バージョン4で、機能追加で意見が割れ議論が進まずご破算となった教訓から、策定作業の無駄を最小限にするよう変更されている。

### プロポーザル段階の機能を試す
試験中のプロポーザル段階の機能が試せる場合がある。フラグを有効化することで実装できる。

### ECMAScriptの進化を学ぶ意義
* 言語を学ぶ
* 言語の進化をとらえる。なぜこの機能が実装された（されようとしている）のかを考えることが大切。
* 情報の正しい状態を調べるため。　溢れる情報が正しいのか、実際に触ってみて判断できる。

## 3. リファレンス
[MDN Web Docs](https://developer.mozilla.org/ja/)
JavaScriptの実質的な公式リファレンス。いわゆるトリセツ。

[Node.js Documentation](https://nodejs.org/api/)
Node.jsの公式リファレンス。

###### tags: `JavaScript`