React importの基本と実務での活用方法をわかりやすく解説

フロントエンド開発•2025/1/26

はじめに

Reactを使った開発では、さまざまなファイルやライブラリを取り込むためにimportが欠かせません。しかし、はじめてReactを触る皆さんにとっては「どのように記述したらよいのか」「何をimportすればよいのか」が曖昧に感じられることがあるのではないでしょうか。そこでこの記事では、React開発で中心的な役割を果たすimportの基本から実務での応用までをわかりやすく解説します。短いコード例を通して、Reactのコンポーネントをどのように読み込むかをイメージできるようにしていきましょう。初心者の方でも無理なく理解できるよう、丁寧にポイントをおさえます。

この記事を読むとわかること

Reactにおけるimportの役割
名前付きimportやデフォルトimportの基本的な書き方
動的なimportの使いどころ
実務につなげるための注意点
コンポーネントや関連ファイルを取り込む際の具体例

Reactでのimportとは

Reactアプリケーションの開発では、機能ごとにコンポーネントやユーティリティファイルを分割しながら進めることが多いですね。そこで重要になるのが、コードをまとめる手段としてのimportです。たとえば、コンポーネントを作成し、それを別のファイルで活用するときは、最初にimportを使って読み込みを行います。こうした処理が適切にできていないと、コンポーネントの使い回しがうまくいかず、開発効率も落ちてしまうでしょう。またimportには、名前付きimportとデフォルトimportなど複数のパターンが存在します。

import文の基本構文

JavaScriptにおけるimportの基本形は、下記のように書かれます。 Reactアプリでもこれが基本となります。


import Something from "somewhere";

ここでSomethingは任意の名前を指定できる部分、somewhereはモジュールやファイルのパスを示します。この書き方はデフォルトエクスポートされた内容を読み込むケースです。一方、複数の機能をまとめて指定したい場合には、波括弧を使います。


import { useState, useEffect } from "react";

このように記述すると、useStateやuseEffectなど、名前が付いた複数の機能を同時に読み込むことができます。

importと実務のつながり

現場ではコンポーネントを細分化し、複数のファイルに分割して管理することが少なくありません。同時に、Reactライブラリやその他のサードパーティ製パッケージもimportで取り込む機会が多いです。たとえばAPI通信にaxiosを使うとき、import axios from "axios";と書くことでプロジェクト内で自由に利用できます。こうしたimportの仕組みを理解しておくと、コードを整理しやすくなるでしょう。また、import構文を正しく書くことで、コンポーネントの依存関係がはっきりするのもメリットです。依存関係が複雑になったときにバグを見つけやすくなり、リファクタリングをしやすい点も見逃せません。

import構文を統一しておくと、チーム開発で誰が見ても分かりやすいコードになります。

デフォルトimportと名前付きimportの違い

Reactにおけるimport文の書き方には、大きく分けてデフォルトimportと名前付きimportの2種類があります。混乱しないためにも、それぞれの特徴や具体例を知っておくことが重要です。

デフォルトimport

デフォルトimportは、そのモジュールから「主役」となる機能を1つだけまとめて読み込むイメージです。たとえばReactライブラリを取り込むときによく使われます。


import React from "react";

この書き方では、読み込まれる側のファイルでexport default React;のように指定されています。 React本体を読み込む際は、ほとんどこの形が使われることをイメージしておくとわかりやすいです。また、モジュール側でファイルの末尾にexport default SomeComponent;と書いてある場合、そのファイルを読み込むときは下記のように好きな名前でimportできます。


import MyComponent from "./MyComponent";

上記の場合、モジュール側のエクスポート名とimport時の名前は一致しなくても問題ありません。

名前付きimport

モジュール側でexport function someFunction()やexport const someVar = ...;のように、明示的に名前を付けてエクスポートしているケースがあります。そういった機能や変数をimportするときは下記のように書きます。


import { someFunction, someVar } from "./someModule";

このパターンでは波括弧内に名前を指定する形になるので、名前付きimportと呼ばれます。複数の要素を同時に扱う際に便利ですが、モジュール側が提供している名前を正確に覚えなければならない点は注意が必要でしょう。

デフォルトexportと名前付きexportを同じファイルで混在させるケースがありますが、保守性が低下する場合もあります。プロジェクトのコーディング規約に沿って使い分けると混乱が少なくなります。

importの別の書き方や応用

Reactでの開発が進むと、ファイル構成や要件によってimportの書き方を工夫したいときがあります。実務では、やや特殊なケースも覚えておくと便利です。

エイリアスimport

ファイルの絶対パスを使わずに、プロジェクトのルートからのパスを短く表現したいことがあるかもしれません。この場合、設定ファイルでエイリアスを設定し、下記のように読み込むことが一般的です。


import Header from "@/components/Header";

ここで@/componentsというパスは、事前に設定ファイルでsrc/componentsを指すように設定していると想像してみてください。この方法を使うと、フォルダ階層が深いプロジェクトでも管理しやすくなるでしょう。ただし、ツールごとに設定方法が異なるので、チーム内で統一ルールを決めておくことが大切です。

ワイルドカードimport

外部ライブラリのすべての機能をまとめて読み込みたい場合は、ワイルドカードimportを使う方法があります。


import * as Utils from "./utils";

この書き方を使うと、Utils.someFunc()のように、名前空間を限定して呼び出すことができます。ただし、あまり多用すると読み込みサイズが大きくなる場合があるため、必要な要素だけを名前付きimportするほうが好まれることが多いです。

