Vueも少し慣れてきたので、実際に作りたいものに向けて作業を進めてみる。
基本機能
- 商品リストが一覧できる
- 一覧したデータにチェックボタンがあり、チェックできる
- チェックの状態を任意のタイミングでブラウザのローカル領域に保存する
- チェックが外されたら同様に保存できる
商品リストの表示
まずは、リストが一覧できるような画面を作る。商品リストはひとまず固定のもので、Amazonなどから検索してくるといった連携機能は作らない（作れない）。
最終的には1000近いリストの表示を想定しているので、商品のメタデータに基づいたフィルタ機能や検索機能なども念頭に入れておく。
HTMLでベタ書きしてしまうか、jsonファイルにまとめたものを読み込むかは難度で検討する。
チェックボタン機能
商品それぞれにはチェックボタンがあり、チェックしたり外したりすることができる。ECサイトでよくある、お気に入り機能に近い。
チェックの状態をローカルに保存する
Saveボタンを押すなどのタイミングで、チェックした状態をローカルに保存する。
最終的には数百のチェックが押される可能性があるので、ローカルだけではなくGoogle Driveなどのクラウド領域にデータをバックアップできるような構成が望ましい。ただこれは分からない部分も多いので、おいおい実装する。
開発の流れ
- 10程度のリストを作成・表示する
- ベタ書き・配列などで管理するにあたって方法を検討
- チェックボタンをそれぞれに設置
- チェック状態を保存する仕組みを作る
フロント側は最終的にBootstrapなどのフレームワークを使って実装する。
