モジュールシステムとは
モジュールは単なる1つのファイルです。モジュールシステムにおいて、 export と import を利用することで、jsファイル間で変数や関数を相互にやりとりすることができます。
デフォルトエクスポート&インポート
- 1ファイル(モジュール)につき、1エクスポート
- importする際は{ }をつけない
index.js
export defalut name;App.js
import name from "./index,js"名前付きエクスポート&インポート
- 複数エクスポート可能
- エイリアス(as)を指定可能
- importする際は{}をつける
index.js
export const name = "名前"
export const price = "価格"App.js
import { name, price } from "./index.js"モジュールのエントリポイント
※以下、Reactを例に解説します。
以下の3つのコンポーネントがあり、ディレクトリ構成が下記の場合にモジュールのエントリポイントを使用してimportしてあげると簡潔かつ保守性を保ちながら設定することが可能。
(1つのjsファイルから関連するコンポーネントのモジュールを名前付きで複数まとめてエクスポートし、インポートする)
- CalendarInputForm.jsx
フォーム画面(カレンダーの日付をクリックした時画面の入力フォームと想定) - TextInput.jsx
インプットフィールド(選択した日付のイベントを入力するためのフィールド) - Button.jsx
ボタン(入力したイベントを登録するための送信ボタン)
ディレクトリ構成
resources
└js
└components
└calendar
└CalendarInputForm.jsx
└common
└Button.jsx
└TextInput.jsx
└index.js
/resources/js/components/common/index.jsがポイントです。
以下のようにindex.jsで一旦使われる側の/common内のコンポーネントを読み込んで、名前付きエクスポートしてあげることで、
export { defaultasButton } from"./Button";
export { defaultasTextInput } from"./TextInput";使う側のCalendarInputForm.jsxで下記のようにまとめて読み込んで使用することが可能です。
import { Button, TextInput } from"../common/index";なお、直接使われる側のコンポーネントをimportする場合は、以下のように一行一行読み込む必要がある。
import Button from"../common/Button";
import TextInput from"../common/TextInput";まとめ
いかがでしたでしょうか。本記事では、Javascriptのモジュールシステムについて紹介しています。モジュールは単なる1つのファイルです。モジュールシステムにおいて、 export と import を利用することで、jsファイル間で変数や関数を相互にやりとりすることができます。インポート・エクスポートの方法についても解説しています。