Reactでの`import`文について: `{}`を使う場合と使わない場合の違い

Reactを使って開発をしていると、import文に頻繁に出くわします。その際、時々{}を使ってインポートすることがあり、またあるときは使わずにインポートすることがあります。この違いが気になったことはありませんか？今回は、import文での{}の使い方について詳しく説明します。

デフォルトエクスポート（Default Export）とは？

まず、デフォルトエクスポートについて見てみましょう。デフォルトエクスポートは、モジュール（ファイル）が1つの主要な値や関数を外部に公開するための方法です。この場合、インポートする際には{}を使わずに、そのまま名前を指定してインポートします。

例:

// myComponent.js
const MyComponent = () => {
  return <div>Hello, world!</div>;
};
export default MyComponent;

このMyComponentを他のファイルで使いたい場合、インポート文は次のようになります。

// App.js
import MyComponent from './myComponent';

このように、デフォルトエクスポートされたモジュールは{}を使わずにインポートします。

名前付きエクスポート（Named Export）とは？

次に、名前付きエクスポートについて説明します。名前付きエクスポートは、複数の値や関数を1つのファイルからエクスポートする場合に使用されます。この場合、インポートする際には、エクスポートされた名前を{}内に記述してインポートします。

例:

// utilities.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

この場合、utilities.jsファイルからaddとsubtractをインポートする際には、以下のように記述します。

// App.js
import { add, subtract } from './utilities';

名前付きエクスポートされた関数や変数は、{}を使ってインポートする必要があります。

まとめ

Reactにおけるimport文で{}を使うかどうかは、エクスポート方法によって決まります。

• デフォルトエクスポートの場合は、{}を使わずにインポートします。たとえば、主要なコンポーネントや関数を1つだけエクスポートする場合に使われます。
• 名前付きエクスポートの場合は、{}を使ってエクスポートされた名前を指定してインポートします。ユーティリティ関数や複数のエクスポートが必要な場合に使われます。

この違いを理解しておくと、Reactでの開発がさらにスムーズになります。日々の開発やコードレビューで役立ててくださいね。