MENU

モジュールの書き方

こんにちは!りゅうたです!

今回はJavaScriptのモジュールの書き方についてです。
モジュールのimportやexportなどをどのように記述したらいいかまとめましたので参考にしていただければと思います。

目次

モジュールとは?

モジュールとは変数や関数を別のJSファイルから読み込んだり、別のJSファイルへ渡すことができるJavaScriptの機能の1つです。

「JSファイルを複数に分けて管理する」という考え方はモダンな言語を開発する上では必須になってくるので理解しておきたいところです。

事前準備

scriptタグにtype=”module”追加

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

type="module" を記述しないとモジュールとして認識してくれないので記述は必須です。

ファイル構成

ファイル構成は同じ階層にscript.jsshoppingCart.jsを作成しています。

名前つきexport

変数や関数を渡したい場合はエクスポートをするのですが大きく分けて2通りあります。

後から一括でexport{}を記述する

①
const totalPrice = 200
const totalQuantity = 23;

const addToCart = function(product, quantitiy) {
  cart.push({product, quantitiy});
  console.log(`${quantitiy} ${product}`);
}

export {addToCart, totalPrice, totalQuantity}

変数の定義と同時にエクスポートを記述する

export const totalPrice = 237;
export const totalQuantity = 23;
export const addToCart = function(product, quantitiy) {
  cart.push({product, quantitiy});
  console.log(`${quantitiy} ${product}`);
}

前者と後者でどちらにするかは自由です。大きな決まりがないのでご自身が書きやすい方で問題ないですが、もし制作しているプロジェクトにルールがあったらそちらを優先しましょう。

import

次にエクスポートしてきた変数や関数をscript.js側でインポートして出力させてみましょう。

import { addToCart, totalPrice, totalQuantity } from "./shoppingCart.js";

add('pizza', 2); // 2 pizza
add('bread', 5); // 5 bread
add('apples', 4); // 4 apples
console.log( totalPrice, totalQuantity ) //200 23

インポートは import {exportしてきた変数名・関数名} from “exportのファイル名”でインポートできます。
波括弧の中にカンマで繋げて複数の取得が可能となります。

名前空間

const totalPrice = 200
const totalQuantity = 23;

export const addToCart = function(product, quantitiy) {
  cart.push({product, quantitiy});
  console.log(`${quantitiy} ${product}`);
}

export {totalPrice as price, totalQuantity}

最後のexport {totalPrice as price, totalQuantity} こちらです。
一括でエクスポートする際に変数名・関数名の後ろにasをつけてあげることで出力する変数名を変更できます。

逆も然りで、インポートするときにasをつけて名前空間を設定することができます。

import { addToCart, price, totalQuantity as tq } from "./shoppingCart.js";

addToCart('pizza', 2); // 2 pizza
addToCart('bread', 5); // 5 bread
addToCart('apples', 4); // 4 apples
console.log( totalPrice, totalQuantity ) //200 23

default exports

モジュールごとに1回だけエクスポートすることができます。
特徴としては、

  • 波括弧{}が不要。
  • import先で任意の変数名や関数名で記述できる

shoppingCart.jsのexport defaultではfunctionをエクスポートしてますが、インポート先であるscript.jsではaddという名前でインポートしています。

export const cart = [];
export default function(product, quantitiy) {
  cart.push({product, quantitiy});
  console.log(`${quantitiy} ${product}`);
}
import add, {cart} from './shoppingCart.js';
add('pizza', 2);
add('bread', 5);
add('apples', 4);

console.log(cart);
// [
//   {product: 'pizza', quantitiy: 2},
//   {product: 'bread', quantitiy: 5},
//   {product: 'apples', quantitiy: 4}
// ]

まとめ

いかがだったでしょうか?
開発をする上では外せないモジュールについて解説してみました!
ご覧になった方が少しでも参考にしてくれたら嬉しいです!

最後までご覧いただき、ありがとうございます。
ご不明点やご相談、お仕事の依頼はいつでもお気軽にご連絡ください。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次