feat: 靴のギャラリーとショッピングカートの完成品 (#169)

tuqulore · Jun 28, 2022 · 113d121 · 113d121
1 parent dec4a04
commit 113d121
Show file tree

Hide file tree

Showing 28 changed files with 762 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -34,6 +34,7 @@ Vue 3 / Nuxt 3 を学習するための
 | Nuxt 3                                            | [ハンズオン](https://stackblitz.com/fork/github/tuqulore/vue-3-practices/tree/main/handson-nuxt?file=app.vue&terminal=dev)                                                                                                                                                  |
 | Nuxt 3 `suspense` `public` `composables` `server` | [ハンズオン](https://stackblitz.com/fork/github/tuqulore/vue-3-practices/tree/main/handson-nuxt-playground?file=app.vue&terminal=dev)                                                                                                                                       |
 | 靴のギャラリー                                    | [ハンズオン](https://stackblitz.com/fork/github/tuqulore/vue-3-practices/tree/main/handson-gallery-shoes?file=src/App.vue&terminal=dev) [完成](https://stackblitz.com/github/tuqulore/vue-3-practices/tree/main/handson-gallery-shoes-finish?file=src/App.vue&terminal=dev) |
+| 靴のギャラリーとショッピングカート                | [完成](https://stackblitz.com/github/tuqulore/vue-3-practices/tree/main/handson-gallery-shoes-cart-finish?file=src/App.vue&terminal=dev)                                                                                                                                    |
 
 ## サンプル
 

diff --git a/handson-gallery-shoes-cart-finish/.gitignore b/handson-gallery-shoes-cart-finish/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/handson-gallery-shoes-cart-finish/README.md b/handson-gallery-shoes-cart-finish/README.md
@@ -0,0 +1,7 @@
+# Vue 3 + Vite
+
+This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
diff --git a/handson-gallery-shoes-cart-finish/index.html b/handson-gallery-shoes-cart-finish/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
diff --git a/handson-gallery-shoes-cart-finish/package.json b/handson-gallery-shoes-cart-finish/package.json
@@ -0,0 +1,31 @@
+{
+  "name": "vue-3-practices-handson-gallery-shoes-cart-finish",
+  "description": "ハンズオン gallery-shoes-cart 完成",
+  "version": "1.0.0",
+  "author": "tuqulore Inc.",
+  "bugs": {
+    "url": "https://github.com/tuqulore/vue-3-practices/issues"
+  },
+  "dependencies": {
+    "vue": "^3.2.33"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "2.3.3",
+    "vite": "2.9.12"
+  },
+  "homepage": "https://github.com/tuqulore/vue-3-practices#readme",
+  "keywords": [
+    "vue3"
+  ],
+  "license": "MIT",
+  "main": "",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tuqulore/vue-3-practices.git"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "preview": "vite preview"
+  }
+}
diff --git a/handson-gallery-shoes-cart-finish/public/favicon.ico b/handson-gallery-shoes-cart-finish/public/favicon.ico
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-01.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-01.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-02.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-02.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-03.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-03.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-04.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-04.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-05.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-05.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-06.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-06.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-07.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-07.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-08.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-08.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-09.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-09.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-10.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-10.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-11.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-11.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/img/items/shoes-12.jpg b/handson-gallery-shoes-cart-finish/public/img/items/shoes-12.jpg
diff --git a/handson-gallery-shoes-cart-finish/public/json/shoes.json b/handson-gallery-shoes-cart-finish/public/json/shoes.json
@@ -0,0 +1,100 @@
+{
+    "shoes": [
+        {
+            "name": "ビビッドランニングシューズ　防水性　軽量タイプ　グリーン",
+            "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。防水・防風・撥水性あり、屋外向け。",
+            "price": 9560,
+            "commentsNum": 16,
+            "photoFileName": "shoes-01.jpg",
+            "rating": 4.5
+        },
+        {
+            "name": "カジュアルシューズ　防臭効果と通気性◎　ブルーグレー",
+            "description": "特殊加工した樹脂を使用し、通気性も抜群。特に汗をかきやすい夏の時期、普段使いに。",
+            "price": 5400,
+            "commentsNum": 47,
+            "photoFileName": "shoes-02.jpg",
+            "rating": 4.0
+        },
+        {
+            "name": "カジュアルランニングシューズ　ベージュ",
+            "description": "ランニングにはもちろん、ふんわりクッション性のあるソールは床に傷がつきにくく、屋内でも安心して使えます。",
+            "price": 6600,
+            "commentsNum": 13,
+            "photoFileName": "shoes-03.jpg",
+            "rating": 3.0
+        },
+        {
+            "name": "カジュアルシューズ　普段使いや通勤・通学にも！",
+            "description": "柔らかく丈夫な合皮を使用しており、通勤や通学にもぴったり。コーデの邪魔をしないシックなコンビカラーです。",
+            "price": 6900,
+            "commentsNum": 41,
+            "photoFileName": "shoes-04.jpg",
+            "rating": 3.5
+        },
+        {
+            "name": "ビビッドランニングシューズ　防滑性　ブルー",
+            "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。通気性・防滑性あり、屋内向け。",
+            "price": 9800,
+            "commentsNum": 41,
+            "photoFileName": "shoes-05.jpg",
+            "rating": 3.5
+        },
+        {
+            "name": "ランニングシューズ　防水性　ダークグレー＆グリーン",
+            "description": "足元に蛍光色をオンして、ランニングも楽しく！防水メッシュ加工で、雨の日でも快適な履き心地です。",
+            "price": 7000,
+            "commentsNum": 14,
+            "photoFileName": "shoes-06.jpg",
+            "rating": 3.0
+        },
+        {
+            "name": "ランニングシューズ　防風性　ブラック＆ブルー",
+            "description": "完全防水・滑りにくいグリップで初心者から上級者まで、幅広いランナーに対応。風を通しにくく真冬のランでも安心。",
+            "price": 7000,
+            "commentsNum": 20,
+            "photoFileName": "shoes-07.jpg",
+            "rating": 4.5
+        },
+        {
+            "name": "ランニングシューズ　防滑性　ダークグレー＆レッド",
+            "description": "完全防水・滑りにくいグリップを採用。風を通しにくく真冬のランでも安心。こちらは軽量ゴム紐タイプで結ぶ手間ゼロ。",
+            "price": 8000,
+            "commentsNum": 11,
+            "photoFileName": "shoes-08.jpg",
+            "rating": 4.5
+        },
+        {
+            "name": "ビビッドランニングシューズ　クッション性　ピンク",
+            "description": "足元から気持ちを明るく、をコンセプトにしたビビッドカラーシリーズ。通気性・クッション性があり屋内屋外兼用。",
+            "price": 9980,
+            "commentsNum": 24,
+            "photoFileName": "shoes-09.jpg",
+            "rating": 4.5
+        },
+        {
+            "name": "ウォーキングシューズ　屈曲性超軽量タイプ　ホワイト",
+            "description": "超軽量薄型。踏み返しをしながら歩行ができる設計になっており、ウォーキングの際の足にかかるストレスを軽減。",
+            "price": 8000,
+            "commentsNum": 46,
+            "photoFileName": "shoes-10.jpg",
+            "rating": 3.5
+        },
+        {
+            "name": "バスケットシューズ　カジュアルメンズ　マルチカラー",
+            "description": "クッション性や反発力、耐久性などの機能性を網羅しており、足首から爪先までしっかりフィットします。",
+            "price": 9900,
+            "commentsNum": 52,
+            "photoFileName": "shoes-11.jpg",
+            "rating": 4.0
+        },
+        {
+            "name": "カジュアル　ウォーキングシューズ　大きいサイズあり",
+            "description": "男女兼用でサイズ展開も豊富！ビッグサイズも一部取扱いあり。ミッドソールはジェル素材で、膝への負担も軽減！",
+            "price": 7900,
+            "commentsNum": 59,
+            "photoFileName": "shoes-12.jpg",
+            "rating": 4.5
+        }
+    ]
+}
diff --git a/handson-gallery-shoes-cart-finish/src/App.vue b/handson-gallery-shoes-cart-finish/src/App.vue
@@ -0,0 +1,66 @@
+<script>
+import { ref, onMounted } from "vue";
+import ShoesCard from "./components/ShoesCard.vue";
+import ShoppingCart from "./components/ShoppingCart.vue";
+import CartIcon from "./components/CartIcon.vue";
+
+export default {
+  setup() {
+    const shoes = ref([]);
+    const cart = ref([]);
+    const showCart = ref(false);
+    const addCart = (item) => {
+      cart.value.push(item.value);
+    };
+    onMounted(async () => {
+      const shoesJson = await fetch("/json/shoes.json");
+      shoes.value = await shoesJson.json();
+    });
+    return { shoes, addCart, cart, showCart };
+  },
+  components: { ShoesCard, ShoppingCart, CartIcon },
+};
+</script>
+
+<template>
+  <header class="shopping-header">
+    <h1>ショッピング</h1>
+    <button @click="showCart = !showCart"><CartIcon />{{ cart.length }}</button>
+  </header>
+  <ShoppingCart v-if="showCart" :_items="cart" />
+  <div class="card-wrapper">
+    <ShoesCard
+      v-for="item in shoes.shoes"
+      :shoesData="item"
+      @added-cart="addCart"
+      :key="item.id"
+    />
+  </div>
+</template>
+
+<style scoped>
+.shopping-header {
+  height: 70px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100vw;
+  position: fixed;
+  background-color: white;
+  border-bottom: 1px solid #ccc;
+  padding: 0 1rem;
+  z-index: 2;
+  box-sizing: border-box;
+}
+.shopping-header h1 {
+  font-size: 1.4rem;
+  margin: 0;
+}
+.card-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  position: relative;
+  top: 80px;
+}
+</style>
diff --git a/handson-gallery-shoes-cart-finish/src/assets/.keep b/handson-gallery-shoes-cart-finish/src/assets/.keep
diff --git a/handson-gallery-shoes-cart-finish/src/components/.keep b/handson-gallery-shoes-cart-finish/src/components/.keep
diff --git a/handson-gallery-shoes-cart-finish/src/components/CartIcon.vue b/handson-gallery-shoes-cart-finish/src/components/CartIcon.vue
@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+    width="20"
+    height="20"
+  >
+    <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. -->
+    <path
+      d="M96 0C107.5 0 117.4 8.19 119.6 19.51L121.1 32H541.8C562.1 32 578.3 52.25 572.6 72.66L518.6 264.7C514.7 278.5 502.1 288 487.8 288H170.7L179.9 336H488C501.3 336 512 346.7 512 360C512 373.3 501.3 384 488 384H159.1C148.5 384 138.6 375.8 136.4 364.5L76.14 48H24C10.75 48 0 37.25 0 24C0 10.75 10.75 0 24 0H96zM128 464C128 437.5 149.5 416 176 416C202.5 416 224 437.5 224 464C224 490.5 202.5 512 176 512C149.5 512 128 490.5 128 464zM512 464C512 490.5 490.5 512 464 512C437.5 512 416 490.5 416 464C416 437.5 437.5 416 464 416C490.5 416 512 437.5 512 464z"
+    />
+  </svg>
+</template>
diff --git a/handson-gallery-shoes-cart-finish/src/components/ShoesCard.vue b/handson-gallery-shoes-cart-finish/src/components/ShoesCard.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="card">
+    <img
+      class="thumbnail"
+      :src="'/img/items/' + item.photoFileName"
+      :alt="item.name"
+    />
+    <div class="item-info">
+      <div class="item-title">{{ item.name }}</div>
+      <div class="item-description">{{ item.description }}</div>
+      <div class="item-price">&yen;{{ priceFormat(item.price) }}</div>
+    </div>
+    <button @click="addCart">カートに追加</button>
+  </div>
+</template>
+
+<script>
+import { ref } from "vue";
+export default {
+  props: {
+    shoesData: Object,
+  },
+  setup(props, context) {
+    // <- 第2引数を追加
+    const item = ref(props.shoesData);
+    const priceFormat = (num) => {
+      return num.toLocaleString();
+      // https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString#Browser_compatibility
+    };
+    const addCart = () => {
+      context.emit("added-cart", item);
+    };
+    return {
+      item,
+      priceFormat,
+      addCart, // <- ここも追加
+    };
+  },
+};
+</script>
+
+<style scoped>
+.card {
+  border: 1px solid #ccc;
+  width: 300px;
+}
+.thumbnail {
+  width: 100%;
+}
+.item-title {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+.item-description {
+  font-size: small;
+  margin-bottom: 0.5rem;
+}
+.item-info {
+  padding: 1rem;
+}
+.item-price {
+  font-weight: bold;
+  color: orange;
+}
+</style>