【初心者向け】JSXでコンポーネントを別のファイルで利用する方法: "export default" 完全ガイド

JSXにおける「export default」の役割

デフォルトエクスポートとは

JavaScriptでは、モジュールから複数の値をエクスポートできます。その方法には、デフォルトエクスポートと名前付きエクスポートの2種類があります。

• デフォルトエクスポート: モジュールから1つの値のみをエクスポートする

デフォルトエクスポートは、モジュールから唯一のデフォルト値をエクスポートするために使用されます。これは、他のモジュールで特別な名前なしで簡単にインポートできるという利点があります。

JSXにおけるデフォルトエクスポート

JSXでは、コンポーネントを他のファイルで利用できるようにするためにデフォルトエクスポートを使用できます。

例:

// MyComponent.js

export default function MyComponent() {
  return <h1>Hello World!</h1>;
}

上記のコードでは、MyComponentという名前のコンポーネントをデフォルトエクスポートしています。

デフォルトエクスポートされたコンポーネントは、他のファイルでimportキーワードを使ってインポートできます。

// App.js

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

上記のコードでは、MyComponent.jsからデフォルトエクスポートされたMyComponentコンポーネントをApp.jsファイルにインポートし、Appコンポーネント内で使用しています。

まとめ

JSXにおける「export default」は、コンポーネントを他のファイルで利用できるようにするために使用される重要な構文です。デフォルトエクスポートを使用することで、モジュールから簡単に値をエクスポート・インポートすることができます。

補足:

• デフォルトエクスポートは、コンポーネントだけでなく、関数、クラス、オブジェクトなど、他の種類の値にも使用できます。
• モジュールから複数のコンポーネントをエクスポートしたい場合は、名前付きエクスポートを使用する必要があります。

MyComponent.js

export default function MyComponent() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>カウント: {count}</h1>
      <button onClick={handleClick}>カウントアップ</button>
    </div>
  );
}

上記のコードでは、MyComponentという名前のコンポーネントをデフォルトエクスポートしています。このコンポーネントは、useState Hookを使って状態を管理し、ボタンをクリックするたびにカウントを1増やすことができます。

App.js

import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent />
    </div>
  );
}

実行結果

上記のコードを実行すると、ブラウザに以下のような画面が表示されます。

カウント: 0

カウントアップ

ボタンをクリックするたびに、カウントが1ずつ増えていきます。

JSXでコンポーネントを別のファイルで利用する他の方法

名前付きエクスポート

// MyComponent.js

export function MyComponent() {
  return <h1>Hello World!</h1>;
}

export function AnotherComponent() {
  return <h2>Goodbye World!</h2>;
}

インポート時の名前の変更

インポート時に、コンポーネントの名前を変更することができます。

// App.js

import { MyComponent as MyComp } from './MyComponent';

function App() {
  return (
    <div>
      <MyComp />
    </div>
  );
}

デフォルトエクスポート以外にも、名前付きエクスポートやインポート時の名前の変更など、JSXでコンポーネントを別のファイルで利用する方法はいくつかあります。それぞれの方法にはメリットとデメリットがあり、状況に応じて使い分けることが重要です。

• ES6モジュール: ES6モジュールを使用すると、デフォルトエクスポートや名前付きエクスポートよりも簡潔なコードを書くことができます。
• CommonJS: CommonJSは、Node.jsなどの環境で使用されるモジュールシステムです。

これらの方法は、React公式ドキュメントやその他のチュートリアルで詳しく説明されています。

おすすめの学習方法:

• サンプルコードを参考に自分でコードを書いてみる

これらの方法を組み合わせることで、JSXでコンポーネントを別のファイルで利用する方法をより深く理解することができます。