Zenn
🍮

importの波括弧 `{}` って何??

2023/11/27に公開
JavaScript
フロントエンド
tech

🥗 はじめに

import { A } from './A.js'

だとエラーになっていたところが

import A from './A.js'

で動いたので理由を調べてみた

🐟 要る時

JSファイルで export default としていない時

sample.js
// named export
export const message = "Hello World"; 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Export Sample</title>
</head>
<body>
  
  <script type="module">
    // default import
    import name from './sample.js'; 
    console.log(name);
  </script>

</body>
</html>

ちなみに、複数を一気にimportすることも可能

sample.js
export const A = "Hello";
export const B = "World";

<script>
import {A, B} from './sample.js'; 

console.log(A); // "Hello"
console.log(B); // "World" 
</script>

🍖 要らない時

JSファイルで export default としている時

sample.js
// default export
const name = "John";
export default name;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Export Sample</title>
</head>
<body>
  
  <script type="module">
    // default import
    import name from './sample.js'; 
    console.log(name);
  </script>

</body>
</html>

defaultなしのexportと共存することも可能

sample.js
export const A = "Hello";
export const B = "World";

const C = "!";
export default C;

<script>
import {A, B} from './test.js'; 
import C from './test.js';

console.log(A); // "Hello"
console.log(B); // "World" 
console.log(C); // "!"
</script>

※ ちなみに、export defaultを複数設定することはできない

よくない例
export default const A = 1;
export default const B = 2;

Discussion