JavaScriptファイルのモジュール化 import / export の使い方
本記事では、JavaScriptのモジュールをインポート・エクスポートしてファイルを分割する方法を解説します。
目的としては、１つのファイルが長くなりすぎないように、機能ごとなどでファイルを区切ってモジュール化します。
exportで読み出せるようにして、importで読み込むというだけの手順です。
GitHub
以下のGitHubにサンプルコードを上げています。
https://github.com/it-web-life/javascript_import_export
準備：環境構築
そのままimport・exportするとChromeでCORSなどエラーで問題が起きたりするので、今回はwebpack-dev-serverを使って解説します。
もし動作確認したい場合には、基本的にはGitHubからコードを引っ張ってきて、「yarn install」してから「yarn dev」すれば確認できます。
※webpack.config.jsのentryコメント部分を切り替えれば、それぞれ試すことができます
環境構築
念の為、環境構築した内容を載せます。ここは読み飛ばしていただいて構いません。次の「モジュールを呼び出す基本」から見ていただければ大丈夫です。
1. yarn init でpackage.jsonを作成
2. yarn add -D webpack webpack-cli webpack-dev-server
3. webpack.config.jsを作成
module.exports = {
mode: 'development',
entry: './src/script/case01/index.js',
// entry: './src/script/case02/index.js',
// entry: './src/script/case03/index.js',
// entry: './src/script/case04/index.js',
output: {
path: __dirname + '/dist/',
filename: 'bandle.js',
},
devServer: {
host: '0.0.0.0',
disableHostCheck: true,
contentBase: __dirname + '/dist/'
},
devtool: 'inline-source-map'
}entry部分のPathを変更して、実行するディレクトリを切り分けます。
4. package.jsonに以下のscriptを追記します。
"scripts": {
"dev": "webpack-dev-server --hot --inline",
},これで、yarn devで起動して、localhost:8080にて、ChromeDevTool等のconsoleを確認すると動作確認できます。
JSファイルの書き換えで自動でビルド＆リロードしますが、webpack.config.jsの「entry」を変更した時は、「control + C」で停止してから、再度yarn devし直して下さい。
モジュールを呼び出す基本
「import { 【呼び出す変数・関数】 } from '【モジュールのパス】'」で、モジュールを呼び出すことができます。
※呼び出す「モジュールのパス」にて、jsの拡張子は省略可能です。
▼src/script/case01/index.js
import { calcPlus } from './calc';
const answer = calcPlus(1, 2);
console.log('answer =', answer);▼src/script/case01/calc.js
export const calcPlus = (a, b) => a + b;▼console
answer = 3実行すると、呼び出したcalcPlus関数を使って計算ができています。
もし仮に複数あるときはカンマで区切って複数呼び出すことが可能です。
例） import { calcPlus, calcMinus } from './calc';
エイリアス「as」を使う
「import { calcPlus as plusFunction } from './plus';」のような「A as B」の形でエイリアスとして扱うことができるようになります。
▼src/script/case02/index.js
import { calcPlus as plusFunction } from './calc';
const answer = plusFunction(1, 2);
console.log('answer =', answer);▼src/script/case02/calc.js
export const calcPlus = (a, b) => a + b;▼console
answer = 3エイリアスの「plusFunction」で問題なく計算が実行できています。
※エイリアスにしているため上記の例ではもとの「calcPlus」はそのまま使うことはできません。
ワイルドカード「*」を使う
「*」を使ってワイルドカードで呼び出しができます。
呼び出すモジュールからimportするものが多くなると、ワイルドカードを使ってまとめて呼び出す方がよいケースもあります。
▼src/script/case03/index.js
import * as calc from './calc';
const answer1 = calc.calcPlus(2, 1);
console.log('plus answer =', answer1);
const answer2 = calc.calcMinus(2, 1);
console.log('minus answer =', answer2);▼src/script/case03/calc.js
// plus
export const calcPlus = (a, b) => a + b;
// minus
export const calcMinus = (a, b) => a - b;▼console
plus answer = 3
minus answer = 1ワイルドカードで./plus.jsモジュール内のexportされているファイルをすべて読みだして使えるようになっています。
export defaultを使う
モジュール内でexport defaultを指定すると、そのモジュールの読み込みをしてそのまま使うことができます。defaultはモジュール内で１度しか使えません。
オブジェクトでexport defaultすれば複数渡すことができます。
①オブジェクトでexport default
▼src/script/case04/index.js
import calc from './calc';
const answer1 = calc.calcPlus(2, 1);
console.log('plus answer =', answer1);
const answer2 = calc.calcMinus(2, 1);
console.log('minus answer =', answer2);▼src/script/case04/calc.js
// plus
const calcPlus = (a, b) => a + b
// minus
const calcMinus = (a, b) => a - b
export default {
calcPlus,
calcMinus,
};▼console
plus answer = 3
minus answer = 1export default {オブジェクト} の形で複数をdefaultでexportしています。ワイルドカードの時と同じような形で使えます。
②通常のexport
▼src/script/case04/index.js
import multi from './multiple';
const answer3 = multi(2, 3);
console.log('multiple answer =', answer3);▼src/script/case04/multiple.js
const calcMultiple = (a, b) => a * b;
export default calcMultiple;※「export default (a, b) => a * b;」としてもよいです
▼console
multiple answer = 6export default 関数の形でmultiple.jsにてcalcMultipleをexportし、index.jsにてimportしたmultiをそのまま使えています。
まとめ：import, exportを使ってモジュール化ができる
import, exportを使ってモジュールの読み込み方法をお伝えしました。
▼import/exportで使えるエイリアス・ワイルドカード・default
as
エイリアスが使えます。*
ワイルドカードが使えます。default
export defaultが使えます。
ご参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています