Reactとは

Reactは、宣言的で効率的かつ柔軟なユーザーインターフェース構築のためのJavaScriptライブラリです。Reactは、短く独立したコードスニペット（コンポーネント）を組み合わせて複雑なUIを構築できます。

ReactはMVCモデルに基づいたフレームワークであり、一方でVueはMVVMモデルに基づいています。

Reactの基本的な考え方は、UI = render(data)という単一方向のデータフローです。

JSX構文

JSXはJavaScriptの構文拡張であり、UIとロジックをコンポーネント内で結合します。中括弧{}を使用してJavaScript式を埋め込むことができます。

JSXはHTMLよりもJavaScriptに近いため、属性名はcamelCase（小文字キャメルケース）で記述します。例えば、classはclassNameになり、tabindexはtabIndexになります。

式のサポート

// 変数の使用
const userName = '山田太郎';
const greetingElement = <h1>こんにちは、{userName}</h1>;

// 関数の使用
function createFullName(userData) {
  return `${userData.lastName} ${userData.firstName}`;
}

const userData = {
  firstName: '太郎',
  lastName: '山田'
};

const welcomeMessage = (
  <div>
    <h2>ようこそ、{createFullName(userData)}さん</h2>
  </div>
);

// 条件付きレンダリング
function displayUserMessage(user) {
  if (user) {
    return <h3>ようこそ、{user.name}さん</h3>;
  }
  return <h3>ゲストの方、こんにちは</h3>;
}

XSS対策

JSXはXSS（クロスサイトスクリプティング）攻撃を自動的に防ぎます。Reactはブラウザにレンダリングする前に特殊文字をエスケープします。

// ユーザー入力の例
const userInput = '<script>alert("悪意あるコード")</script>';
// JSX内で安全に使用
const safeElement = <div>{userInput}</div>;
// レンダリング後: <div>&lt;script&gt;alert("悪意あるコード")&lt;/script&gt;</div>

JSXはオブジェクトとして表現される

// JSX記法
const jsxElement = (
  <article className="post">
    <h2>Reactの基本</h2>
    <p>コンポーネントベースの開発</p>
  </article>
);

// React.createElementによる同等のコード
const createElementElement = React.createElement(
  'article',
  { className: 'post' },
  React.createElement('h2', null, 'Reactの基本'),
  React.createElement('p', null, 'コンポーネントベースの開発')
);

// オブジェクト表現
const objectElement = {
  type: 'article',
  props: {
    className: 'post',
    children: [
      { type: 'h2', props: { children: 'Reactの基本' } },
      { type: 'p', props: { children: 'コンポーネントベースの開発' } }
    ]
  }
};

DOMへのレンダリング

React要素をDOMにレンダリングするにはReactDOM.renderを使用します。ただし、頻繁なレンダリングは推奨されません。

// 基本的なレンダリング
const headerElement = <h1>こんにちは、世界</h1>;
ReactDOM.render(headerElement, document.getElementById('app'));

// 時間を更新する例（非推奨）
function updateTime() {
  const timeElement = (
    <div>
      <h2>現在時刻</h2>
      <p>{new Date().toLocaleTimeString()}</p>
    </div>
  );
  ReactDOM.render(timeElement, document.getElementById('clock'));
}
setInterval(updateTime, 1000); // パフォーマンス上の問題があるため非推奨

コンポーネント

コンポーネントはJavaScriptの関数に似ています。任意の入力（"props"）を受け取り、ページの表示内容を記述するReact要素を返します。関数コンポーネントとクラスコンポーネントの2種類があります。

関数コンポーネント

// 関数コンポーネントの例
function UserProfile(props) {
  return (
    <div>
      <h3>{props.userName}のプロフィール</h3>
      <p>{props.email}</p>
    </div>
  );
}

クラスコンポーネント

// クラスコンポーネントの例
class UserProfile extends React.Component {
  render() {
    return (
      <div>
        <h3>{this.props.userName}のプロフィール</h3>
        <p>{this.props.email}</p>
      </div>
    );
  }
}

コンポーネントのレンダリング

カスタムコンポーネントは大文字で始まる必要があります。Reactは大文字で始まる要素をコンポーネントとして認識します。

// コンポーネントの使用
function Greeting(props) {
  return <div>こんにちは、{props.toWhat}</div>;
}

function App() {
  // 大文字で始まるコンポーネントの使用
  return <Greeting toWhat="React開発者" />;
}

// ルート要素へのレンダリング
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Props（プロパティ）

Propsは親コンポーネントから子コンポーネントに渡されるデータです。コンポーネントはpropsを直接変更できず、読み取り専用です。

// Propsの使用例
function ProductCard(props) {
  return (
    <div className="product">
      <h3>{props.name}</h3>
      <p>価格: ¥{props.price}</p>
      <p>{props.description}</p>
    </div>
  );
}

// 親コンポーネントからpropsを渡す
const productData = {
  name: 'React入門書',
  price: 2800,
  description: 'Reactの基本から応用まで学べる一冊です'
};

ReactDOM.render(
  <ProductCard 
    name={productData.name} 
    price={productData.price} 
    description={productData.description} 
  />,
  document.getElementById('products')
);