MASANAGA
BABA

メモアプリ

memoApp1
memoApp2
memoApp3
memoApp4
memoApp1
memoApp6

Vue3(Composition API)とPinia、Sassを用いて制作したメモアプリです。

メモはタイトルと本文の構成で管理され、リスト表示とグリッド表示の切り替え、カテゴリ機能、並び替え(ソート)機能を搭載しています。

カテゴリを絞り込むことで、目的のメモをすぐに検索でき、直感的なそうでメモの追加・編集・削除が行えるよう設計しました。

ローカルストレージを活用することでデータの永続化も実現しています。

使用スキル

・Vue3(Composition API):状態管理・再利用性を意識した設計

・Pinia:グローバルステート管理(メモ、カテゴリ、ソート設定など)

・Sass:ミックスイン・変数・ネストを用いた効率的なスタイリング

・JavaScript:ロジック制御やDOM操作

・ローカルストレージ:データの永続化と同期

・date-fns:日付のグループ分け・整形処理

・Font Awesome:操作アイコンの視認性向上

主な実装機能

・メモの作成・編集・削除機能(ciontenteditableを使用)

・タイトルと本文の分離表示(最初の行をタイトルとして処理)

・メモを日付別(今日/昨日/過去7日/30日)・月別・年別に分類

・並び替え機能(日付順、日付逆順、タイトル順、逆順)

・カテゴリーの登録・選択・削除・編集(モーダル形式)

・カテゴリーによる絞り込み検索

・リスト表示/グリッド表示の切り替え

・ローカルストレージ保存によるデータの永続化

・レスポンシブ対応(左:リスト、右:エディタ領域)

・キーワードによるメモ検索機能