よく買うものを学習する買い物リスト PWA を作った

作ったもの

Shopping List — https://sen.ltd/portfolio/shopping-list/

• 9 カテゴリ（野菜・乳製品・肉・パン・食品・冷凍・飲料・日用品・その他）
• 複数リスト（週次買い出し / パーティ など）
• よく買うものの自動サジェスト（履歴ベース）
• Web Speech API の音声入力
• PWA マニフェスト（ホーム画面にインストール可能）
• localStorage 永続化
• JSON インポート / エクスポート

vanilla JS、ゼロ依存、ビルド不要。node --test で 44 ケース。

頻度トラッキング

addItem のたびに履歴カウンタをインクリメント:

history: {
  ...state.history,
  [name.toLowerCase()]: (state.history[name.toLowerCase()] || 0) + 1,
}

大文字小文字を正規化しておくのがポイント。「牛乳」と「牛乳」を同じアイテムとしてカウントできる。

Web Speech API で音声入力

const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
const recog = new SR();
recog.lang = 'ja-JP';
recog.onresult = (e) => onResult(e.results[0][0].transcript);

Chrome と Safari（iOS）で動く。Firefox では非対応なのでフォールバックとしてテキスト入力を残す。

PWA マニフェスト

{ "display": "standalone", "theme_color": "#4caf50", "icons": [...] }

Android Chrome なら「ホーム画面に追加」で起動時にブラウザクロームなしで起動。買い物リストには最適 - ネイティブアプリ感、同期不要、全部 localStorage。

シリーズ

100+ 公開ポートフォリオ シリーズの #64 です。

• 📦 リポジトリ: https://github.com/sen-ltd/shopping-list
• 🌐 デモ: https://sen.ltd/portfolio/shopping-list/
• 🏢 会社: https://sen.ltd/