【React】コンポーネントとは何か？基本を実例で解説（注意点、export defaultとimport from）

React学習を始めたばかりで、「コンポーネント」という言葉は聞くけれど、その役割やメリットがまだ漠然としている…という方も多いのではないでしょうか。

コンポーネントは、React開発の要です。

本記事では、Reactのコンポーネントの特徴や使い方を具体的なコード例とともに解説しています。

また、作成したコンポーネントを使うために必要なexport defaultとexportの違いやimportの使い方もわかりやすく解説しています。

コンポーネントとは何か？

Reactのコンポーネントは、Webサイトの見た目（UI：ユーザーインターフェース）を構成する独立した再利用可能な部品です。

イメージとしては、レゴブロックのようなものだと考えるとわかりやすいです。

小さな部品（コンポーネント）を組み合わせて、より大きく複雑な一つの画面（アプリケーション）を作り上げます。

Reactのコンポーネントの特徴

Reactのコンポーネントは主に以下の特徴を持ちます。

部品化

画面全体を、ヘッダー、ボタン、リスト、カードといった小さな部品に分けて作成します。

再利用性

一度作った部品は、アプリケーションの様々な場所で何度でも使うことができます。

独立性（カプセル化）

コンポーネント自信が独自の、HTML、JSXで構成されています。このため、各コンポーネントは独立していて、他のコンポーネントに影響を与えることがありません。

JSXとは何か？

Reactを使う上で欠かせないものに「JSX」があります。

JSXは、Reactでコンポーネントの見た目を記述するために使われるJavaScriptの拡張構文で、JavaScriptの中でHTMLのようなタグを書けるようにしたものです。

ReactはJavaScriptを使って画面を作りますが、JavaScriptだけで複雑なHTML構造を書こうとすると、とても読みにくく複雑になってしまいます。

JSXを使うことで、HTMLに非常に近い形式でUIの構造を記述できるため、コードの可読性（読みやすさ）が大幅に向上します。

ファイルの拡張子は.jsまたは.jsxが使われることが一般的です。

なお、JSXは、JavaScript XML（または JavaScript eXtension）の略称です。

コンポーネントの使い方

コンポーネントの作り方と注意点

Reactでは、基本的に「関数コンポーネント」というJavaScriptの関数を使ってコンポーネントを作成します。

その際、コンポーネント名は必ず大文字で始めます。

作成したコンポーネントを他の場所で使えるようにexport defaultでエクスポートします。

// 1. 関数を定義する（コンポーネント名は大文字で始めるのがルール）
function Title() {
  // 2. JSX（表示したい見た目）を返す
  return <h1>ようこそ！Reactの世界へ</h1>;
}

// 3. 他の場所で使うためにエクスポートする
export default Title;

returnの注意点

Reactのコンポーネントで最終的にHTMLに出力したい内容はreturnで指定します。

returnを指定する際に、通常は ( ) をつけます。一行で書ける場合のみ( )を省略できます。

return ();

return (
  <div>
    <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />
  </div>
);

一行で書ける場合は( )を省略できます。

return <img src="https://i.imgur.com/MK3eW3As.jpg" alt="Katherine Johnson" />;

コンポーネントはネスト禁止

コンポーネントの中にコンポーネントを書くことは、処理が遅くなるのとバグの原因になるため禁止です。

//NG
function Title() {
   function Hello(){
   
   }
}

コンポーネントをアロー関数で記述する

コンポーネントを記述するときに、functionを省略したアロー関数で記述することも少なくありません。

function Title() {
  return (<h1>ようこそ！Reactの世界へ</h1>);
}

export default Title;

　↓　アロー関数

const Title = () => {
  return (<h1>ようこそ！Reactの世界へ</h1>);
};

export default Title;

なお、アロー関数ではreturnを省略することもできます。

その場合、式を記述する{ }もまとめて省略する必要があります。

const Title = () => (
　<h1>ようこそ！Reactの世界へ</h1>
);

export default Title;

Reactコンポーネントでは、このアロー関数と省略記法の組み合わせが現代的な書き方として広く使われています。

export default（１つのモジュールを外部に公開）

export defaultとは何か？

