やりたいこと

限界までシンプルなお買い物メモが欲しい！

日用品の買い出しのため、事前にスマホのメモ帳に買うものリストを作り、いざ買い物に行ったものの買い忘れが…
そんな経験ありませんか？

買う物が多いとリストを目で追うのも大変だし、買い物かごに入れた商品を一つ一つリストから消していくのも大変。結果横着して見落としが…(´；ω；`)ｳｯ…

そんな場面を想定して極限までシンプルなお買い物メモを作りたい。

使用環境・ライブラリ

・CodePen
・Vue.js
・axios.js
・Netlify

スマホのメモ帳は自由度が高い分、チェックリストみたいな手軽な使い方に向いていないのではないか？
ペンでチェックを付ける要領で買い物かごに入れた商品をワンタップで消せたら便利に使えそう！

そこで今回はWebアプリとしてチェックリストのような限界までシンプルなメモ帳を作ってみたい。

ひとまず、買いたいものをリスト化するところまで実装してみる。
入力したものが下に足されていくようにタスク追加関数は「push」で書き足すようにしておく。

See the Pen Untitled by zawachin_2024 (@k-tanizawa) on CodePen.

次にリストから一つずつ商品を消していくボタンを追加する。
一番上の商品から買い物かごに入れて消していけるように商品を削除する関数は「shift」指定にしておく。

実装②のアプリをBootstrapを用いてお洒落で見やすい見た目に改良する。
加えて、急に雨に降られるリスクを回避するべく、天気APIから降水確率だけ表示させておく。
（私は天気予報見るの忘れて外出することが多いので…）

今回は「メモした商品をワンタップで消せる」というところにフォーカスしてリストの上から順に消していくだけというシンプルな仕立てにした。日頃通っているスーパーなら、入り口にある商品から順にメモしていけそうだけど、好きなところから消せるともっと実用的になりそう。

普段はスマホのメモ帳を使って、買い物かごに入れた商品から一文字ずつ消していっていたので、ワンタップで実現できたのはすごく使えると思った。ただ、肝心のスマホでは見やすい体裁にできなかったため、使用する機器に合わせる重要性を痛感した。

今度はもっとユーザービリティを意識してアプリを作ってみたい。