LoginSignup
1
1
@Semikoron

初めてのフロントエンド開発~レイアウト(HTML)編~

Last updated at Posted at 2024-06-23

初めに

　皆さん！環境構築編乗り切れたでしょうか？やっていない方は是非やってみてくださいね！

  • 前回の環境構築編

　ここからはレイアウト編、私自身が一番フロントエンドで楽しいところであり、大部分であると思っている部分の始まりです。
皆さんまずこのqiitaの画面を見て画面が四角で構成されているように見えるでしょうか？私はこの一年を通して四角が見えるようになりました。
このままではただ何言ってんだこいつ案件なのでこの前の章の環境構築編を例に挙げてみると
スクリーンショット 2024-04-27 235054.png
このように見ることができるわけです。
この四角ひとつひとつを要素と呼びます。見てわかる通り要素は中に要素を入れることもできます。
ではこの要素を作っている言語は何なのかというとそれがhtmlなのです！
ではでは、前回の続きからhtmlの基本から入っていきましょう！

Let's HTML

　まずは表示するための画面を用意しましょう。
前回の作ったアプリフォルダーの中からyahho_shopping/src/app/page.tsxをVScode上から開いてみましょう。
左上のファイルタブを選択しましょう。
image.png
するとメニューが開くので「フォルダーを開く…」を選択しましょう。
image.png
その後このような画面が開くと思うので、yahho_shoppingのフォルダーを探して開きましょう。
image.png

特定のファイルを探し、開くには以下の赤枠をクリックして「エクスプローラー」を開きましょう。

image.png
開くことができたら先ほどのファイルを探しましょう。

以下のように最初起動して表示される画面を全部削除していきます。

yahho_shopping/src/app/page.tsx
-import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
  );
}

これでhtmlを書く場所が用意できました。
ではhtmlの基本を学んでいきましょう。

htmlの基本

まず基本的にタグというもので表示させたい内容を挟み要素を作ることができます。

例
<h1>hello world!</h1>

今回はh1タグという大見出しの役割を持つタグを例に使ってみます。
見ると規則性が分かるのではないでしょうか？<>で囲まれたものがタグです。またスラッシュが入っているものを閉じタグと私は呼んでいます(もしかしたら違うかも)
では試しにこのコードを画面に表示してみましょう。

yahho_shopping/src/app/page.tsx
import styles from "./page.module.css";

export default function Home() {
  return (
+    <h1>hello world!</h1>
  );
}

入力したらhttp://localhost:3000/ を前回と同様に開いてみましょう。
おっとctrl + Sキー で編集した部分のセーブを忘れずに

すると画面はこのようになるはずです。
image.png
タグで囲んだ部分が上手く表示されていますね。
では次にいくつかのタグを紹介するのでそれらを使って商品を表示するhtmlを作っていきましょう。

imgタグ

imgタグ
<img src="[表示する画像のアドレス]"/>

こちらはimgタグで画像のアドレスをsrcというところに当てはめてあげると画像が表示できるという優れものです。商品画像を表示するのにぜひ使いたいですね。
下に使用例を載せておきます。

page.tsx
import styles from "./page.module.css";

export default function Home() {
  return (
+    <>
      <h1>hello world!</h1>
+      <img src="https://pbs.twimg.com/profile_images/1652730366892085248/djNLZzPt_400x400.jpg" />
+    </>
  );
}

image.png
上手く表示できましたね。こちらのアドレスは私のXのアイコンの画像アドレスを持ってきたものです。
インターネット上の画像ファイルにはすべてアドレスがあるので、それをコピーすれば、なんでも表示できますね(でも著作権周りには気を付けてね)

pタグ & brタグ

pタグ
<p>
    <!--1行の文を入れる--><br/>
    <!--1行の文を入れる--><br/>
    <!--同様に文を入れていく-->
           :
           :
    <!--1行の文を入れる-->
</p>

こちらはそこそこの文章の表示に特化したタグです。商品説明など短めの文章ならこのタグを使うのがいいでしょう。ですが、pタグだけでは改行が行えないので、そこでbrタグを使います。brタグを使うことによってそこで改行を行うことができます。
こちらも同様に以下の使用例を載せておきます。

