Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

ES modulesを試してみた

ES6 moduleの実装が各ブラウザベンダーでサポートされつつあります。

ES modulesとは

ES modulesを使うことでJavaScriptのImportやExportなどの機能がWebpackやbrowserifyなどのbundleツールを通さなくても使えるようになります。
例えば以下のように他のスクリプトからモジュールを取り出すことができます。

import {addClass} from './util.js';
import Loader from 'http://example.com/loader.js';

ただし、パスの書かれていない下のようなコードは動きません。

import React from 'react';
import ReactDOM from 'react-dom';

実装状況

以下のブラウザでは実際に実装済みです。

  • Safari 10.1.
  • Chrome Canary 60 chrome:flags.
  • Firefox 54 about:config.
  • Edge 15 about:flags.

自分も早速、Google Chromeの最新技術が搭載されたChrome Canaryをダウンロードして試してみました。

ダウンロード


設定方法

その後、検索バーに「about:flags」と入力し、Chromeの設定画面に移動します。


そして、下の画像のようにExperimental Web Platform featuresをenableに設定します。


その後ブラウザを再起動すれば、もうES modulesが使用可能です!

サンプルソース

実際には以下のように書くとES modulesとして使用可能になります。
scriptタグにtype="module"と書くのが味噌です!

HTML

<script type="module" src="./main.js"></script>

main.js

import hoge from './say_hello.js';
hoge('steelydylan');

say_hello.js

export default (text) => {
  const hoge = document.querySelector('#hoge');
  hoge.innerHTML = `
    Hello ${text}!!
  `;
}

実行結果


まとめ

近い将来、BabelやWebpackなどのツールを使わなくてもそのままコードをかける時代がくるかもしれませんね。ただ、npmで公開されているパッケージの多くがimportではなくrequireで書かれていたり、他のモジュールを読み込んでたりするので、そのまま使えません。公開されているパッケージがES modulesに対応してくれればimportして使えるのですが。。。
そこらへんがなんとかならない限り、これから数年はbrowserifyやWebpackが使われ続けるでしょう。
リソースのローディングの都合上、結局bundleされてた方がいいという問題もあります。

参考



堀 悟大

アップルップル フロントエンドエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド