質問: 【モダンJavaScript #7】モジュールの基礎を理解しよう!名前空間(スコープ)の問題とはおさらば!【フロントエンドエンジニア講座】 - YouTube を見てモジュールの形式が2つあることがわりました。 下記のNextJSのドキュメントに ``` export default function Layout({ children }) { return {children} } ``` や ``` import Link from 'next/link' import Layout from '../../components/layout' export default function FirstPost() { ... ``` 等ありますが、`CommonJS形式`, `ES Modules形式`どちらの形式なのでしょうか? 見た目で(import文やexport文の書き方で)判断つくものなのでしょうか?
回答: `import` や `export` の記法自体は、 ESM モジュール方式の記法です。 ただ、それが実際に実行される際にその形式が利用されているかというと違う場合が多く、 NextJS のようなフロントエンドフレームワークの場合、そのコードは実際に実行ないし配布される場合には、 babel や webpack により処理されるのが普通です。 そして babel には、特定のモジュール記法のコードを別のモジュール記法に変換する機能があります。なので、裏でどうなっているかはあまり意識されないことが多いかと思います。 まとめますと、 * `import` / `export` の記法は ESM のモジュール方式の記法です。 * ただ実際に ESM モジュールで実行されているかというと、そうとは限りません。