page.tsx
import styles from "./page.module.css";

export default function Home() {
  return (
    <>
      <h1>hello world!</h1>
      <img src="https://pbs.twimg.com/profile_images/1652730366892085248/djNLZzPt_400x400.jpg" />
+      <p>
+        どうもフロントエンド講座の担当のSemikoronだよ。 <br />
+        めちゃめちゃVRが好きなので今はWebXRについて勉強したりしなかったり。<br />
+        皆もWeb開発を楽しんでいこう!
+      </p>
    </>
  );
}

image.png
自己紹介文がうまく表示されていますね。何となくどのようにして商品一覧ページを作っていくか何となく頭に浮かんできたのではないでしょうか？

divタグ

divタグ
<div>
    <ほかのタグ></ほかのタグ>
        :
        :
    <ほかのタグ></ほかのタグ>
</div>

<div>[一行の文章]<div>

　divタグはちょっと特殊な存在で私はほかのタグをまとめる役割を担っていると認識しています。でも実際は文章を表示するタグとしてもつかわれたりよくわからない存在です。今回だと値段表示や一種類の商品のタグすべてをまとめるのに使えますね。
こちらも使用例載せておきます。

page.tsx
import styles from "./page.module.css";

export default function Home() {
  return (
    <>
      <h1>hello world!</h1>
+      <div>
        <img src="https://pbs.twimg.com/profile_images/1652730366892085248/djNLZzPt_400x400.jpg" />
        <p>
          どうもフロントエンド講座の担当のSemikoronだよ。 <br />
          めちゃめちゃVRが好きなので今はWebXRについて勉強したりしなかったり。<br />
          皆もWeb開発を楽しんでいこう!
        </p>
+        <div>X : @Semikoron110 </div>
+      </div>
    </>
  );
}

image.png
いい感じの私の自己紹介ページができましたね。これにてHTMLの基本タグの紹介は終了です！お疲れさまでした！

実際に商品一覧ページを作ってみる

まず表示するための商品データに関するファイルを二つ作りましょう!
一つ目はデータの型を宣言するファイルです！
このファイルを作っておくことで、データをスムーズに処理できます。
src/appのディレクトリ配下に「dataType.ts」というファイルを作成し、以下のめちゃくちゃ長いコードをコピーペーストして下さい。

datatype.ts
interface Image {
  small: string;
  medium: string;
}

interface Review {
  count: number;
  url: string;
  rate: number;
}

interface PriceLabel {
  taxable: boolean;
  defaultPrice: number;
  discountedPrice: number | null;
  fixedPrice: number | null;
  premiumPrice: number | null;
  periodStart: number | null;
  periodEnd: number | null;
}

interface Point {
  amount: number;
  times: number;
  bonusAmount: number;
  bonusTimes: number;
  premiumAmount: number;
  premiumTimes: number;
  premiumBonusAmount: number;
  premiumBonusTimes: number;
}

interface Shipping {
  code: number;
  name: string;
}

interface GenreCategory {
  id: number;
  name: string;
  depth: number;
}

interface ParentGenreCategory {
  id: number;
  depth: number;
  name: string;
}

interface Brand {
  id: number | null;
  name: string;
}

interface ParentBrand {
  id: number;
  name: string;
}

interface SellerReview {
  rate: number;
  count: number;
}

interface Seller {
  sellerId: string;
  name: string;
  url: string;
  isBestSeller: boolean;
  review: SellerReview;
  imageId: string;
}

interface Delivery {
  area: string;
  deadLine: number | null;
  day: number | null;
}

export interface Hit {
  index: number;
  name: string;
  description: string;
  headLine: string;
  url: string;
  inStock: boolean;
  code: string;
  condition: string;
  imageId: string;
  image: Image;
  review: Review;
  affiliateRate: number;
  price: number;
  premiumPrice: number | null;
  premiumPriceStatus: boolean;
  premiumDiscountRate: number | null;
  premiumDiscountType: string | null;
  priceLabel: PriceLabel;
  point: Point;
  shipping: Shipping;
  genreCategory: GenreCategory;
  parentGenreCategories: ParentGenreCategory[];
  brand: Brand;
  parentBrands: ParentBrand[];
  janCode: string;
  payment: string;
  releaseDate: number | null;
  seller: Seller;
  delivery: Delivery;
}

