【ITニュース解説】Your First React Component: JSX, Components, and the "Hello, World" Program

Reactプロジェクトのセットアップが完了し、いよいよユーザーインターフェース（UI）構築の具体的な第一歩を踏み出す。ここでは、React開発の要となる「コンポーネント」とは何か、そしてReactの強力な文法である「JSX」について掘り下げ、最終的に「Hello, World!」プログラムを実際に作成するまでを解説する。

まず、Reactの根幹をなす「コンポーネント」という概念から理解する。コンポーネントとは、ウェブサイトを構築する際のデジタルなLEGOブロックのようなものだ。ウェブサイト全体を一つの巨大な塊として作るのではなく、ボタン、検索バー、ユーザーのプロフィールカードといった、それぞれが小さく自己完結した部品を作成する。これらの部品を自由に組み合わせたり、再配置したりすることで、複雑でインタラクティブなUIを効率的に作り上げることができる。これは、ウェブ開発における考え方の根本的な転換点となる。具体的にコンポーネントとは、UIの一部を返すただのJavaScript関数である。最初は難しく感じるかもしれないが、一度この概念を掴めば、その強力さを理解できるだろう。コンポーネントは、UIのロジック（振る舞い）とプレゼンテーション（見た目）の両方をカプセル化する、Reactアーキテクチャの機能的な基盤となる構成要素だ。例えば、WelcomeMessageというコンポーネントは、以下のように書かれるJavaScript関数だ。

Copy
1import React from 'react';
2
3function WelcomeMessage() {
4  return (
5    <h1>Hello, React Learners!</h1>
6  );
7}
8
9export default WelcomeMessage;

この例からもわかるように、コンポーネントは再利用可能な関数であり、呼び出されるとユーザーインターフェースの一部をレンダリングする。このシンプルだが強力な概念が、Reactで構築するすべての基礎となる。

次に、Reactを特徴づける「JSX」について解説する。複雑なUIを構築する際に問題となるのは、UIの構造や内容に関するロジック（UIロジック）と、アプリケーションが何を行うかというロジック（ビジネスロジック）が絡み合い、コードが読みにくく、管理しづらくなることだ。すべてのUI要素をJavaScriptだけで記述しようとすると、すぐにコードが乱雑になってしまう。例えるなら、鉛筆ではなく文字による指示だけで詳細な絵を描こうとするようなものだ。ここでJSXの出番となる。JSX（JavaScript XMLの略）は、JavaScriptの構文拡張機能である。これにより、HTMLのようなコードをJavaScriptファイルの中に直接書くことができるため、コードが格段に読みやすく、直感的になる。一見するとテンプレート言語のように見えるが、その実体はJavaScriptの全機能を持つ。例えば、JSXなしで<h1>要素を作成するには、React.createElement("h1", null, "Hello, world!");のように書く必要があるが、JSXを使えば、これを<h1>Hello, world!</h1>`と、より簡潔で馴染み深い形で書けるようになる。この構文は、読み書きが非常に簡単であることは明らかだ。ここで重要なのは、JSXはHTMLそのものではないということだ。JSXは、アプリケーションのビルドプロセス中に、舞台裏で通常のJavaScript関数呼び出しに変換される構文に過ぎない。

JSXを書く際に初心者がよく陥る間違いの一つに、「Reactコンポーネントは単一のルート要素しか返せない」というルールがある。これは、すべてのJSX要素を、例えば<div>や<main>といった単一の親タグで囲む必要があることを意味する。もし複数の要素を直接返そうとすると、エラーが発生してしまう。この問題を解決する最も一般的な方法は、以下のようにすべての要素を単一の<div>タグで囲むことだ。

Copy
1function MyComponent() {
2  return (
3    <div>
4      <h1>タイトル</h1>
5      <p>パラグラフ</p>
6    </div>
7  );
8}

しかし、より推奨される方法は、React Fragmentを使用することである。Fragmentを使えば、余分な<div>タグをHTML出力に追加することなく、複数の子要素をグループ化できる。これは、<React.Fragment>という完全なタグ、またはその短縮形である<></>で表現できる。この方法は、よりクリーンで効率的なコンポーネントを作成するために推奨されるアプローチだ。

開発環境のセットアップが済んだところで、実際に最初の「Hello, World!」プログラムを作成してみよう。コードエディタ（VS Codeなど）で、以前作成したmy-react-appフォルダを開く。プロジェクトのファイルエクスプローラーでsrcフォルダに移動し、App.jsxファイルを開く。このファイルは、Viteによって作成されたメインのコンポーネントファイルである。まず、初期のコードを確認する。そこにはAppというJavaScript関数があり、いくつかのHTMLのようなコード（これがJSXだ）を返している。これこそが、あなたの最初のコンポーネントである。最初はすべての行を理解する必要はない。次に、このコードを単純に変更する。return文の中にある既存のデータをすべて削除し、<h1>Hello, World!</h1>`に置き換える。

