81144


[【モダンJavaScript #7】モジュールの基礎を理解しよう！名前空間（スコープ）の問題とはおさらば！【フロントエンドエンジニア講座】 -
YouTube](https://www.youtube.com/watch?v=VE5wV-V--ag)  
を見てモジュールの形式が2つあることがわりました。

下記のNextJSのドキュメントに

<https://nextjs.org/learn/basics/assets-metadata-css/layout-component>

[code]

    export default function Layout({ children }) {
      return <div>{children}</div>
    }
    
[/code]

や

[code]

    import Link from 'next/link'
    import Layout from '../../components/layout'
    
    export default function FirstPost() {
    ...
    
[/code]

等ありますが、`CommonJS形式`, `ES Modules形式`どちらの形式なのでしょうか？

見た目で（import文やexport文の書き方で）判断つくものなのでしょうか？


CC BY-SA 4.0
2021-08-30T03:43:06.780
81109
2021-09-01T02:31:07.010
2021-09-01T00:59:50.403
9008
9008
question
javascript next.js
NextJSで使われているのはCommonJS形式, ES Modules形式どちらですか？


`import` や `export` の記法自体は、 ESM モジュール方式の記法です。

ただ、それが実際に実行される際にその形式が利用されているかというと違う場合が多く、 NextJS
のようなフロントエンドフレームワークの場合、そのコードは実際に実行ないし配布される場合には、 babel や webpack により処理されるのが普通です。

そして babel
には、特定のモジュール記法のコードを別のモジュール記法に変換する機能があります。なので、裏でどうなっているかはあまり意識されないことが多いかと思います。

まとめますと、

  * `import` / `export` の記法は ESM のモジュール方式の記法です。
  * ただ実際に ESM モジュールで実行されているかというと、そうとは限りません。


CC BY-SA 4.0
2021-09-01T02:31:07.010
81144
2021-09-01T02:31:07.010
754
81109
answer