動的なimportとその利点

Reactで大きなアプリを作る際、コード分割を行うことで読み込み速度を効率化することがよくあります。このとき便利なのが動的なimport、いわゆるimport()関数を使った方法です。

動的importの基本

たとえば、ユーザーが特定のボタンを押したタイミングで追加のコンポーネントやライブラリを読み込みたい場合があります。このように、最初にすべてをまとめて読み込むのではなく、必要になったタイミングでオンデマンドに取り込むやり方です。


function handleClick() {
  import("./SomeLargeComponent").then((module) => {
    const SomeLargeComponent = module.default;
    // ここでSomeLargeComponentを使用する処理を記述
  });
}

ボタンが押されるまで実際にはSomeLargeComponentが読み込まれないため、初期ロードを軽くする効果が期待できます。ただし、頻繁に呼ばれるコンポーネントを動的に読み込むと、ユーザーが都度待たされる可能性もあるため、使いどころを見極める必要があります。

React.lazyを活用するケース

ReactにはReact.lazyとSuspenseを組み合わせてコンポーネントを動的importする仕組みがあります。


import React, { Suspense } from "react";

const LazyComponent = React.lazy(() => import("./LazyComponent"));

function App() {
  return (
    <Suspense fallback={<div>読み込み中です...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

export default App;

ここでReact.lazy内にimport("./LazyComponent")を指定することで、必要になったタイミングでコンポーネントを読み込みます。表示までの間はSuspenseで指定された要素（上記例では「読み込み中です...」）を表示するため、ユーザー体験が損なわれにくい点が特徴といえます。

実務で意識しておきたいポイント

React開発でimportを活用するには、ファイル構造やプロジェクトのルールを明確にしておくことが大切です。このセクションでは、実際に開発を行うときに気をつけておきたい点を紹介します。

フォルダ構成とコンポーネントの分類

Reactでは、コンポーネントファイルをsrc/componentsフォルダ配下に置くことが一般的でしょう。たとえば、ヘッダーやフッターなどの共通パーツと、ページごとに切り分けられるメイン部分を分けておくと、importするファイルも整理しやすくなります。規模が大きくなると、commonやlayoutのようなディレクトリに分けるなど、より細分化が必要になるかもしれません。しかし、あまり細かく分けすぎると管理が複雑になるため、最初にチームの方針を決めることが望ましいです。

コードの見通しを良くする工夫

import文が長くなったり、ファイル数が増えたりしてくると、何をどこから呼び出しているのか追いかけにくくなることがあります。この場合、機能や役割に応じてコンポーネントをまとめるindex.jsやindex.tsxを用意し、そこに集約してからimportする方法が有効です。たとえば、複数のコンポーネントをまとめてexportするindexファイルを作り、それを呼び出すだけでよい形にするとスッキリします。


// src/components/index.js
export { default as Header } from "./Header";
export { default as Footer } from "./Footer";


// 別のファイルでまとめてimport
import { Header, Footer } from "@/components";

このように一元管理しておくと、変更時に見直すファイルも少なくなるでしょう。

テストとimportの関係

テストを行う際にもimportは大事な役割を持っています。コンポーネントをテストツールで正しく読み込むために、import { render, screen } from "@testing-library/react";などと書く場面があります。テストコードが複雑になるほど、どのようなimport構文でコンポーネントや関数を呼び出しているかを把握する必要が高まるでしょう。 import方法を間違えるとテストがエラーになることもあるため、開発本体のコードと同様に注意が必要です。また、外部ライブラリのモック化を行う場合にも、importのパス指定が合わないとテストが失敗することがあります。

テストファイルでのimportは、エラー時に「Cannot find module」と出るケースが多いので、パスが間違っていないかまず確認しましょう。

エラーが出たときのチェックポイント

実務ではimport関連のエラーで悩まされることがあります。特に初めてReactを扱う皆さんは、エラー内容を正しく読み解く方法が分からずに戸惑うことが多いかもしれません。ここでは、import周りでよくあるエラーの対処法を簡単にまとめてみました。

パスのスペルミス

相対パスでファイルを指定している場合、1文字の間違いで「ファイルが見つからない」エラーになることがあります。エディタの補完機能を使うと、スペルミスが減らせるはずです。

ファイル拡張子の忘れ

JavaScriptやTypeScriptのファイルは拡張子を省略しても認識される設定が多いですが、何かの拍子で設定が変わるとエラーが出る場合があります。普段は問題なくても、特定のツールやテスト環境で不具合が起きやすい点に注意です。

デフォルトexportの有無

モジュール側がexport defaultになっているのに、名前付きimportで呼び出していたり、その逆をしていたりすると、予期しないエラーにつながります。必ずモジュール側と呼び出し側の対応をそろえましょう。

まとめ

ここまで、react importの基本的な概念から、実務での活用例や注意点までを一通り見てきました。デフォルトimportや名前付きimportなどの書き方を押さえるだけでも、コードの整理がしやすくなります。また、ファイル構成やチームのルールをあらかじめ整備しておくことで、大規模なReactプロジェクトでもスムーズに開発を進められるでしょう。日々の開発でimportを上手に使いこなせると、コードの見通しが良くなり、生産性の向上にもつながります。皆さんもぜひ、この記事を参考にしながらReactのimportを使いこなし、よりわかりやすいコードを実践してみてください。