非同期JavaScript：API通信とモジュール
named export と default export
このレッスンで分かること
- 名前を付けて何個でも出すのが named export、主役を 1 つだけ出すのが default export です
- 出しかたと受け取りかたは対になっていて、片方だけ変えると読み込めません
波かっこを 1 組間違えるだけで読み込めなくなる
import の行は、見た目がよく似ているのに 2 通りあります。書き分けを外すと、呼び出す行まで進む前にページごと止まります。
JavaScript
// works.js が export default class WorkCollection を出しているとき
import { WorkCollection } from "./works.js"; // 止まる
import WorkCollection from "./works.js"; // 正しい波かっこの有無は好みではなく、出す側が選んだ出しかたに合わせるものです。だから、他人のファイルを使うときはまず「どちらで出しているか」を見ます。
名前で受け取る named export
宣言に export を付けるだけの形です。受け取る側は波かっこの中に、同じ名前を書きます。
JavaScript
// works.js
export const CATEGORIES = ["site", "card", "table"];
export function publishedWorks(works) {
return works.filter((work) => work.published);
}JavaScript
// app.js
import { CATEGORIES, publishedWorks } from "./works.js";要らないものは書かなければ受け取りません。宣言の場所に export を散らす代わりに、ファイルの最後に export { publishedWorks, sortByViews }; とまとめて書く形もあります。何が公開されているかが 1 か所で分かるので、ファイルが育ってきたらこちらが読みやすくなります。
名前がすでに使われているときは as で付け替えられます。ただし、これはぶつかったときの逃げ道であって、読みやすくするための手ではありません。同じものが呼ぶ側ごとに違う名前で呼ばれていると、検索で追えなくなります。
主役を 1 つだけ出す default export
export default は 1 つのファイルに 1 つだけ書けます。受け取る側は波かっこを使わず、好きな名前を付けられます。
JavaScript
// tag-badge.js
export default function createTagBadge(work) { /* ... */ }
export const BADGE_CLASS = "tag-badge";JavaScript
// app.js
import createTagBadge, { BADGE_CLASS } from "./tag-badge.js";default のぶんを先に書き、そのあとに波かっこを続けます。順番は決まっています。
名前が自由なのは便利ですが、裏返すと呼ぶ側ごとに名前がばらつくということでもあります。迷ったら named export を選んでください。default export が向くのは、そのファイルが 1 つのものだけを提供していて、名前がファイル名からそのまま読める場合です。tag-badge.js から createTagBadge が出てくるなら分かりますが、utils.js から名無しのものが出てくると読めません。
| 出しかた | 出す側 | 受け取る側 | 1 ファイルの個数 |
|---|---|---|---|
| named | export function f() {} | import { f } from "./a.js" | 何個でも |
| default | export default function f() {} | import f from "./a.js" | 1 つだけ |
| 名前替え | export { f as g } | import { f as g } from "./a.js" | 何個でも |
よくある間違い
- named を波かっこ無しで受け取る —
import publishedWorks from "./works.js";は default を取りに行く書きかたです。default が無いファイルではundefinedになります export defaultを 2 つ書く —A module cannot have multiple default exportsで止まります。2 つ出したいなら、どちらか一方を named export にします