変更前は以下のようなコードが含まれているかもしれない。

Copy
1import { useState } from 'react'
2import reactLogo from './assets/react.svg'
3import viteLogo from '/vite.svg'
4import './App.css'
5
6function App() {
7  const [count, setCount] = useState(0)
8
9  return (
10    <>
11      <div>
12        <a href="https://vite.dev" target="_blank">
13          <img src={viteLogo} className="logo" alt="Vite logo" />
14        </a>
15        <a href="https://react.dev" target="_blank">
16          <img src={reactLogo} className="logo react" alt="React logo" />
17        </a>
18      </div>
19      <h1>Vite + React</h1>
20      <div className="card">
21        <button onClick={() => setCount((count) => count + 1)}>
22          count is {count}
23        </button>
24        <p>
25          Edit <code>src/App.jsx</code> and save to test HMR
26        </p>
27      </div>
28      <p className="read-the-docs">
29        Click on the Vite and React logos to learn more
30      </p>
31    </>
32  )
33}
34
35export default App

これを、次のように変更する。

Copy
1import './App.css'
2
3function App() {
4
5  return (
6    <>
7      <h1>Hello, World!</h1>
8    </>
9  )
10}
11
12export default App

ファイルを保存すると、開発サーバーを実行しているブラウザが自動的に更新され、変更が反映されるはずだ。これがReactのホットリロード機能の利点である。これにより、ブラウザのページには「Hello, World!」と表示される。

これで、最初のReactコンポーネントを作成し、レンダリングすることに成功した。今回の作業を通して、以下の重要な概念を学び、適用した。まず、App.jsxファイルで作業したように、Reactアプリケーションの基本的な構成要素であるコンポーネントを実際に作成した。次に、JavaScriptファイルの中に直接記述したHTMLのような構文、すなわちJSXを使用した。JSXのおかげで、Reactのコードは非常に読みやすく、書きやすい。そして、Reactに何をレンダリングするか（<h1>Hello, World!</h1>`）を指示し、残りの処理はReactが担当する様子をブラウザで確認した。これは、Reactの宣言的な性質の強力さを示している。これで、あなたは公式にReact開発者としての第一歩を踏み出したことになる。

次に学ぶのは、さらに強力な概念である「props（プロップス）」だ。プロップスは、コンポーネントを再利用可能で動的なものにするための鍵となる。今回作成した「Hello, World!」コンポーネントは、常に「Hello, World!」としか言えない静的なテンプレートだ。しかし、次回は、親コンポーネントから子コンポーネントへ情報を渡す方法としてプロップスを使う方法を学ぶ。これにより、一つのWelcomeコンポーネントで、「Hello, Alice!」や「Hello, Bob!」といった、異なるデータを渡すだけで様々な名前を表示できるようになる。コンポーネントにデータを渡して、より柔軟で強力なUIを構築する方法を学ぶ準備をしよう。