exoprt defaultはReactではなくJavaScriptの構文で、ファイル（モジュール）から一つの主要な値をエクスポート（外部に公開）することができます。

記述できるのは１ファイルにつき１つのみです。

関数、クラス、オブジェクト、プリミティブ値（文字列、数値、論理値など）を指定することができます。

Reactにおけるexport default

Reactにおいてはコンポーネント（関数）を他のファイルで使えるようにするために使います。

export defaultは関数の前につけるか、関数名の前につけることで外部に渡すことができます。

function Title() {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

export default Title;

　↑↓同じ

export default function Title() {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

export default Title;

✕　export default Title();

import fromで呼び出す

export defaultで外部で読み込めるようにしたモジュールは、import fromで呼び出すことができます。

import 任意のモジュール名 from ファイルパス

export defaultのポイントは呼び出すときにモジュールに好きな名前を付けられるという点です。（基本的には同じ名前で呼び出すことが一般的です）

function Title() {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

export default Title;

import HelloWorld from './title.jsx'

import HelloWorld from './title'

import HelloWorld from './title.jsx'

export defaultで名前を自由にする（無名コンポーネント）

export defaultを使うときに、アロー関数で関数名を指定しないこともできます。

この場合、importで読み込んだときに好きな名前をつけることができます。

export defult () => {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

このように名前がないコンポーネントを無名コンポーネント（無名関数コンポーネント）と呼びます。

注意点：export defaultの後ろにconstはつけられない

コンポーネントをアロー関数を使って記述する場合、const コンポーネント名とします。

export defaultはconstの前に置くことができないため、以下の書き方はできません。

//✕この書き方はできない！
export defult const Title () => {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

修正するには、別途export defaultで直接コンポーネント名を指定する必要があります。

　↓　修正

const Title () => {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

export default Title;

export（名前付きエクスポート）

exportとは何か？

exexportは名前付きエクスポートと言い、エクスポート時とインポート時で同じ名前を指定する必要があります。

また、１つのファイル内で複数指定することが可能です。

export const PI = 3.14;
export function add(a, b) {
  return a + b;
}

呼び出し方法 import from

呼び出すときは、元のファイルで指定している変数名や関数名をそのまま指定する必要があります。

その際、波カッコが必須です。

export const PI = 3.14;
export function add(a, b) {
  return a + b;
}

import { PI, add } from './utils.js'; // 波括弧と正確な名前が必要

console.log(PI); // 3.14
console.log(add(1, 2)); // 3

Reactの場合も同様に、波カッコをつけたコンポーネント名で呼び出す必要があります。

export function Title() {
  return <h1>ようこそ！Reactの世界へ</h1>;
}

import {Title} from './title.jsx'

export と export defualtの違いまとめ

まとめ表

Reactのコンポーネントのように、ファイル一つにつき一つの主要な機能がある場合はexport defaultがよく使われます。一方、複数のヘルパー関数や定数をまとめたユーティリティファイルでは、export（名前付きエクスポート）が使われることが多いです。

▼exportの例

export const PI = 3.14;
export function add(a, b) {
  return a + b;
}

import { PI, add } from './utils.js'; // 波括弧と正確な名前が必要

console.log(PI); // 3.14
console.log(add(1, 2)); // 3

export default と exportは併用できる

export defaultは１つのファイルに一つのみですが、exportはexport defaultがあるファイル内でも使うことができます。

export function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
    </section>
  );
}

（※この記述は、Galleryコンポーネントのファイルの中にProfileもあるので推奨されません。通常はファイルをコンポーネント毎に分けます）

上記のProfileコンポーネントと、GalleryコンポーネントをApp.jsxで呼び出す場合は以下のようになります。

import Gallery from './Gallery.js';
import { Profile } from './Gallery.js';

export default function App() {
  return (
    <div>
　　　<Gallery />
      <Profile />
    </div>
  );
}

他のコンポーネントを使う

export defaultで呼び出したReactのコンポーネントなど、他のコンポーネントを使いたいときはタグでコンポーネント名を囲み、閉じタグをつけます。

<コンポーネント名 />

JSXはタグの中身が大文字で始まることからコンポーネントであると理解します。

一つのコンポーネントの中で、同じコンポーネントを複数呼び出すこともできます。

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}