コンポーネントのインポートとエクスポート
コンポーネントの魅力は再利用のしやすさにあります。他のコンポーネントを組み合わせて新しいコンポーネントを作ることができるのです。しかし、コンポーネントのネストが増えてくると、それらを別のファイルに分割したくなってきます。これにより、欲しいファイルを簡単に見つけ出し、より多くの場所でコンポーネントを再利用できるようになります。
このページで学ぶこと
- ルートコンポーネントファイルとは何か
- コンポーネントのインポート・エクスポートの方法
- デフォルトインポート/エクスポートと名前付きインポート/エクスポートの使い分け
- 1 つのファイルから複数のコンポーネントをインポート・エクスポートする方法
- コンポーネントを複数のファイルに分割する方法
ルートコンポーネントファイル
初めてのコンポーネントでは、Profile コンポーネントと、それをレンダーする Gallery コンポーネントを作成しました。
function Profile() { return ( <img src="https://react.dev/images/docs/scientists/MK3eW3As.jpg" alt="Katherine Johnson" /> ); } export default function Gallery() { return ( <section> <h1>Amazing scientists</h1> <Profile /> <Profile /> <Profile /> </section> ); }
これらのコンポーネントは今のところ、ルート (root) コンポーネントファイル（この例では App.js という名前）に置かれています。セットアップによっては、ルートコンポーネントは別のファイルに存在するかもしれません。Next.js のようなファイルベースのルーティングがあるフレームワークを使っている場合、ルートコンポーネントはページごとに異なるものになります。
コンポーネントのエクスポートとインポート
もし将来ランディングページを変更して科学書のリストを表示したくなった場合はどうでしょうか。あるいはプロフィールを別の場所に表示したくなった場合は？ Gallery や Profile はルートコンポーネントファイル以外の場所に置きたくなるでしょう。これによりコンポーネントはよりモジュール化され、他のファイルから再利用可能になります。コンポーネントの移動は以下の 3 ステップで行えます。
- コンポーネントを置くための新しい JS ファイルを作成する。
- デフォルトエクスポートあるいは名前付きエクスポートのいずれかを使い、関数コンポーネントをそのファイルからエクスポートする。
- そのコンポーネントを、利用する側のファイルでインポートする。デフォルトエクスポートされたのか名前付きエクスポートされたのかに応じて、対応するインポート手法を使う。
以下の例では、Profile と Gallery の両方が、App.js から Gallery.js という新しいファイルに移動しています。App.js を書きかえて、Gallery.js から Gallery をインポートするようにできます。
import Gallery from './Gallery.js'; export default function App() { return ( <Gallery /> ); }
元の例がどのようにして 2 つのコンポーネントファイルに分割されたか確認しましょう。
Gallery.jsは：Profileを定義しているが、これは同一ファイル内でしか使われてないのでエクスポートしていない。- デフォルトエクスポートとして
Galleryコンポーネントをエクスポートしている。
App.jsは：Gallery.jsからGalleryをデフォルトインポートしている。- ルートの
Appコンポーネントをデフォルトエクスポートしている。