search

ryu-sugi / lesson_vue

0 stars 0 forks source link

3/20 Vue.js学習議事録２ (3-1 ページ仕様 含む) #10

Open ryu-sugi opened 2 years ago

ryu-sugi commented 2 years ago

3-1 Vue.jsで商品一覧を描画してみる

ページ仕様

  1. この章ではサーバーは使わない。(HTMLやJavascriptへ直接記述する)
  2. 最初、全商品が表示される。また、表示された商品の件数が「検索結果 ●件」と表示される。
  3. 商品には送料無料と、セール対象があり、これらを絞り込む為のチェックボックスを表示させる。
  4. 初期表示は、「全ての商品」にチェックがついていないようにする。
  5. 並び替えセレクトボックスには「標準と「価格が安い順」を表示させる。
  6. ユーザーが選択を切り替えると、指定の順番に商品が並び変わるようにする。

    機能詳細

  7. 商品部分の表示 　　・各商品はタイル上のボックスとして表示する。 　　・ボックス内に表示する項目は「商品画像」「商品名」「価格」「送料」を表示させる。 　　・ただし、送料無料商品→「送料無料と表示」、セール対象商品→「画像左上にSALEマーク表示」させる。
  8. 商品の絞り込み 　　・チェックボックスのチェック状態を切り替える事で、条件該当商品のみを表示させる。 　　・送料無料商品にチェックすると→「送料無料のみ表示」、セール対象商品にチェックすると「セール対象のみ表 　　　示」とする。 　　・2つともチェックをつけた場合 → 両方の条件に該当する商品(セール対象なおかつ送料無料商品)のみを表示させる。 　　・チェック状態を切り替えても、商品の並び順は変わらない。
  9. 商品の並び替え 　　・セレクトボックスで商品一覧の並び替えができるようにする(ユーザビリティー向上) 　　・「標準」選択で初期表示の並び順。 「価格が安い順」で価格が安い順に並び替える。 　　・ただし、チェックボックスで絞り込んだ結果には影響を与えない。
ryu-sugi commented 2 years ago

モックアップ作成 3-2

モックアップとは？ 参考URL

・システムは実装されていないが、外観は本物そっくりに作られたサンプルのこと。(ビジュアルサンプル)

「ワイヤーフレーム」と「プロトタイプ」の違い

・「ワイヤーフレーム」→ 全体の概要。主にレイアウトを決める為の設計図。 ・「プロトタイプ」 → 機能面のサンプル。 より完成形に近いシステムが実装されたサンプル。

ryu-sugi commented 2 years ago

モックアップ作成 3-2 ...続き

HTMLとCSSで静的なページを作成する

・最初からVue.jsを意識して作り始めると、どこから手をつけて良いのか迷ってしまう。 ・慣れないうちは「急がば回れ精神」で、簡単なことから始める。 ・一旦、Vue.jsのことを忘れて、純粋なHTMLとCSSだけで完成イメージと同じ見た目をもつ静的なページを作成する。