【Gemini Code Assist】VS Code + React でフロントエンドアプリケーション作成（１）| 環境準備と基本アプリケーションの作成

import React, { useState } from 'react';
import './CartInfoScreen.css';

// ダミーのカートデータ（実際にはAPIなどから取得することを想定）
const dummyCartData = {
  user123: {
    userId: 'user123',
    items: [
      { id: 'item001', name: '商品A', price: 1200, quantity: 2 },
      { id: 'item002', name: '商品B', price: 800, quantity: 1 },
    ],
    totalAmount: 3200,
  },
  user789: {
    userId: 'user789',
    items: [
      { id: 'item003', name: '商品C', price: 2500, quantity: 1 },
      { id: 'item004', name: '商品D', price: 300, quantity: 3 },
      { id: 'item005', name: '商品E', price: 150, quantity: 5 },
    ],
    totalAmount: 4150,
  },
};

function CartInfoScreen() {
  const [userId, setUserId] = useState('');
  const [cartInfo, setCartInfo] = useState(null);
  const [error, setError] = useState('');

  const handleDisplayCart = () => {
    setError('');
    setCartInfo(null);
    if (!userId.trim()) {
      setError('ユーザーIDを入力してください。');
      return;
    }
    const data = dummyCartData[userId];
    if (data) {
      setCartInfo(data);
    } else {
      setError('該当するユーザーのカート情報は見つかりませんでした。');
    }
  };

  const handleClear = () => {
    setUserId('');
    setCartInfo(null);
    setError('');
  };

  return (
    <div className="cart-info-screen">
      <h2>カート情報</h2>
      <div className="input-area">
        <label htmlFor="userIdInput">ユーザーID:</label>
        <input
          type="text"
          id="userIdInput"
          value={userId}
          onChange={(e) => setUserId(e.target.value)}
          placeholder="ユーザーIDを入力"
        />
        <button onClick={handleDisplayCart} className="action-button">
          表示
        </button>
        <button onClick={handleClear} className="clear-button">
          クリア
        </button>
      </div>

      {error && <p className="error-message">{error}</p>}

      {cartInfo && (
        <div className="cart-display-area">
          <h3>カート内容 (ユーザーID: {cartInfo.userId})</h3>
          {cartInfo.items.length > 0 ? (
            <table>
              <thead>
                <tr>
                  <th>商品名</th>
                  <th>価格</th>
                  <th>数量</th>
                  <th>小計</th>
                </tr>
              </thead>
              <tbody>
                {cartInfo.items.map((item) => (
                  <tr key={item.id}>
                    <td>{item.name}</td>
                    <td>¥{item.price.toLocaleString()}</td>
                    <td>{item.quantity}</td>
                    <td>¥{(item.price * item.quantity).toLocaleString()}</td>
                  </tr>
                ))}
              </tbody>
              <tfoot>
                <tr>
                  <td colSpan="3" style={{ textAlign: 'right' }}>
                    <strong>合計金額:</strong>
                  </td>
                  <td>
                    <strong>¥{cartInfo.totalAmount.toLocaleString()}</strong>
                  </td>
                </tr>
              </tfoot>
            </table>
          ) : (
            <p>カートに商品がありません。</p>
          )}
        </div>
      )}
    </div>
  );
}

export default CartInfoScreen;

.cart-info-screen {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  padding: 25px;
  background-color: #f0f8ff; /* AliceBlue - 薄い青系 */
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  color: #333;
  max-width: 800px;
  margin: 20px auto;
}

.cart-info-screen h2 {
  color: #2c3e50; /* Dark Slate Gray - 落ち着いた色 */
  text-align: center;
  margin-bottom: 25px;
  font-size: 1.8em;
}

.input-area {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
  padding: 15px;
  background-color: #e6f3ff; /* さらに薄い青 */
  border-radius: 8px;
}

.input-area label {
  font-weight: 600;
  color: #34495e; /* Wet Asphalt - 落ち着いた色 */
}

.input-area input[type="text"] {
  padding: 10px 12px;
  border: 1px solid #b0c4de; /* LightSteelBlue */
  border-radius: 6px;
  font-size: 1em;
  flex-grow: 1;
}

.input-area input[type="text"]:focus {
  outline: none;
  border-color: #6fa8dc; /* CornflowerBlue - フォーカス時の色 */
  box-shadow: 0 0 0 2px rgba(111, 168, 220, 0.2);
}

.action-button,
.clear-button {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s ease;
}

.action-button {
  background-color: #6fa8dc; /* CornflowerBlue */
  color: white;
}

.action-button:hover {
  background-color: #548bba; /* 少し濃い青 */
}

.clear-button {
  background-color: #d0e0f0; /* LightSteelBlue より少し濃い */
  color: #333;
}

.clear-button:hover {
  background-color: #b0c4de; /* LightSteelBlue */
}

.error-message {
  color: #c0392b; /* Pomegranate - エラー色 */
  background-color: #fdecea;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 20px;
  border: 1px solid #e74c3c;
}

.cart-display-area {
  margin-top: 25px;
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #d1e0ec; /* 薄い青系の境界線 */
  border-radius: 8px;
}

.cart-display-area h3 {
  color: #2980b9; /* Belize Hole - 青系 */
  margin-top: 0;
  margin-bottom: 15px;
  border-bottom: 2px solid #e0f0ff;
  padding-bottom: 10px;
}

.cart-display-area table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.cart-display-area th,
.cart-display-area td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0f0ff; /* 薄い青系の境界線 */
}

.cart-display-area th {
  background-color: #e6f3ff; /* さらに薄い青 */
  color: #34495e; /* Wet Asphalt */
  font-weight: 600;
}

.cart-display-area tr:last-child td {
  border-bottom: none;
}

.cart-display-area tr:hover {
  background-color: #f8fcff;
}

.cart-display-area tfoot td {
  font-weight: bold;
  color: #2c3e50;
  background-color: #e6f3ff;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #e0f0ff; /* 全体の背景を薄い青に */
  color: #333;
}

.App {
  text-align: center;
}

.App-header {
  background-color: #add8e6; /* LightBlue - ヘッダーの背景 */
  padding: 20px;
  color: white;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

import React from 'react';
import CartInfoScreen from './components/CartInfoScreen';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>カート情報アプリ</h1>
      </header>
      <main>
        <CartInfoScreen />
      </main>
    </div>
  );
}

export default App