aoyama01

プロジェクト概要

Notion風のメモ管理Webアプリケーションです。
ユーザー認証機能から、メモの新規作成、一覧表示、詳細閲覧、更新（タイトル、本文）、削除も実装しました。
サイドバーではユーザー名と登録済みのメモが一覧表示できて、絵文字によるメモの識別も可能です。

開発目的

フルスタックの開発・実装プロセスを学ぶために作成しました。
Notionを題材に選んだのは単純にNotionアプリが好きだからという理由です。ブラウザを使ってWeb上で柔軟なメモ／ドキュメント管理が完結する体験は最高だと思います。始めて使ったとき感動しました。
内部実装が気になって（特にテキストの編集同期）、自分で理解・再現してみたかったのも大きいです。

技術選択の理由

MERNスタック

MongoDB: 柔軟なスキーマ設計によるメモデータの管理
Express: シンプルで拡張性の高いサーバーサイドフレームワーク
React: Hooksによる効率的な状態管理とUI構築
Node.js: JavaScript統一による開発効率の向上

Redux Toolkit

状態管理: メモやユーザー情報を一元的に管理
リアルタイム連動: サイドバーとメインコンテンツの即時同期

JWT認証

セキュリティ: トークンベースの安全な認証システム
ステートレス: サーバー負荷の軽減

実装の詳細

主な機能

ユーザー認証: 新規登録、ログイン、ログアウト機能
メモ管理: CRUD操作（作成、読み取り、更新、削除）
リアルタイム編集: デバウンス処理による効率的な自動保存
視覚的識別: 絵文字アイコンによるメモの区別

工夫したポイント

Redux Toolkitによる効率的な状態管理

メモやユーザー情報をRedux Toolkitで一元的に管理することで、アプリケーション全体で状態を効率的に共有・更新できるように設計しました。
特に、メモの追加・更新・削除時にサイドバーとメインコンテンツの表示がリアルタイムに連動するように、Reduxストアを活用して実装しています。

リアルタイム入力とAPIリクエストのデバウンス処理

メモのタイトルや説明文の編集で、ユーザーが文字を入力するたびにAPIリクエストを送信するのではなく、一定時間入力が停止した際にAPIを呼び出すデバウンス処理を実装しました。
不要なAPIコールを削減し、サーバーへの負荷を軽減するとともに、ユーザー体験の向上を図っています。

フォームバリデーション

ユーザー登録・ログイン画面では、ユーザー名とパスワードに対して正規表現を用いたリアルタイムバリデーションと送信時のバリデーションを実装しています。
これによって、不正な入力を防ぎ、データの整合性が保証されます。サーバー側でもexpress-validatorを使用し、多層なバリデーションを適用しています。

削除確認ダイアログ

メモの削除機能には、誤操作を防ぐための確認ダイアログを実装しました（大事なメモが消えてしまったら悲しいので）。
削除対象のメモのタイトルを正確に入力しなければ削除ボタンを有効化しないようにすることで、データの意図しない喪失を防いでいます。

MUI、絵文字によるモダンで親しみやすいUI/UX

Material UI（MUI）コンポーネントを全面的に採用することで、一貫性があり、ユーザーフレンドリーでモダンなUIを構築しました。
また、メモに絵文字アイコンを設定できるようにして、メモを楽しく識別できるようにしています😊

技術的特徴

UX

メモ削除時、対象タイトルを正しく入力しないと削除できない確認ダイアログを実装
Material UIによる視認性・操作性に優れたモダンなデザイン
絵文字によるメモのアイコン設定で識別性向上

状態管理

Redux Toolkitでメモ・ユーザー情報を一元管理し、サイドバーとメインコンテンツをリアルタイム連動

パフォーマンス・保守性

Axiosインターセプターで共通処理を集約し保守性を向上
タイトル・説明文編集にデバウンス処理を導入し、不要なAPIコールを削減

セキュリティ・バリデーション

JWT認証とローカルストレージ管理で認証状態を維持
フロント・サーバー双方で多層的なフォームバリデーションを実装

学んだこと

フルスタック開発における設計・実装プロセスの実践的な経験
Redux Toolkitによる効率的な状態管理の実装方法
デバウンス処理によるパフォーマンス最適化の重要性
多層的なバリデーションによるセキュリティの確保
Material UIを活用したモダンなUI/UX設計

Notion Clone

使用技術