こんにちは。
アイレットデザイン事業部、フロントエンドエンジニアの辻と申します。

本記事ではReact のチュートリアル内、UI の記述についてお話します。
想定している読者は、React 未経験または初心者の方になります。

1. UI をコンポーネントとして記述する

まず最初に、React では UI を「コンポーネント」として記述します。
コンポーネントとは、UI の一部を表現する再利用可能なコードの塊のことを指します。
例えば、以下のようにコンポーネントを作成できます。

1
2
3
function Greeting() {
  return <h1>Hello, World!</h1>;
}

このコンポーネントは「関数コンポーネント」と言います。
「Hello, World!」というメッセージを表示するだけですが、これが React の基本です。

2. 最初のコンポーネントを作成する

次に、最初のコンポーネントを作成してみます。
React のReactDOM.renderメソッドを使って、コンポーネントを DOM に描画します。
以下のコードを見てください。

1
2
3
4
5
6
7
8
import React from "react";
import ReactDOM from "react-dom";
 
function Greeting() {
  return <h1>Hello, World!</h1>;
}
 
ReactDOM.render(<Greeting />, document.getElementById("root"));

このコードでは“コンポーネントを

に描画しています。
これで、ブラウザに「Hello, World!」が表示されます。

3. コンポーネントのインポートとエクスポート

次に、コンポーネントをエクスポートやインポートする方法を見てみます。
以下のコードを見てください。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// Greeting.js
export function Greeting() {
  return <h1>Hello, World!</h1>;
}
 
// App.js
import { Greeting } from "./Greeting";
 
function App() {
  return (
    <div>
      <Greeting />
    </div>
  );
}

このようにGreetingコンポーネントをAppコンポーネントにインポートして使用できます。
これで、コードがすっきりと見やすくなります。

4. JSX でのマークアップ記述

React では、JSX（JavaScript XML）を使ってマークアップを記述します。
JSX は、JavaScript 内で HTML のような構文を使用できる機能です。
例えば、次のように書けます。

1
const element = <h1>Hello, World!</h1>;

これで<h1>要素を含む JSX 要素が作成されます。
JSX は直感的で、HTML に似ているので、非常に使いやすいです。

5. JSX 内の JavaScript

JSX 内で JavaScript の式を使いたいときは、波括弧 {} を使います。
例えば、次のように書けます。

1
2
const name = "Taro";
const element = <h1>Hello, {name}!</h1>;

このコードではname変数の値が表示されます。
これで、動的なコンテンツを簡単に作成できます。

6. コンポーネントへのプロパティの渡し方

コンポーネントにデータを渡すためには、プロパティ（props）を使用します。
以下のように書くことができます。

1
2
3
4
5
6
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
 
// 使用例
<Greeting name="Taro" />;

この例ではnameプロパティをGreetingコンポーネントに渡しています。
これにより、同じコンポーネントでも異なる名前を表示することができます。

7. 条件付きレンダリング

条件に応じて異なる UI を表示するには、条件付きレンダリングを使います。
例えば、次のように書けます。

1
2
3
4
5
6
7
function Greeting(props) {
  // 三項演算子：条件 ? trueの場合 : falseの場合;
  return props.isLoggedIn ? <h1>ようこそ！</h1> : <h1>ログインして下さい。</h1>;
}
 
// 使用例
<Greeting isLoggedIn={true} />;

この例ではisLoggedInプロパティの値に応じて異なるメッセージが表示されます。
ここでは<h1>ようこそ！</h1>が表示されます。
これで、ユーザーの状態に応じた表示が可能になります。

8. リストのレンダリング

配列を使ってリストをレンダリングすることもできます。
以下のコードを見て下さい。

01
02
03
04
05
06
07
08
09
10
11
const items = ["Apple", "Banana", "Cherry"];
 
function ItemList() {
  return (
    <ul>
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

このコードではitems配列の各要素をリストとして表示しています。
key属性を使うことで、React がリストの各要素を一意に識別できるようになります。
インデックスをkeyとして使用することも可能ですが、要素の順序が変わる場合や状態を管理する必要がある場合には推奨されません。
各要素にユニークな識別子を持たせ、そのIDをkeyとして使用することが最良の方法です。
これにより、React が要素を正しく識別し、効率的に再レンダリングできるようになります。

9. コンポーネントを純粋に保つ

コンポーネントは、外部からの影響を受けずに動作することが望ましいです。
これを「純粋なコンポーネント」と呼びます。
以下のように書けます。

1
2
3
function PureComponent({ value }) {
  return <div>{value}</div>;
}

このコンポーネントは、与えられたvalueプロパティをそのまま表示します。
これにより、予測可能な動作が得られます。

10. UI をツリーとして理解する

React では、UI をツリー構造として理解することが重要です。
コンポーネントは親子関係を持ち、ツリーのように構成されます。
以下の例を見て下さい。

1
2
3
4
5
6
7
8
9
function App() {
  return (
    <div>
      <Header />
      <MainContent />
      <Footer />
    </div>
  );
}

この例ではAppコンポーネントがHeader MainContent Footerの 3 つの子コンポーネントを持つツリー構造を示しています。
これにより、UI の構造が明確になります。

まとめ

React を使うと、UI を効率的に記述することができます。
コンポーネントの再利用性や JSX の柔軟性を活用することで、魅力的なユーザーインターフェースを構築できます。
これらの基本を理解し、React を活用していきたいと思います。