LESSON 3|

JSXの中にJavaScriptを埋め込む

このレッスンでは、JSXにJavaScriptの変数や計算式を埋め込む方法について学習します。変数の定義から始めて、最終的には商品情報を動的に表示する商品カードコンポーネントを作成しましょう！

Step 1

商品名とブランド名を表示してみよう！

商品名とブランド名を変数に保存してJSXで表示してみましょう。 JavaScriptの変数は「const 変数名 = 値;」の形式で作成します。 Reactコンポーネントでは、JSXを返すreturnより前に変数を定義しておく必要があります。 JSXの中で波括弧{}を使うと、その中のJavaScript式が実行されて結果が画面に表示されます。以下の変数を定義して表示してください： - productName: "スマートウォッチ" - brandName: "TechGear"

App.jsx

import './styles.css'

const App = () => {
  // ここに商品名とブランド名の変数を定義してください
  const productName = "???";
  const brandName = "???";
  
  return (
    <div className="product-card">
      <div className="product-image-container">
        {/* 画像はステップ2で追加 */}
      </div>
      <div className="product-info">
        <p className="brand-name">{/* ここにブランド名を表示 */}</p>
        <h1>{/* ここに商品名を表示 */}</h1>
      </div>
    </div>
  )
}

export default App

📝 変数の定義

const productName = "スマートウォッチ";
const brandName = "TechGear";

📝 JSXへの埋め込み

<p className="brand-name">{brandName}</p>
<h1>{productName}</h1>

Step 2

商品画像を表示しよう！

今度は商品画像を表示してみましょう。 JSXでは、要素の属性値にも波括弧{}を使って変数を埋め込むことができます。以下の変数を定義して、img要素のsrc属性とalt属性に設定し、画像を表示してください： - imageUrl: 商品画像のURL - altText: "スマートウォッチの商品画像"

💡JSXの属性で変数を使う方法

App.jsx

import './styles.css'

const App = () => {
  const productName = "スマートウォッチ";
  const brandName = "TechGear";
  
  // ここに画像URLとalt属性の変数を追加してください
  
  return (
    <div className="product-card">
      <div className="product-image-container">
        <img 
          className="product-image"
          src={/* 画像URLを設定 */}
          alt={/* alt属性を設定 */}
        />
      </div>
      <p className="brand-name">{brandName}</p>
      <h1>{productName}</h1>
    </div>
  )
}

export default App

📝 画像URLとalt属性の変数

const imageUrl = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=533&fit=crop&crop=center";
const altText = "スマートウォッチの商品画像";

📝 img要素での変数使用

<div className="product-image-container">
  <img 
    className="product-image"
    src={imageUrl}
    alt={altText}
  />
</div>

Step 3

価格と割引を計算しよう！

今度は商品の価格と割引を計算して表示しましょう。
JSXの波括弧{}には、変数だけでなく計算式や関数呼び出しなど、
様々なJavaScript式を埋め込むことができます。

JSXより前に変数を定義

const price = 12000;
const discountRate = 0.20;
const discountBadge = Math.round(discountRate * 100) + '%OFF';

JSX内で記述

<div className="price-container">
  {/* 計算式と関数を直接実行 */}
  <p className="discount-price">¥{(price - price * discountRate).toLocaleString()}</p>
  {/* toLocaleString()を直接実行 */}
  <p className="price">¥{price.toLocaleString()}</p>
  {/* 事前に定義した変数を直接参照 */}
  <span className="discount-badge">{discountBadge}</span>
</div>

いろんなやり方がありますが、JSXより前に変数定義する方が読みやすく再利用でき、
コンポーネントが再レンダリングされても無駄な計算を避けられるので効率的です。

💡JSXでの計算式と関数の組み合わせ

App.jsx

import './styles.css'

const App = () => {
  const productName = "スマートウォッチ";
  const brandName = "TechGear";
  
  const imageUrl = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=533&fit=crop&crop=center";
  const altText = "スマートウォッチの商品画像";
  
  // ここに価格と割引率の変数を追加してください
  
  return (
    <div className="product-card">
      <div className="product-image-container">
        <img 
          className="product-image"
          src={imageUrl}
          alt={altText}
        />
      </div>
      <p className="brand-name">{brandName}</p>
      <h1>{productName}</h1>
      <div className="price-container">
        <p className="discount-price">{/* 割引価格を表示 */}</p>
        <p className="price">{/* 定価を表示 */}</p>
        <span className="discount-badge">{/* 割引率を表示 */}</span>
      </div>
    </div>
  )
}

export default App

📝 価格と割引率の変数

const price = 12000;
const discountRate = 0.20;
const discountBadge = Math.round(discountRate * 100) + '%OFF';

📝 価格の表示

<div className="price-container">
  <p className="discount-price">¥{(price - price * discountRate).toLocaleString()}</p>
  <p className="price">¥{price.toLocaleString()}</p>
  <span className="discount-badge">{discountBadge}</span>
</div>

Step 4

星評価の関数を作ろう

今度は、商品の評価を星で表示する関数を作ってみましょう。

