テンプレート構文をマスターする（第2回）

JSXとは何か

JSXは、ReactでUIを記述するための構文拡張です。HTMLに似た見た目を持ちながら、JavaScriptの機能と統合されており、動的で再利用可能なコンポーネントを作成できます。JSXはブラウザで直接実行されるのではなく、Babelなどのトランスパイラによって通常のJavaScriptに変換されます。たとえば、JSXの<h1>Hello</h1>は、React.createElement('h1', null, 'Hello')というJavaScriptコードに変換されます。この仕組みにより、開発者は直感的な構文でUIを構築しつつ、JavaScriptの柔軟性を活用できます。

JSXを使用する際は、Reactをインポートする必要があります。第1回で作成したApp.jsでは、以下のようにReactをインポートしていました。

import React from 'react';    

これにより、JSX構文が正しく処理されます。次に、JSXの基本的なルールを確認します。

JSXの基本ルール

JSXはHTMLに似ていますが、いくつかの独自のルールがあります。まず、JSX要素は必ず1つの親要素で囲む必要があります。複数の要素を返す場合、<div>やReactの<Fragment>（短縮形として<></>）を使用します。たとえば、以下のコードは正しいJSXです。

function App() {    
  return (    
    <>    
      <h1>タイトル</h1>    
      <p>本文</p>    
    </>    
  );    
}    

次に、JSXではHTML属性とは異なる命名規則を採用します。HTMLのclass属性は、JavaScriptの予約語との衝突を避けるためclassNameを使用します。同様に、for属性はhtmlForとなります。また、JSXではJavaScriptの式を波括弧{}で埋め込むことができます。これにより、変数や計算結果を動的に表示できます。

ハンズオン：JSXで動的なUIを構築

JSXの基本を理解したところで、実際にコードを書きながら動的なUIを構築します。第1回で作成したプロジェクト（my-react-app）を使用し、src/App.jsを以下のように編集します。

import React from 'react';    
    
function App() {    
  const greeting = 'Reactハンズオン';    
  const currentYear = new Date().getFullYear();    
    
  return (    
    <div className="app-container">    
      <h1>{greeting}へようこそ</h1>    
      <p>現在の年は{currentYear}年です。</p>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、変数greetingとcurrentYearを定義し、JSX内で波括弧を使ってそれらを表示しています。className属性を使用してdiv要素にクラスを指定しています。プロジェクトの開発サーバー（npm start）が起動している状態でファイルを保存すると、ブラウザに「Reactハンズオンへようこそ」と現在の年が表示されます。

さらに、スタイルを追加してUIを整えます。src/App.cssを開き、以下のCSSを追加します。

.app-container {    
  text-align: center;    
  padding: 20px;    
  font-family: Arial, sans-serif;    
}    

App.jsの先頭に以下を追加してCSSをインポートします。

import './App.css';    

これにより、テキストが中央揃えになり、パディングとフォントが適用されます。ブラウザで確認すると、UIが見やすくなっていることがわかります。

条件付きでJSXをレンダリング

JSXでは、JavaScriptの論理演算子や条件演算子を使用して、条件に応じたレンダリングを行えます。たとえば、特定の条件で異なるメッセージを表示するコンポーネントを作成します。App.jsを以下のように変更します。

import React from 'react';    
import './App.css';    
    
function App() {    
  const isMorning = new Date().getHours() < 12;    
  const greeting = 'Reactハンズオン';    
    
  return (    
    <div className="app-container">    
      <h1>{greeting}へようこそ</h1>    
      {isMorning ? (    
        <p>おはようございます！良い一日を。</p>    
      ) : (    
        <p>こんにちは！学習を楽しみましょう。</p>    
      )}    
    </div>    
  );    
}    
    
export default App;    

このコードでは、isMorning変数に基づいて、午前か午後かで異なるメッセージを表示します。条件演算子（?:）を使用することで、JSX内で簡潔に条件分岐を実現しています。ブラウザで確認すると、時刻に応じたメッセージが表示されます。

ハンズオン：JSXの表現力を試す

JSXの柔軟性をさらに実感するため、読者自身でコードを編集します。以下の課題を試してください。App.jsを編集し、現在の時刻（時間）を表示する要素を追加します。ヒントとして、DateオブジェクトのgetHours()やgetMinutes()メソッドを使用できます。以下は一例です。

import React from 'react';    
import './App.css';    
    
function App() {    
  const now = new Date();    
  const currentTime = `${now.getHours()}:${now.getMinutes().toString().padStart(2, '0')}`;    
    
  return (    
    <div className="app-container">    
      <h1>Reactハンズオン</h1>    
      <p>現在の時刻は{currentTime}です。</p>    
    </div>    
  );    
}    
    
export default App;    

このコードでは、時刻をHH:MM形式で表示します。padStart(2, '0')を使用することで、分が1桁の場合に0を補完しています。自分で異なるメッセージやスタイルを追加し、JSXの表現力を試してください。

次のステップに向けて

本記事では、JSXの基本構文とその活用方法を学び、動的かつ条件付きのUIを構築しました。JSXは、HTMLのような直感性とJavaScriptの柔軟性を組み合わせ、React開発の基盤となる技術です。第3回では、Propsを活用してコンポーネントにデータを渡し、動的で再利用可能なUIを作成する方法を学びます。これにより、コンポーネントのモジュール性がさらに向上します。