もう一つのファイルは商品データファイルです！
先ほど定義しておいた型を使ってデータのファイルを作っていきましょう！
先ほどと同様にsrc/appのディレクトリ配下に「testData.ts」という名前で新しくファイルを作製して以下のコードをコピーペーストしましょう！

testData
import { Hit } from "./dataType";

export const testData: Hit[] = [
  {
    index: 1,
    name: "抹茶 100g 2個セット 鹿児島県産抹茶100%",
    description:
      "抹茶の原料「碾茶」は、煎茶と同じお茶の木から作られていますが、栽培の際に覆いをかけて大切に育てられます。<br>日光を遮られたお茶の葉は、渋み成分のタンニンが少なく、甘み成分のテアニンが多くなり、抹茶に適した高級茶葉になります。<br><br>",
    headLine: "鹿児島県産100%の抹茶誕生",
    url: "https://store.shopping.yahoo.co.jp/cin/10000040.html",
    inStock: true,
    code: "cin_10000040",
    condition: "new",
    imageId: "cin_10000040",
    image: {
      small: "https://item-shopping.c.yimg.jp/i/c/cin_10000040",
      medium: "https://item-shopping.c.yimg.jp/i/g/cin_10000040",
    },
    review: {
      count: 171,
      url: "https://shopping.yahoo.co.jp/review/item/list?store_id=cin&page_key=10000040",
      rate: 4.73,
    },
    affiliateRate: 1,
    price: 2000,
    premiumPrice: 1000,
    premiumPriceStatus: true,
    premiumDiscountRate: 50,
    premiumDiscountType: "normal",
    priceLabel: {
      taxable: true,
      defaultPrice: 2000,
      discountedPrice: null,
      fixedPrice: null,
      premiumPrice: 1000,
      periodStart: null,
      periodEnd: null,
    },
    point: {
      amount: 0,
      times: 0,
      bonusAmount: 36,
      bonusTimes: 2,
      premiumAmount: 0,
      premiumTimes: 0,
      premiumBonusAmount: 18,
      premiumBonusTimes: 2,
    },
    shipping: {
      code: 2,
      name: "送料無料",
    },
    genreCategory: {
      id: 17362,
      name: "抹茶",
      depth: 4,
    },
    parentGenreCategories: [
      {
        id: 2498,
        depth: 1,
        name: "食品",
      },
      {
        id: 2499,
        depth: 2,
        name: "ドリンク、水、お酒",
      },
      {
        id: 1399,
        depth: 3,
        name: "緑茶、日本茶",
      },
    ],
    brand: {
      id: 38074,
      name: "ブランド登録なし",
    },
    parentBrands: [
      {
        id: 1,
        name: "ブランド",
      },
    ],
    janCode: "",
    payment: "8192 16384 1024 4096 16 1 64",
    releaseDate: null,
    seller: {
      sellerId: "cin",
      name: "知覧一番山農園",
      url: "https://store.shopping.yahoo.co.jp/cin/",
      isBestSeller: false,
      review: {
        rate: 4.73,
        count: 55,
      },
      imageId: "cin_1",
    },
    delivery: {
      deadLine: null,
      day: null,
      area: "",
    },
  },
  {
    index: 2,
    name: "業務用サイズ 京都産 宇治抹茶 500g 大袋タイプ 日本茶 緑茶 パウダー 粉末 メール便 送料無料",
    description:
      "500gの業務用サイズ。<br>日常に多く使う個人の方にも。<br><br>名称：抹茶<br>内容量：500g<br>原材料名：緑茶(京都)<br>保存方法：直射日光・高温多湿の場所を避け、冷暗所にて保存して下さい。<br>配送区分<br>ゆうメール：全国送料無料　 代金引換×　他商品一部同梱×<br>宅配便  ：送料600円(税別)　代金引換○　他商品同梱○<br>(北海道・沖縄・離島除く)<br>製造者：株式会社高村園<br>広島県広島市安佐北区口田南1-25-27<br>TEL 082-845-8878<br><br>※原材料の緑茶の表示につきまして<br>抹茶の原料は碾茶ですが、碾茶の原料も緑茶となります。(煎茶やほうじ茶なども緑茶もしくは茶と表示)<br>この時、名称を抹茶とできるのは碾茶100%の場合です。本商品は碾茶100%から作られた抹茶となります。<br><br>※クリックポスト・ゆうパケットのため、手渡しではなく、ポスト投函となりますので、何卒ご了承くださいますよう、お願い致します。<br>追跡番号の発行がされます。ポストにお荷物が入らない場合、不在票が投函されますので、ご確認ください。",
    headLine: "チャック付袋 稽古用 料理用 お菓子作り 送料無料 日本茶 緑茶",
    url: "https://store.shopping.yahoo.co.jp/ichinoen/kyoto-uji500.html",
    inStock: true,
    code: "ichinoen_kyoto-uji500",
    condition: "new",
    imageId: "ichinoen_kyoto-uji500",
    image: {
      small: "https://item-shopping.c.yimg.jp/i/c/ichinoen_kyoto-uji500",
      medium: "https://item-shopping.c.yimg.jp/i/g/ichinoen_kyoto-uji500",
    },
    review: {
      count: 186,
      url: "https://shopping.yahoo.co.jp/review/item/list?store_id=ichinoen&page_key=kyoto-uji500",
      rate: 4.72,
    },
    affiliateRate: 1,
    price: 2160,
    premiumPrice: 2160,
    premiumPriceStatus: false,
    premiumDiscountRate: null,
    premiumDiscountType: null,
    priceLabel: {
      taxable: true,
      defaultPrice: 2160,
      discountedPrice: null,
      fixedPrice: null,
      premiumPrice: null,
      periodStart: null,
      periodEnd: null,
    },
    point: {
      amount: 0,
      times: 0,
      bonusAmount: 20,
      bonusTimes: 1,
      premiumAmount: 0,
      premiumTimes: 0,
      premiumBonusAmount: 20,
      premiumBonusTimes: 1,
    },
    shipping: {
      code: 2,
      name: "送料無料",
    },
    genreCategory: {
      id: 17362,
      name: "抹茶",
      depth: 4,
    },
    parentGenreCategories: [
      {
        id: 2498,
        depth: 1,
        name: "食品",
      },
      {
        id: 2499,
        depth: 2,
        name: "ドリンク、水、お酒",
      },
      {
        id: 1399,
        depth: 3,
        name: "緑茶、日本茶",
      },
    ],
    brand: {
      id: null,
      name: "",
    },
    parentBrands: [],
    janCode: "",
    payment: "1024 8192 1 8 128 512 16 64 256 4 4096 16384 2",
    releaseDate: null,
    seller: {
      sellerId: "ichinoen",
      name: "一の縁",
      url: "https://store.shopping.yahoo.co.jp/ichinoen/",
      isBestSeller: false,
      review: {
        rate: 4.77,
        count: 1062,
      },
      imageId: "ichinoen_1",
    },
    delivery: {
      deadLine: 12,
      day: 2,
      area: "13",
    },
  },
  {
    index: 3,
    name: "抹茶 お薄 宇治抹茶 初音200g 京都府産100% 製菓 粉末 パウダー 送料無料",
    description:
      "お菓子や料理、飲用の宇治抹茶です。<br>茶道用抹茶も製造する宇治抹茶専門メーカーが<br>極力品質を落とすことなく食品、飲料用に低価格を実現しました。<br>宇治茶の主産地　宇治田原よりお届けします。<br><br>和菓子店にも使用されている<br>菓子職人も認める宇治抹茶です。<br><br>お菓子や飲料、グリーンティーなどにご使用下さい。<br>※抹茶を点てるお客様は上級の宇治抹茶桐壷をお求め下さい。<br>※お買い得な業務用1kgもございます。<br>　このページ下に 商品ページがございます。<br><br>賞味期限は製造日より6カ月となっております。<br>これは風味高い状態で美味しくお召し上がりいただく期限として<br>抹茶メーカーが短く設定しているためです。<br><br>&lt;美味しいグリーティーの作り方&gt;<br><br>材料：抹茶：3g、グラニュー糖：14g、冷水：150ml、氷：適量<br><br>1）抹茶とグラニュー糖をグラスに入れよく混ぜる<br>2）適量の氷を入れる。<br><br>名称:抹茶（宇治抹茶100％）<br>原材料名:緑茶<br>販売者:(株)ティーエスケー<br>住所:京都府綴喜郡宇治田原町郷之口39-2<br>",
    headLine: "抹茶　粉末　製菓　パウダー　送料無料　抹茶ラテ",
    url: "https://store.shopping.yahoo.co.jp/tsk-store/302.html",
    inStock: true,
    code: "tsk-store_302",
    condition: "new",
    imageId: "tsk-store_302",
    image: {
      small: "https://item-shopping.c.yimg.jp/i/c/tsk-store_302",
      medium: "https://item-shopping.c.yimg.jp/i/g/tsk-store_302",
    },
    review: {
      count: 725,
      url: "https://shopping.yahoo.co.jp/review/item/list?store_id=tsk-store&page_key=302",
      rate: 4.66,
    },
    affiliateRate: 1,
    price: 1000,
    premiumPrice: 1000,
    premiumPriceStatus: false,
    premiumDiscountRate: null,
    premiumDiscountType: null,
    priceLabel: {
      taxable: true,
      defaultPrice: 1000,
      discountedPrice: null,
      fixedPrice: null,
      premiumPrice: null,
      periodStart: null,
      periodEnd: null,
    },
    point: {
      amount: 0,
      times: 0,
      bonusAmount: 9,
      bonusTimes: 1,
      premiumAmount: 0,
      premiumTimes: 0,
      premiumBonusAmount: 9,
      premiumBonusTimes: 1,
    },
    shipping: {
      code: 2,
      name: "送料無料",
    },
    genreCategory: {
      id: 17362,
      name: "抹茶",
      depth: 4,
    },
    parentGenreCategories: [
      {
        id: 2498,
        depth: 1,
        name: "食品",
      },
      {
        id: 2499,
        depth: 2,
        name: "ドリンク、水、お酒",
      },
      {
        id: 1399,
        depth: 3,
        name: "緑茶、日本茶",
      },
    ],
    brand: {
      id: null,
      name: "",
    },
    parentBrands: [],
    janCode: "4571163810202",
    payment: "16 64 512 1024 8192 1 128 256 4096 16384",
    releaseDate: null,
    seller: {
      sellerId: "tsk-store",
      name: "ティーエスケー",
      url: "https://store.shopping.yahoo.co.jp/tsk-store/",
      isBestSeller: false,
      review: {
        rate: 4.82,
        count: 731,
      },
      imageId: "tsk-store_1",
    },
    delivery: {
      deadLine: null,
      day: null,
      area: "",
    },
  },
  {
    index: 4,
    name: "抹茶 京都産 宇治抹茶 200g (100g×2) お薄 日本茶 緑茶 パウダー 粉末 送料無料",
    description:
      "名称：抹茶<br>内容量：200g(100g×2)<br>原材料名：緑茶(京都)<br>保存方法：直射日光・高温多湿の場所を避け、冷暗所にて保存して下さい。<br>配送区分：ゆうメール：全国送料無料　代金引換×　他商品一部同梱○ <br>宅配便：送料600円(税別)　代金引換○　他商品同梱○<br>(北海道・沖縄・離島除く)<br>製造者：株式会社高村園<br>広島県広島市安佐北区口田南1-25-27<br>TEL 082-845-8878<br><br>※原材料の緑茶の表示につきまして<br>抹茶の原料は碾茶ですが、碾茶の原料も緑茶となります。(煎茶やほうじ茶なども緑茶もしくは茶と表示)<br>この時、名称を抹茶とできるのは碾茶100%の場合です。本商品は碾茶100%から作られた抹茶となります。",
    headLine: "送料無料 お稽古用に お料理用に お菓子作りに",
    url: "https://store.shopping.yahoo.co.jp/ichinoen/kyoto-uji200.html",
    inStock: true,
    code: "ichinoen_kyoto-uji200",
    condition: "new",
    imageId: "ichinoen_kyoto-uji200",
    image: {
      small: "https://item-shopping.c.yimg.jp/i/c/ichinoen_kyoto-uji200",
      medium: "https://item-shopping.c.yimg.jp/i/g/ichinoen_kyoto-uji200",
    },
    review: {
      count: 418,
      url: "https://shopping.yahoo.co.jp/review/item/list?store_id=ichinoen&page_key=kyoto-uji200",
      rate: 4.58,
    },
    affiliateRate: 1,
    price: 1080,
    premiumPrice: 1080,
    premiumPriceStatus: false,
    premiumDiscountRate: null,
    premiumDiscountType: null,
    priceLabel: {
      taxable: true,
      defaultPrice: 1080,
      discountedPrice: null,
      fixedPrice: null,
      premiumPrice: null,
      periodStart: null,
      periodEnd: null,
    },
    point: {
      amount: 0,
      times: 0,
      bonusAmount: 10,
      bonusTimes: 1,
      premiumAmount: 0,
      premiumTimes: 0,
      premiumBonusAmount: 10,
      premiumBonusTimes: 1,
    },
    shipping: {
      code: 2,
      name: "送料無料",
    },
    genreCategory: {
      id: 17362,
      name: "抹茶",
      depth: 4,
    },
    parentGenreCategories: [
      {
        id: 2498,
        depth: 1,
        name: "食品",
      },
      {
        id: 2499,
        depth: 2,
        name: "ドリンク、水、お酒",
      },
      {
        id: 1399,
        depth: 3,
        name: "緑茶、日本茶",
      },
    ],
    brand: {
      id: null,
      name: "",
    },
    parentBrands: [],
    janCode: "",
    payment: "1024 8192 16 256 16384 4 512 128 2 8 64 4096 1",
    releaseDate: null,
    seller: {
      sellerId: "ichinoen",
      name: "一の縁",
      url: "https://store.shopping.yahoo.co.jp/ichinoen/",
      isBestSeller: false,
      review: {
        rate: 4.77,
        count: 1062,
      },
      imageId: "ichinoen_1",
    },
    delivery: {
      deadLine: 12,
      day: 2,
      area: "13",
    },
  },
  {
    index: 5,
    name: "抹茶 国内産抹茶 ２２０g 業務用 付属スプーンで約1100杯分 送料無料",
    description:
      "名称：抹茶<br>原材料：緑茶<br>産地：国内産<br>内容量：２２０ｇ<br>賞味期限：製造日より１０ヶ月<br><br>開封後はお早めにお召し上がりください。<br>高温多湿を避け移り香ににご注意ください。<br><br><br>【１〜２個ご注文の場合】☆ポスト投函（ネコポス便）☆<br><br>到着日時ご指定不可、代引き不可、送料無料<br><br><br>【３個以上ご注文の場合】☆ゆうパック☆<br><br>到着日時ご指定可、代引き可、送料無料",
    headLine: "抹茶 スイーツ作りに お点前練習用に最適 送料無料",
    url: "https://store.shopping.yahoo.co.jp/kakuto/machakokunai-m.html",
    inStock: true,
    code: "kakuto_machakokunai-m",
    condition: "new",
    imageId: "kakuto_machakokunai-m",
    image: {
      small: "https://item-shopping.c.yimg.jp/i/c/kakuto_machakokunai-m",
      medium: "https://item-shopping.c.yimg.jp/i/g/kakuto_machakokunai-m",
    },
    review: {
      count: 31,
      url: "https://shopping.yahoo.co.jp/review/item/list?store_id=kakuto&page_key=machakokunai-m",
      rate: 4.48,
    },
    affiliateRate: 1,
    price: 1200,
    premiumPrice: 1200,
    premiumPriceStatus: false,
    premiumDiscountRate: null,
    premiumDiscountType: null,
    priceLabel: {
      taxable: true,
      defaultPrice: 1200,
      discountedPrice: null,
      fixedPrice: null,
      premiumPrice: null,
      periodStart: null,
      periodEnd: null,
    },
    point: {
      amount: 0,
      times: 0,
      bonusAmount: 11,
      bonusTimes: 1,
      premiumAmount: 0,
      premiumTimes: 0,
      premiumBonusAmount: 11,
      premiumBonusTimes: 1,
    },
    shipping: {
      code: 2,
      name: "送料無料",
    },
    genreCategory: {
      id: 17362,
      name: "抹茶",
      depth: 4,
    },
    parentGenreCategories: [
      {
        id: 2498,
        depth: 1,
        name: "食品",
      },
      {
        id: 2499,
        depth: 2,
        name: "ドリンク、水、お酒",
      },
      {
        id: 1399,
        depth: 3,
        name: "緑茶、日本茶",
      },
    ],
    brand: {
      id: null,
      name: "",
    },
    parentBrands: [],
    janCode: "",
    payment: "4096 8192 16384 1 16 64 4",
    releaseDate: null,
    seller: {
      sellerId: "kakuto",
      name: "お茶のカクト",
      url: "https://store.shopping.yahoo.co.jp/kakuto/",
      isBestSeller: false,
      review: {
        rate: 4.66,
        count: 1366,
      },
      imageId: "kakuto_1",
    },
    delivery: {
      deadLine: null,
      day: null,
      area: "",
    },
  },
];

