<h1 id="ecmascript-modules-(esm)" data-line="0" class="code-line">
<a class="header-anchor-link" href="#ecmascript-modules-(esm)" aria-hidden="true"></a> ECMAScript Modules (ESM)</h1>
<ul data-line="1" class="code-line">
<li data-line="1" class="code-line">JavaScriptの標準規格で定義されたモジュールシステム</li>
<li data-line="2" class="code-line">ブラウザとNode.jsで動作</li>
<li data-line="3" class="code-line">静的にモジュールを解析し、依存関係を解決</li>
<li data-line="4" class="code-line">型情報を含む</li>
<li data-line="5" class="code-line">デフォルトエクスポートのみ許可</li>
<li data-line="6" class="code-line">相対パスと絶対パスの両方をサポート</li>
<li data-line="7" class="code-line">簡潔な構文</li>
<li data-line="8" class="code-line">動的importや名前空間など、新しい機能をサポート</li>
</ul>
<h1 id="commonjs" data-line="10" class="code-line">
<a class="header-anchor-link" href="#commonjs" aria-hidden="true"></a> CommonJS</h1>
<ul data-line="11" class="code-line">
<li data-line="11" class="code-line">Node.jsコミュニティで開発されたモジュールシステム</li>
<li data-line="12" class="code-line">Node.jsでのみ動作</li>
<li data-line="13" class="code-line">実行時にモジュールをロードし、依存関係を解決</li>
<li data-line="14" class="code-line">型情報は含まない</li>
<li data-line="15" class="code-line">すべてのエクスポートを許可</li>
<li data-line="16" class="code-line">相対パスのみサポート</li>
<li data-line="17" class="code-line">複雑な構文</li>
<li data-line="18" class="code-line">CommonJSモジュールのエコシステムとの互換性</li>
</ul>
<h1 id="%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E9%81%95%E3%81%84" data-line="20" class="code-line">
<a class="header-anchor-link" href="#%E3%81%9D%E3%81%AE%E4%BB%96%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> その他の違い</h1>
<table data-line="21" class="code-line">
<thead data-line="21" class="code-line">
<tr data-line="21" class="code-line">
<th></th>
<th>import</th>
<th>require</th>
</tr>
</thead>
<tbody data-line="23" class="code-line">
<tr data-line="23" class="code-line">
<td>動的import</td>
<td>可能</td>
<td>不可</td>
</tr>
<tr data-line="24" class="code-line">
<td>名前空間</td>
<td>可能</td>
<td>不可</td>
</tr>
<tr data-line="25" class="code-line">
<td>サイクル依存</td>
<td>検出可能</td>
<td>検出困難</td>
</tr>
<tr data-line="26" class="code-line">
<td>Tree Shaking</td>
<td>可能</td>
<td>困難</td>
</tr>
</tbody>
</table>
<h2 id="%E5%8B%95%E7%9A%84import" data-line="28" class="code-line">
<a class="header-anchor-link" href="#%E5%8B%95%E7%9A%84import" aria-hidden="true"></a> 動的import</h2>
<p data-line="30" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0cde350b148e4" src="https://embed.zenn.studio/card#zenn-embedded__0cde350b148e4" data-content="https%3A%2F%2Fzenn.dev%2Fbtc%2Farticles%2F240403_dynamic_require" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/btc/articles/240403_dynamic_require" style="display:none" target="_blank">https://zenn.dev/btc/articles/240403_dynamic_require</a></p>
<h2 id="%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E4%BE%9D%E5%AD%98" data-line="32" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E4%BE%9D%E5%AD%98" aria-hidden="true"></a> サイクル依存</h2>
<p data-line="33" class="code-line">サイクル依存とは、モジュールAがモジュールBに依存し、モジュールBがモジュールAに依存するような依存関係のことです。</p>
<p data-line="35" class="code-line">importの場合、モジュール解析時に依存関係を静的に解析するため、サイクル依存を検出することができます。</p>
<p data-line="37" class="code-line">一方、requireの場合、モジュールロード時に依存関係を動的に解決するため、サイクル依存が発生した場合、無限ループに陥る可能性があります。</p>
<div class="code-block-container"><pre class="language-javascript"><code class="language-javascript code-line" data-line="39"><span class="token comment">// モジュールA.js</span>
<span class="token keyword">const</span> <span class="token constant">B</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./B"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// モジュールB.js</span>
<span class="token keyword">const</span> <span class="token constant">A</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">"./A"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// エラー: サイクル依存が発生</span>
</code></pre></div><h2 id="javascript%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%80%81-tree-shaking-%E3%81%A8%E3%81%AF%EF%BC%9F" data-line="49" class="code-line">
<a class="header-anchor-link" href="#javascript%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%80%81-tree-shaking-%E3%81%A8%E3%81%AF%EF%BC%9F" aria-hidden="true"></a> JavaScriptにおける、 Tree Shaking とは？</h2>
<p data-line="51" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__e63e393163377" src="https://embed.zenn.studio/card#zenn-embedded__e63e393163377" data-content="https%3A%2F%2Fzenn.dev%2Fbtc%2Farticles%2F240403_tree_shaking" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/btc/articles/240403_tree_shaking" style="display:none" target="_blank">https://zenn.dev/btc/articles/240403_tree_shaking</a></p>
<h1 id="%E3%81%A9%E3%81%A1%E3%82%89%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%B9%E3%81%8D%E3%81%8B" data-line="53" class="code-line">
<a class="header-anchor-link" href="#%E3%81%A9%E3%81%A1%E3%82%89%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E3%81%B9%E3%81%8D%E3%81%8B" aria-hidden="true"></a> どちらを使用するべきか</h1>
<ul data-line="54" class="code-line">
<li data-line="54" class="code-line">ブラウザで動作するコード: importを使用</li>
<li data-line="55" class="code-line">Node.jsで動作するコード: requireを使用</li>
<li data-line="56" class="code-line">新しい機能を使用したい場合: importを使用</li>
<li data-line="57" class="code-line">既存のCommonJSモジュールと互換性を保ちたい場合: requireを使用</li>
</ul>
<h1 id="%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B" data-line="59" class="code-line">
<a class="header-anchor-link" href="#%E9%96%A2%E9%80%A3%E8%A8%98%E4%BA%8B" aria-hidden="true"></a> 関連記事</h1>
<h2 id="import-%E3%81%A8-require-%E3%81%AE%E9%81%95%E3%81%84" data-line="61" class="code-line">
<a class="header-anchor-link" href="#import-%E3%81%A8-require-%E3%81%AE%E9%81%95%E3%81%84" aria-hidden="true"></a> import と require の違い</h2>
<p data-line="63" class="code-line"><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__f77d7e3b3a0e9" src="https://embed.zenn.studio/card#zenn-embedded__f77d7e3b3a0e9" data-content="https%3A%2F%2Fzenn.dev%2Fbtc%2Farticles%2F240403_js_import_require" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://zenn.dev/btc/articles/240403_js_import_require" style="display:none" target="_blank">https://zenn.dev/btc/articles/240403_js_import_require</a></p>


ECMAScript Modules (ESM) と CommonJS

JavaScriptにおける、 Tree Shaking とは？

Discussion