エクスポート、インポート【JavaScript】

f:id:morning-output:20200929081231j:plain

ファイルを分割する際は、それぞれのファイルを関連付け、値を渡す必要があります。

export default クラス名;

「export default クラス名」を記述することでクラスをエクスポート（出力）し、他のファイルに渡すことができます。

クラスだけではなく、文字列・数値・関数などの値もエクスポート可能です。

import クラス名 from "./ファイル名";

「import クラス名 from "./ファイル名"」を記述することでインポート（読み込み）することができます。ファイルの拡張子「.js」は省略できます。

「export default」はデフォルトエクスポートと呼ばれ、エクスポートしたファイルがインポートされると自動的に「export default 値」がインポートされます。エクスポート時の値の名前と、インポート時の値の名前に相違があっても問題ありません。

しかしデフォルトエクスポートでは、1ファイルに1つの値しか出力できません。

export { 名前1, 名前2 };

import { 名前1, 名前2 } from "./ファイル名";

名前付きのエクスポートはdefaultを記述せずに、値の名前を{ }で囲んで指定します。そのため複数の定数やクラスを指定できます。インポートも同様に行います。

ファイルの指定で使用した「./」は同じディレクトリ内であることを意味します。このような書き方のことを相対パスと言います。ちなみにディレクトリとはフォルダのような概念です。

一つ上の階層に移動する場合は「../」と書きます。

import 定数名 from "パッケージ名";

パッケージとは、プログラムをひとまとめにしたものです。自分のプログラムの中に組み込んで使うことができます。

パッケージも「import」を用いて読み込む必要があります。

▼npmパッケージを紹介した記事を見つけたので貼っておきます。

朝活のブログ