JavaScript

ECMAScript 6を触ってみる – 標準化されたモジュール管理システム

投稿日:


前回に引き続きJSの速習コース実践ラスト。最後は「WEB+DB PRESS Vol.87 第1特集 第6章-標準化されたモジュール管理システム-」を速習する。

これまでのモジュール管理

JavaScriptにはモジュール管理するしくみがないため、モジュール管理の仕組みは言語の外側で作られてきた。

CommonJSモジュール

Node.jsに採用されているサーバサイド向けのモジュール管理仕様で、require関数を呼ぶだけで同期的にほかのモジュールを読み込むことができる

AMD

サーバ向けに作られたCommonJSモジュールに対して、ブラウザ向けに作られたモジュール機構がAMD。AMDではdefine関数でモジュールを定義し、require関数でモジュールを読み込む

これらにはそれぞれメリットもあるがデメリットも多い

ES6モジュールの基本

ES6モジュールの特長

  • 宣言的でシンプルなモジュールのインポートとエクスポートの文法
  • 読み込み方法は同期にも非同期にも対応可能

ES6モジュールのインポートとエクスポート

名前付きエクスポート

  • 1では変数や関数、クラスの宣言文の先頭にexportを付けると、その名前のままモジュールのメンバとして外部にエクスポートされる
  • 2では1でエクスポートされたモジュールをインポートしている
  • importのあとにインポートしたいメンバの名前を指定し続いてfromのあとにモジュールの識別子を指定する
  • エクスポートされたメンバの名前とは別の変数名としてインポートしたい場合は、import文でasを使う(3)
  • 4はモジュールのメンバは個別ではなくモジュール全体をまとめてインポートするシンタックス

デフォルトエクスポート

名前付きエクスポートでは、インポートするためにはエクスポートされたメンバの名前を知っている必要があったが、これに対してモジュール1つに対して1つのメンバに限り名前指定不要でインポートできる仕組みがある

  • exportではなくexport defaultでエクスポートするメンバを指定する
  • importは名前付きエクスポートと違って自由に変数名を指定できる
  • 名前付きエクスポートに比べてデフォルトエクスポートはシンタックスも使い方もシンプル

モジュールの定義位置と巻き上げ

  • import文やexport文はモジュールのトップレベル以外に書くことはできない
  • if文や関数の中に書くとエラーになる
  • import文は関数宣言文などとおなじように巻き上げ(hoisting)が発生し、どこに書いてもモジュールの冒頭で宣言したことになる

モジュールないはstrictモード

  • ES6モジュールは必ずstrictモードとして実行される
  • ブラウザでは通常スクリプトのトップレベルのthisはwindowオブジェクトだったが、ES6モジュール内ではトップレベルのthisはundefinedになる

まとめ

JavaScript、ES5とES6について「JavaScriptパターン ―優れたアプリケーションのための作法」と「WEB+DB PRESS Vol.87」で速習した。もともとJavaScriptに関してはノリでやってきていた自分にとってはかなり為になるものだった。とても良本なのでかなりおすすめ。

速習ブログ

参考


-JavaScript
-,

執筆者:

関連記事

「slideship Tech Dive vol.1 フロントエンド特集」でLTしてきた

connpassリンク slideship Tech Dive v1.0 #React / ReactVR / #VueJs Webフロントエンド特集 「slideship Tech Dive v1. …

おれ的フロントエンド速習コース

3ヶ月でフロントエンド向上させるにあたって取り組んだことを書く。 フロントエンドって? どこからどこまで?何を指してる?と引っかかる人がいるかもしれないけどそこら辺はなんとなくお察しください。 3ヶ月 …

ECMAScript 6を触ってみる – 非同期処理 PromiseとGeneratorによるフロー制御

前回に引き続きJSの速習コースを実践。今回は「WEB+DB PRESS Vol.87 第1特集 第5章-簡潔で柔軟な非同期処理-」を速習する。 PromiseとGeneratorによるフロー制御 これ …

ECMAScript 6を触ってみる – モダンになった文法

WEB+DB PRESS Vol.87は、@t_wadaさんの言うとおりES6を速習するのにとても良い書籍だと思う。個人的には「JavaScript: The Good Parts ―「良いパーツ」に …

JavaScriptパターン

「JavaScriptパターン」第4章-関数-が面白かったからまとめながら写経した

タイトルにあるようにとても面白かったというのと、JavaScriptパターンの輪読会で第4章「関数」の後半を担当したのでその記録も兼ねて内容まとめながら写経した。 目次 はじめに 4.1 背景 4.2 …