React / Next.js
アプリ開発

プロジェクト概要

プロジェクト管理SaaS（※サンプル）のフロントエンド開発を担当しました。 既存のRails製APIに対し、React / Next.jsを使ったSPA構成のUIを新規構築しています。 複数メンバーが同時に操作するリアルタイム性が求められるアプリケーションです。

ユーザー認証・権限管理・タスク管理・コメント機能・通知機能を実装。 WebSocketを使ったリアルタイム更新により、チームメンバー間の変更が 即時反映される体験を実現しました。

担当した主な機能

• 認証・セッション管理（JWT + Refresh Token）
• ロールベースのアクセス制御（管理者 / メンバー / ゲスト）
• プロジェクト・タスク・マイルストーン管理
• WebSocket によるリアルタイム更新（Socket.io）
• コメント・メンション・絵文字リアクション
• ファイル添付・プレビュー（S3連携）
• 通知センター（アプリ内 + メール通知）
• ダッシュボード・進捗グラフ（Chart.js）

使用技術・ツール

フロントエンドはNext.js（App Router）+ TypeScript + Tailwind CSS。 状態管理にはZustandを採用し、サーバー状態の管理にはTanStack Queryを使用しています。 APIクライアントはAxiosをベースにカスタムインスタンスを実装しました。

リアルタイム通信にはSocket.io、ファイルアップロードはAWS S3 + presigned URLで実装。 Storybookでコンポーネントのドキュメントを整備し、JestとReact Testing Libraryで 主要コンポーネントのユニットテストを作成しています。

工夫した点

複数人が同時操作する際の競合処理を考慮し、楽観的更新（Optimistic Update）を実装しました。 操作のレスポンスを体感的に高速化しつつ、サーバー側でのエラー発生時には ロールバック処理で整合性を保っています。

アクセシビリティにも注力し、キーボード操作・スクリーンリーダー対応・ WAI-ARIAマークアップを徹底。LighthouseのアクセシビリティスコアをほぼAの状態に保ちました。

実績一覧に戻る