値をファイルの外に出す

01 / 05

出せるのは関数だけじゃない

export default のうしろに書けるのは関数だけじゃない。値ならなんでも出せるんだ。文字列でも数値でも、配列でもオブジェクトでもいいよ。

// shop.jsexport default "そらまめ商店";

02 / 05

受け取る側の書き方は関数のときと変わらない。取り込んだものはふつうの値だから、変数に入っているのと同じように使えるよ。

// main.jsimport shopName from './shop.js';console.log(shopName);

実行結果

そらまめ商店

03 / 05

配列やオブジェクトを別ファイルに置いておくと、中身を直したいときにそのファイルだけ開けばよくなる。処理を書いたファイルを読まずに済むんだ。

値に名前をつけてから出す形もよく使う。読む人にとっては、名前があるほうが何のデータか分かりやすいからね。

// menu.jsconst menu = ["カレー", "うどん"];export default menu;// main.jsimport menu from './menu.js';console.log(menu[0]);

実行結果

カレー

04 / 05

export default は「このファイルの代表」を出す書き方。だから1つのファイルに1回しか書けない。2回書くとエラーになって、そのファイルは丸ごと読み込めなくなるよ。

出したいものが複数あるときの手は2つ。

// settings.jsconst settings = {  name: "そらまめ商店",  open: 9,};export default settings;

05 / 05

どれを別ファイルにすればいいか迷ったら、変わりやすいものから出すといいよ。商品の一覧、料金、あいさつの文。あとから何度も書き換える場所だね。

処理のほうは、いちど正しく書けたらしばらく触らない。だから触る回数が多いデータを外に出しておくと、開くファイルが減るんだ。

それじゃあ、値を出し入れしてみよう。