名前を付けていくつも出す

01 / 06

1つのファイルから2つ出したい

足し算と引き算、どちらも「計算」の仲間だから同じファイルに置きたい。でも export default は1ファイルに1つだけだったよね。

そういうときに使うのが名前付きエクスポート。名前を付けたまま、いくつでも外に出せる書き方だよ。

02 / 06

出したいものの前に export と書く。default は付けない。それだけで、その名前のまま外から見えるようになるよ。

// tools.jsexport function tasu(a, b) {  return a + b;}export function hiku(a, b) {  return a - b;}

03 / 06

受け取る側は { } の中に、欲しいものの名前を書く。使わないものは書かなくていい。

下の例では hiku も出ているけれど、取り込んでいないから main.js の中では使えない。必要なぶんだけ持ってくる、という感覚だね。

// main.jsimport { tasu } from './tools.js';console.log(tasu(3, 4));

実行結果

04 / 06

名前付きは export default と違って、出した側の名前で受け取るのがきまり。{ tasu } を { tashizan } に書き換えると見つからなくなるよ。

複数まとめて取り込むときは、カンマで並べる。1行が長くなるだけで、やっていることは同じだね。

import { tasu, hiku } from './tools.js';console.log(tasu(10, 4));console.log(hiku(10, 4));

実行結果

14
6

05 / 06

export は関数だけのものじゃない。export const 名前 = 値; と書けば、値にも名前付きで出せるよ。

// shop.jsexport const shopName = "そらまめ商店";export const openHour = 9;

06 / 06

道具を何個も置いておくファイルなら名前付き、1つのクラスだけを置くファイルなら default。だいたいそんな感じで選ばれているよ。

それじゃあ、名前を付けて出してみよう。