Vue

作りたいウェブアプリの仕様を整理する

Vueも少し慣れてきたので、実際に作りたいものに向けて作業を進めてみる。

基本機能

  • 商品リストが一覧できる
  • 一覧したデータにチェックボタンがあり、チェックできる
  • チェックの状態を任意のタイミングでブラウザのローカル領域に保存する
  • チェックが外されたら同様に保存できる

商品リストの表示

まずは、リストが一覧できるような画面を作る。商品リストはひとまず固定のもので、Amazonなどから検索してくるといった連携機能は作らない(作れない)。

最終的には1000近いリストの表示を想定しているので、商品のメタデータに基づいたフィルタ機能や検索機能なども念頭に入れておく。

HTMLでベタ書きしてしまうか、jsonファイルにまとめたものを読み込むかは難度で検討する。

チェックボタン機能

商品それぞれにはチェックボタンがあり、チェックしたり外したりすることができる。ECサイトでよくある、お気に入り機能に近い。

チェックの状態をローカルに保存する

Saveボタンを押すなどのタイミングで、チェックした状態をローカルに保存する。

最終的には数百のチェックが押される可能性があるので、ローカルだけではなくGoogle Driveなどのクラウド領域にデータをバックアップできるような構成が望ましい。ただこれは分からない部分も多いので、おいおい実装する。

開発の流れ

  • 10程度のリストを作成・表示する
    • ベタ書き・配列などで管理するにあたって方法を検討
  • チェックボタンをそれぞれに設置
  • チェック状態を保存する仕組みを作る

フロント側は最終的にBootstrapなどのフレームワークを使って実装する。

カテゴリー: Vue
このサイトの主
投稿を作成しました 98

関連投稿

検索語を上に入力し、 Enter キーを押して検索します。キャンセルするには ESC を押してください。

トップに戻る