ここで宣言されているtestDataを見てみると、商品の詳細情報だけでなくショップ情報(seller)や配達するまでの日数(delivery.day)など様々なデータが入っていることが分かりますね！

最後にpageファイルに先ほど作成したファイルをインポートするコードを追加し、表示できるようにしましょう！
以下のようにコードを編集してください。

page.tsx
+"use client"
+import { useState } from "react";
+import { Hit } from "./dataType";
+import { testData } from "./testData";
import styles from "./page.module.css";

export default function Home() {
+  const [searchResult, setSearchResult] = useState<Hit[]>(testData);

  return (
    <>
-      <h1>hello world!</h1>
-      <div>
-        <img src="https://pbs.twimg.com/profile_images/1652730366892085248/djNLZzPt_400x400.jpg" />
-        <p>
-          どうもフロントエンド講座の担当のSemikoronだよ。 <br />
-          めちゃめちゃVRが好きなので今はWebXRについて勉強したりしなかったり。
-          <br />
-          皆もWeb開発を楽しんでいこう!
-        </p>
-        <div>X : @Semikoron110 </div>
-      </div>
    </>
  );
}

これができたらようやく商品データを使う準備ができました！
さて次にデータの使い方です!
以下にそれぞれの表示の仕方を載せておくので確認しましょう！