関数は、決まった処理を実行して結果を返す仕組みです。
値を受け取って何らかの処理を行い、結果を返します。

関数は以下の形式で作成します：

const 関数名 = (引数) => {
  return 関数の中身;
}

では、「getStarRating」という関数を定義し、
塗りつぶし星（★）と空の星（☆）で5段階評価を表示しましょう。

const getStarRating = (rating) => {
  return '★'.repeat(rating) + '☆'.repeat(5 - rating);
}

この関数は、rating（評価数）を受け取って、その数だけ★を表示し、残りは☆で埋めて5段階評価を作ります。
では、評価4つ星とレビュー数を表示してください。

App.jsx

import './styles.css'

const App = () => {
  const productName = "スマートウォッチ";
  const brandName = "TechGear";
  
  const imageUrl = "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=533&fit=crop&crop=center";
  const altText = "スマートウォッチの商品画像";
  
  const price = 12000;
  const discountRate = 0.20;
  const discountBadge = Math.round(discountRate * 100) + '%OFF';
  
  // ここに星評価を返す関数を作ってください
  
  return (
    <div className="product-card">
      <div className="product-image-container">
        <img 
          className="product-image"
          src={imageUrl}
          alt={altText}
        />
      </div>
      <div className="product-info">
        <p className="brand-name">{brandName}</p>
        <h1>{productName}</h1>
        <div className="price-container">
          <p className="discount-price">¥{(price - price * discountRate).toLocaleString()}</p>
          <p className="price">¥{price.toLocaleString()}</p>
          <span className="discount-badge">{discountBadge}</span>
        </div>
        <p className="rating">{/* 星評価関数を呼び出してください */}</p>
      </div>
    </div>
  )
}

export default App

📝 星評価を返す関数

const getStarRating = (rating) => {
  return '★'.repeat(rating) + '☆'.repeat(5 - rating);
}

const reviewCount = 128;

📝 関数の呼び出し

<p className="rating">
  {getStarRating(4)}
  <span className="review-count">({reviewCount})</span>
</p>

Step 5

商品オブジェクトをまとめよう！

最後に、すべての商品情報を1つのオブジェクトにまとめてみましょう。

オブジェクトにまとめることで、関連するデータを整理して管理しやすくなり、
プロパティ名でアクセスするためコードが読みやすく、データの受け渡しも簡単になります。

オブジェクトの使い方：

const product = {
  name: "商品名",
  price: 12000
};
// ドット記法でアクセス
console.log(product.name); // "商品名"
console.log(product.price); // 12000

「product」オブジェクトを作成し、name、brand、price、discountRate、rating、reviewCount、imageUrl、altTextプロパティを持たせてください。
そして、すべてのプロパティを使って商品カードを表示してください。

App.jsx

import './styles.css'

const App = () => {
  
  // ここにproductオブジェクトを作成してください

  const discountBadge = Math.round(product.discountRate * 100) + '%OFF';
  const discountedPrice = product.price - product.price * product.discountRate;
  const getStarRating = (rating) => {
    return '★'.repeat(rating) + '☆'.repeat(5 - rating);
  } 
  
  return (
    <div className="product-card">
      <div className="product-image-container">
        <img 
          className="product-image"
          src={/* product.imageUrl */}
          alt={/* product.altText */}
        />
      </div>
      <p className="brand-name">{/* product.brand */}</p>
      <h1>{/* product.name */}</h1>
      <div className="price-container">
        <p className="discount-price">{/* 割引価格 */}</p>
        <p className="price">{/* 定価 */}</p>
        <span className="discount-badge">{/* 割引率 */}</span>
      </div>
      <p className="rating">{/* getStarRatingとレビュー数 */}</p>
    </div>
  )
}

export default App

📝 商品オブジェクトの作成

const product = {
  name: "スマートウォッチ",
  brand: "TechGear",
  price: 12000,
  discountRate: 0.20,
  rating: 4,
  reviewCount: 128,
  imageUrl: "https://images.unsplash.com/photo-1523275335684-37898b6baf30?w=400&h=533&fit=crop&crop=center",
  altText: "スマートウォッチの商品画像"
};

const discountBadge = Math.round(product.discountRate * 100) + '%OFF';
const discountedPrice = product.price - product.price * product.discountRate;
const getStarRating = (rating) => {
  return '★'.repeat(rating) + '☆'.repeat(5 - rating);
}

📝 オブジェクトのプロパティを使った表示

return (
  <div className="product-card">
    <div className="product-image-container">
      <img 
        className="product-image"
        src={product.imageUrl}
        alt={product.altText}
      />
    </div>
    <div className="product-info">
      <p className="brand-name">{product.brand}</p>
      <h1>{product.name}</h1>
      <div className="price-container">
        <p className="discount-price">¥{discountedPrice.toLocaleString()}</p>
        <p className="price">¥{product.price.toLocaleString()}</p>
        <span className="discount-badge">{discountBadge}</span>
      </div>
      <p className="rating">
        {getStarRating(product.rating)}
        <span className="review-count">({product.reviewCount})</span>
      </p>
    </div>
  </div>
)

お疲れ様でした！次のレッスンへ進みましょう！