私は普段phpを書いており、最近はVue.js, Nuxt.jsも触っているのですが、
動かすことのできるコードは書けています。
Vue, Nuxt を触る前まではES5しか書いたことがなく、
ほぼ毎日レベルで見ている import, export を正直理解できていなかったので、
記事にしてまとめました。
import, export is 何
変数・関数・クラスを文字通りexportすることができ、そのexportされたものをimportすることで、外部モジュールに記載された処理等々を使うことができる機能。
phpでいえば importは require で、exportはpublic修飾子にあたるようなもの。
export はクラスで言う、public修飾子？
public修飾子というわけではないが、exportをしなければ、そのファイル内に機能が閉じる。
そのためexportをすれば外部から参照する手段となるので、そういう意味では "public" という認識で間違いない。
export の名前付き、デフォルトについて
名前付き
変数・関数・クラスに付けられた名前でexportする。デフォルト
変数・関数・クラスに名前を付けても付けなくてもいい。1つのファイルに1回しか使えない。
import の名前付き、デフォルトについて
exportの方法が2種類あるのでimportの方法も2種類ある。
- 名前付き
import {needCurlyBrace} from './Foo.js';
- デフォルト
名前付きのように波括弧は不要だが、import時に命名する必要がある
import Bar from './Foo.js';
import, export の構文について
色々あるので、下記MDNを参照してください。
export で被った名前をimportしたらどうなるの？
名前が被っている場合は、importできない。import時に as を加えて別名にする必要あり。
importしたファイル内に同じ名前があった場合は？
こちらも同様、importできない。import時に as を加えて別名にする必要あり。
名前付きのほうが良く無い？import側で毎回命名って辛く無い？
そう思う。し、世間もそのようである。
export defaultを使わないようにしている記事もいくつかあるから、そうなんだと思う。
TypeScript Deep Dive でさえもそのような記事がある。
また、Tree-Shaking的な観点でもやっぱりアンチパターンのようです。
ちなみにJetbrains WebStormではdefaultで使われているものもコードジャンプできた。けどね。
もしできなかったらどこになにあるか分からなくて地獄だね。
export default 使うタイミングってどこよ？
調べたけど特に見つからなかった。
ご存知の方いらっしゃいましたら教えてください！
まとめ
基本 named export を使おう。
命名はいつも通り気をつけよう。
使っていない（無駄な）import は避けよう。
編集後記
以前ざっと import, export を調べた時は、
基本的に export default 推奨、って結構書かれてた気がするんだけど、全くの真逆だった。
調べると件数は少ないながらも、そのような記述している昔の記事がでてくるので、
トレンド的にそのような時もあったのかな。。