はじめに
初心者の自分がつまずいた箇所を、自分なりにまとめて共有したいと思います。
同じ初心者の方が悩みやすいポイントだと思うので、参考にしていただければ幸いです。
もし間違いや不正確な点がありましたら、ぜひご指摘いただけると助かります。
よろしくお願いします。
(本記事は、理解整理を目的としたアウトプットも兼ねています。)
importとは（ES Modules）
importとは、別のファイルで定義・公開された値や関数を、このファイル内で利用するための宣言です。
ES Modulesは、JavaScriptに標準で組み込まれたファイルを分割し、依存関係を明示的に管理する仕組みであり、import はその中で他のモジュールを読み込むための構文です。
補足
importの目的としては「このファイルは、何に依存しているか」を言語レベルで強制的に書かせる仕組みによりグローバル汚染を防ぐ、ファイルの責務を明確にする、依存関係が見えるを成し遂げています。
具体例として二つ載せておきます。
（例１）
import { name, greet } from "./user.js";
export const name = "Taro";
export function greet() {}
（例２）
import greet from "./user.js";
export default function greet() {}
exportとexport defaultについて
先ほどの例１、例２にはそれぞれ二つの書き方を載せました。この二つの違いを把握して理解することが一番重要だと思います。
まず簡単に二つの違いについてexport は「名前付き export」で、1ファイルから複数の値を公開できます。
export default は「デフォルト export」で、そのファイルから1つだけ公開できる特別な export です。default export は名前を持たないため、import 側で自由に名前を付けられる点が特徴です。また、慣習的に「そのファイルで一番重要なもの」をdefault export にすることが多いです。
exportとは
exportは複数の要素を名前付きで渡すことができます。importするときは{}で括り同じ名前を取り出します。
（例１）
import { name, greet } from "./user.js";
export defaultとは
次にexport defaultとは基本ファイルに一つです。importする時は{}を括らずそのまま名前を記載します。また、同じ名前にしなくても良いのです。
（例２）
import greet from "./user.js";
また、二つ合わせて呼ぶこともできます。
（例３）
import greet, { version } from "./module.js";
export const version = "1.0";
export default function greet() {}
exportで名前を変える方法
exportのみで名前を変更することもできます。asを使用して好きな名前で使用することができます。
（例４）
import { fetchUser as fetchUserApi } from "./api/user.js";
終わりに
ES Modules は単なる文法ではなく、JavaScriptでコードを安全に分割し、依存関係を管理するための設計思想だと感じました。
まだ理解が浅い部分もありますが、今回まとめた内容が、同じように import / export に悩んでいる方の参考になれば嬉しいです。
今後も学習の過程で得た気づきを、少しずつ共有していければと思います。