商品名、値段の表示方法

商品名、値段の表示
<p>{testData[0].name}</p>
<div>{testData[0].price}円</div>

中括弧を使ってtestdataの0番目のデータのnameとpriceをそれぞれ指定して表示しています。配列を習っていないと少し難しいですが、今は0の部分を変えるとほかの商品が表示できると認識してもらってOKです。
実際に表示してみると
image.png
いい感じに表示できていますね。

商品画像の表示方法

商品の画像の表示
<img src={testData[0].image.medium}/>
<img src={testData[0].image.small}/>

imgタグの画像アドレスの部分に中括弧を使ってデータを入れています。今回画像アドレスの画像データは大きさを中と小用意しているのでその部分も指定しています。
上の行が中の画像を表示するコードで、下の行が小の画像を表示するコードになっています。
実際に表示すると
image.png
横並びになっていますがしっかり表示できていますね。

商品を一つ表示してみよう!

では実際に先ほど紹介した知識を生かして一つの商品を表示してみましょう！
難しかったら近くのメンターを読んでみてね。

マップ関数でデータの商品を全て表示する

今作ったコードを複製してデータの商品すべて表示するのは大変ですよね。
ここで便利なのはマップ関数です。これを使うことで配列で保存されているデータを全て表示できます。

先ほど作ったコードの
中括弧の中身のtestData[0]だけをitemに変えて
Ex) testData[0].image.small → item.image.small

以下のように作ったコードを変えてみてください

page.tsx
return(
<>
+    {searchResult.map((item: Hit) => (
+        <div key={item.index}>
            //testdata[0].～をitem.～に変えた、皆さんが作った商品を表示するコード
+        </div>
+    ))}
</>

すると上手くいっている方はこのように表示されているのではないでしょうか？
image.png
上手くいってない方はメンターの方を呼んでみてくださいね！

さてお疲れさまでした！ここでレイアウト編は一度終了です！
次は機能実装編です！このショッピングを検索して、もっと色んな商品を表示できるようにしましょう！

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
1