import
- ES6から利用できる書き方
- ブラウザではそのまま利用できます。(ただ、IEなど古いブラウザだと動かないです。）
- もし対応していないブラウザでも読み込もうと思った場合はbabelなどで変換してwebpackでモジュールバンドルする必要があります。
- ESM(ECMAScript Modules)の読み込みの仕様
babel
ESMをこれに通すとrequire構文に変換してくれます。require文はブラウザでは動作せず、node.js環境でしか動作させることができないのでうっかり変換してブラウザで動かなくなったということがないように考慮する必要があります。
実装
定義
|
1 2 3 |
export const a =() => { console.log('こんにちは'); } |
また、exportが単一の場合はexport defaultを使うことがESlintでは推奨されています。
呼び出し側
|
1 2 |
import { a } from './module' a(); // 「こんにちは」と出力される。 |
importは必ずファイルの上部にまとめて記述する必要があります。（動的には変更できない仕様になっています。）
require
- モジュール化されたJavaScriptファイルを読み込むために使用される。
- CommonJSの仕様でnode.jsがサポートしている記述方法
- サーバーサイドのNode.jsであればそのまま実行できるが、ブラウザではそのまま実行はできない。
書き方
モジュール側
「test.js」というファイルがあるとします。
|
1 2 3 |
module.exports = function() { console.log('テスト!!'); } |
読み込み側
|
1 |
const 変数 = require( 'test.js' ); |
importと異なり、動的にロードできるのでファイルの上部に必ず記述する必要はなく途中に記述しても問題ないです。
どの環境でも動かすには？
Node.jsならそもまま動きますが、ブラウザでは動きません。ブラウザなどでもそのまま実行できるようにするには、webpackなどのモジュールバンドルツールを利用する方法があります。
webpackがブラウザでも動くように変換してくれます。なお、webpackはimportやrequired以外の別のモジュール構文にも対応していたりする万能なツールなのでぜひ抑えるようにしましょう。
この記事へのコメントはありません。