React コンポーネント：関数コンポーネントの作成とインポート

はじめに

この実験 (Lab) では、React のコンポーネントという基本的な概念を学びます。コンポーネントは、独立して再利用可能なコードの断片です。JavaScript の関数と同じ目的を果たしますが、独立して動作し、画面にレンダリングされる HTML (JSX 経由) を返します。ここでは、シンプルな「関数コンポーネント」の作成に焦点を当てます。

新しいコンポーネントを独自のファイルで作成し、エクスポートしてから、メインの App コンポーネント内でインポートしてレンダリングします。

新しいファイル Hello.jsx に関数コンポーネントを作成する

このステップでは、最初の React コンポーネントを作成します。コードを整理し、再利用可能にするために、各コンポーネントを独自のファイルに配置するのが一般的なプラクティスです。Hello という名前のコンポーネント用の新しいファイルを作成します。

まず、開発環境を準備しましょう。プロジェクトファイルは my-app ディレクトリに用意されています。このディレクトリに移動し、必要な依存関係をインストールして、開発サーバーを開始する必要があります。

WebIDE でターミナルを開き (Terminal > New Terminal メニューを使用できます)、以下のコマンドを一つずつ実行します。

cd my-app

npm install

npm run dev -- --host 0.0.0.0 --port 8080

最後のコマンドを実行すると、開発サーバーが起動します。LabEx インターフェースの Web 8080 タブをクリックすると、実行中のアプリケーションを表示できます。この実験を通して、このタブに切り替えて変更を確認できます。

WebIDE の左側にあるファイルエクスプローラーで、my-app/src ディレクトリに移動します。src フォルダを右クリックし、「New File」を選択します。新しいファイルの名前を Hello.jsx とします。

次に、新しく作成した my-app/src/Hello.jsx ファイルに以下のコードを追加します。このコードは、シンプルな関数コンポーネントを定義します。

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

このコードを分解してみましょう。

function Hello(): これは標準的な JavaScript 関数です。React では、関数コンポーネントは単なる JavaScript 関数です。慣例として、コンポーネント名は常に大文字で始まります。
return <h1>...</h1>;: 関数は JSX を返します。JSX (JavaScript XML) は、HTML に非常によく似た JavaScript の構文拡張です。UI がどのように見えるかを記述するために使用します。

コンポーネント関数を default export する

このステップでは、Hello コンポーネントをアプリケーションの他の部分で使用できるようにします。これを行うには、Hello.jsx ファイルからエクスポートする必要があります。

JavaScript モジュールには、名前付きエクスポートとデフォルトエクスポートの 2 つの主なエクスポートタイプがあります。この実験では、デフォルトエクスポートを使用します。これは、ファイルが 1 つのものだけをエクスポートする場合にコンポーネントでよく使用されます。

my-app/src/Hello.jsx ファイルの末尾に次の行を追加します。

export default Hello;

これで、my-app/src/Hello.jsx ファイル全体は次のようになります。

function Hello() {
  return <h1>Hello from the Hello component!</h1>;
}

export default Hello;

この export default ステートメントにより、Hello 関数はこのファイルのメインエクスポートとなり、他のファイルからインポートできるようになります。

import 文を使用して App.jsx にコンポーネントをインポートする

このステップでは、Hello コンポーネントをメインアプリケーションコンポーネントである App.jsx にインポートして使用できるようにします。

WebIDE のファイルエクスプローラーで、my-app/src/App.jsx ファイルを見つけて開きます。

Hello コンポーネントを使用するには、まずインポートする必要があります。my-app/src/App.jsx ファイルの先頭、App 関数定義の前に、次の import ステートメントを追加します。

import Hello from "./Hello.jsx";

この行は、JavaScript に対して、Hello.jsx ファイル (同じディレクトリにあるため ./ で示されます) からデフォルトエクスポートをインポートし、それを Hello という名前の変数に割り当てるように指示します。

インポートを追加した後、my-app/src/App.jsx ファイルの先頭は次のようになります (他のインポートは若干異なる場合があります)。

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import Hello from './Hello.jsx';

function App() {
// ... rest of the file

App の return 内でインポートしたコンポーネントをレンダリングする

このステップでは、App コンポーネント内で Hello コンポーネントをレンダリングします。コンポーネントをインポートしたら、通常の HTML タグのように JSX 内で使用できます。

my-app/src/App.jsx ファイルで、App 関数内の return ステートメントを見つけます。既存のコードは Vite のデフォルトコンテンツです。このすべてを新しいコンポーネントに置き換えることができます。

App 関数を変更して、デフォルトのコンテンツを削除し、代わりに <Hello /> コンポーネントをレンダリングします。

App 関数は次のようになります。

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

ここで、<Hello /> は Hello コンポーネントをレンダリングする方法です。< と /> は Fragment と呼ばれ、DOM に余分なノードを追加せずに子要素のリストをグループ化できます。

これで、my-app/src/App.jsx ファイル全体は次のようになります。

import Hello from "./Hello.jsx";
import "./App.css";

function App() {
  return (
    <>
      <Hello />
    </>
  );
}

export default App;

注：分かりやすくするために、未使用のインポートとステートロジックを削除しました。

ファイルを保存し、ブラウザで更新されたレンダリングを確認する

このステップでは、作業の結果を確認します。

my-app/src/Hello.jsx と my-app/src/App.jsx の両方の変更をすべて保存したことを確認してください。ファイルを保存するには、Ctrl+S または Cmd+S を押します。

導入部で開始した Vite 開発サーバーは、Hot Module Replacement (HMR) を使用しています。これは、ファイルの変更を自動的に検出し、ページを完全にリロードすることなくブラウザでアプリケーションを更新することを意味します。

LabEx インターフェースの Web 8080 タブに切り替えます。ページには「Hello from the Hello component!」というテキストが表示されているはずです。このコンテンツは、新しい Hello コンポーネントからレンダリングされています。

Browser displaying Hello from the Hello component

変更が表示されない場合は、ブラウザタブのアドレスバーの更新ボタンをクリックしてみてください。

おめでとうございます。最初の React コンポーネントを作成、エクスポート、およびレンダリングすることに成功しました！

まとめ

この実験では、React アプリケーションでコンポーネントを作成および使用する基本的なワークフローを学びました。このモジュラーアプローチは、React 開発の核となる原則です。

以下のことを正常に完了しました。

専用ファイル (Hello.jsx) で新しい関数コンポーネントを作成しました。
export default を使用して、コンポーネントをアプリケーションの他の部分で利用できるようにしました。
import を使用して、コンポーネントをメインの App.jsx ファイルにインポートしました。
JSX タグ構文 (<Hello />) を使用して、インポートしたコンポーネントをレンダリングしました。

コンポーネントの作成、エクスポート、インポートというこのパターンは、大規模で保守性の高い React アプリケーションを構築するための基本となります。

React コンポーネント入門