deve.K

エンジニアが未来を切り開く。

React.jsでのインポートとエクスポートとは 基礎

reactでのエクスポートとインポート

Reactを学び始めたときにまず気付く初期の構文のいくつかは、『インポート』と『エクスポート』というフレーズを目にする事がほとんどかと思います。

これらの用語は何なのか?またReactにとって非常に重要な理由は何?どの側面がそれらを必要とするのか?これらのまだ非常に新しい概念を初学者様にそれらをここで説明することになります。

エスクポートとインポートの役割と概念

React.jsでインポート・エクスポートすると、モジュラーコードを記述できます。

コードを複数のファイルに分割する事が可能です。

インポートすると別のファイルのコンテンツを使用できますが、エクスポートするとファイルのコンテンツをインポートできるようになります。

これらは難しく考える必要性はありません、我々の世界でも何処かに『出入り』したりします、これと同じ事が言えます。

建物のドアを開けると別々の部屋へ分割されており、それら部屋への出入りを制御します。

建物の規模が大きいほど、個別の小さな分離が必要になります。

それら個別に分離された部屋はReactコンポーネントだと思って下さい。

JavaScriptでは、大きなファイルの必要性がそれぞれ独自の目的を持つ小さなコンポーネントの必要性を示しております。

Reactはモジュール式となります。

つまり柔軟性と適応性がありますが、アプリケーションの各部分(コンポーネント)がそれ自体に接続する方法を必要とします、情報の受け渡しは主にこれら2つのキーフレーズによって処理されます。

これはJavaScriptモジュールで構成されていますが何かしらの方法で接続されていない限りは、各モジュールはアプリの他の部分から分離されたままになります。

インポートとエクスポートの背後にある基本的な考え方は、複数のJavaScriptファイル間で分離されたコンテンツを交換することです。

エクスポート・インポートを使用すると、React開発者はコンポーネントを複数のファイルに分割できますがそれだけではなく必要に応じて、接続された複数のコンポーネントを1つのファイルに入れることも可能となります。

CRA(Next.jsも含む)を使用している場合はすでに設定がされている為、これらをすぐに使用する事が可能です。

Webpackを使用し独自でセットアップしてる場合は設定をしなければいけません。

Reactエクスポートとインポート扱い方

モジュールをエクスポートするソースファイルで値が変更された時、インポートされたすべての場所で値が更新されます。

exportでは、デフォルトで厳密モードのルールに従って自動的に動作致します。

基本的には2つのタイプのエクスポートがあります。

『named』と『default』エクスポートとなります。

名前付きエクスポートを使用して、必要な数をエクスポートしたり、まったくエクスポートしないことも可能となります。

ファイルごとに1つのエクスポートタイプしか存在できないため、デフォルトのエクスポートはより制限されます。

まずは名前付きエクスポートでReactコンポーネントをエクスポートする例を見てみましょう。

名前付きエクスポートを使用するのは、1つのファイルの中に複数のコンポーネントがある場合となります。

export const Hello = () => {
  return (
    <div className="App">
      <h1>Hello, how are you?</h1>
    </div>
  );
}

export const Reply = () => {
  return (
    <div className="App">
      <h1>Yeah, how about you?</h1>
    </div>
  );
}

これらの複数コンポーネントを別のファイルにインポートが可能となります。

// test2.jsxファイル

import {Hello, Reply} from "./components/test1.jsx";

これらは名前でインポートするため、名前付きエクスポートと呼ばれます。

ソースファイルへのパスを指定します。またソースファイルと同じ名前を使用し、波括弧で囲んであげます。

同じ名前という事はソースファイルと相互に関連付けている事になります、バインディング名と言います。

構文的には、波括弧はデフォルトのコンポーネントではなく、名前付きインポートまたはエクスポートを表します。

名前付きエクスポートをインポートするときにエイリアスを使用することもできます、ファイルに衝突がある場合は『as』を使用し名前の変更が可能となります。

import {Hello as Greet} from "./components/test1.jsx";

また必ずしも波括弧を使用する必要性はありません、それはデフォルトのエクスポートを使用します。

つまりデフォルトのエクスポートをインポートするときは、波括弧を使用しません。

export default function App()  {
  return (
    <div className="App">
      <h1>Hello world!</h1>
    </div>
  );
}
import Default_App from "./App.js";

気付いた方はいらっしゃいますか? そう、インポートの際に波括弧を使用しないだけではなく名前がバインディング名ではありません。

ソースファイルから同じ名前を使用する必要がありません。

理由が何であれ、ファイルのパスが正しい限りは任意の名前を付けることができます。

つまりexport defaultでは名前付きエクスポートとは違い自由性があります。

しかしデフォルトのエクスポートの唯一の欠点は、ファイルごとに1つのコンポーネントにしか適用できないことです。

名前付きエクスポートの場合では、1つのファイルの中に複数のコンポーネントがあったとしてもエクスポートが可能だったのを前述でも垣間見たはずです。

モジュールはデフォルトのエクスポートを1つだけ持つことができます、つまりシングルエクスポートです。

1つのコンポーネントにしか適応ができない例では最も分かりやすのはreact-routerを使用した場合です。

import { Routes } from "@react/router";
import My_Home from "./components/home.js";
import About from "./components/about.js";
import Contact from "./components/contact.js"

const Routes = () => {

return (
    <Routes>
<Route path="home" element={<My_Home />} />
<Route path="about" element={<About />} />
<Route path="contact" element={<Contact />} />
    </Routes>
  );

}

注意点は、React Routerライブラリを使用しReact.lazyを使用することでルーティングのコード分割を導入する事が可能ですが、React.lazy は現在ではデフォルトエクスポートのみをサポートしています。

デフォルトエクスポートでは、個別に定義し参照する事も可能となります。

const App = () => {
  return (
    <div className="App">
      <h1>Hello world!</h1>
    </div>
  );
}

export default App //個別に定義

これはエクスポートは、開発者によって意見が変わります、一部の方々には個別に定義してくれた方が読みやすいと思われる方もいらっしゃいます。

臨機応変に扱えるように心掛けて下さい。

それらを組み合わせ

デフォルトのエクスポートと名前付きのエクスポートを1つのファイルに統合(組み合わせ)る事が可能です。

export const NamedComponent1 = () => {};

export const NamedComponent2 = () => {};

const DefaultComponent = () => {};

export default DefaultComponent;

インポートの際は変わりはありません、名前付きエクスポートは波括弧で囲まれ、デフォルトはそのままテキストとなります。

import DefaultComponent, { NamedComponent1, NamedComponent2 } from "./test.js"

Reactは、デフォルトのコンポーネントと名前付きコンポーネントの両方をエクスポートするライブラリとなっております。

まとめ

名前付きエクスポートを使用すると、関連する多くのコンポーネントまたはモジュールを1つのインポートとして統合できます。

デフォルトエクスポートされたコンポーネントは、インポートがはるかに簡単となります。

名前付きエクスポートとデフォルトエクスポートは、Reactからのものではありません、それらはES6の機能となっております。

つまりこれらはReactエコシステムに与える影響という言うことになります。

ですので名前付きエクスポートとデフォルトエクスポートのどちらを選択したとしても、あなたのアプリケーションが破損する心配はありません。

ですが違いを知っておくと、理解がより深まりソフトウェアアーキテクチャ全体とコードの可読性がさらに向上するのに役立ちます。

本日は以上となります。

最後まで読んで頂きありがとうございます。

プライバシーポリシー