React

この用語をシェア

概要

Reactは、2013年にFacebook（現在のMeta）が開発したユーザーインターフェース構築のためのJavaScriptライブラリです。コンポーネントベースのアーキテクチャと仮想DOMにより、効率的で保守性の高いシングルページアプリケーションを構築できます。

主要特徴

• コンポーネントベースアーキテクチャ：再利用可能なUIコンポーネントを作成
• 仮想DOM (Virtual DOM)：効率的なDOM操作で高速なレンダリングを実現
• JSX：JavaScript内でHTMLライクな構文でUIを記述
• 単方向データフロー：予測可能なデータの流れでバグを減らす
• 学習コストの低さ：シンプルなAPIで理解しやすい
• 豊富なエコシステム：多数のサードパーティライブラリ、ツール

コアコンセプト

• コンポーネント：独立した再利用可能なUIパーツ
• Props：コンポーネントにデータを渡すためのパラメータ
• State：コンポーネントの内部状態を管理
• Hooks：関数コンポーネントで状態やライフサイクルを扱う機能
• Context：コンポーネントツリー全体でデータを共有

基本的なコード例

import React, { useState, useEffect } from 'react';

// 関数コンポーネントの定義
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // ユーザー情報を取得する副作用
  useEffect(() => {
    const fetchUser = async () => {
      try {
        setLoading(true);
        const response = await fetch(`/api/users/${userId}`);
        if (!response.ok) throw new Error('ユーザー情報の取得に失敗しました');
        const userData = await response.json();
        setUser(userData);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchUser();
  }, [userId]);

  // ローディング状態
  if (loading) {
    return 
読み込み中...




この用語についてもっと詳しく

Reactに関するご質問や、システム導入のご相談など、お気軽にお問い合わせください。


お問い合わせ
サービス一覧