-
Vue3 + TypeScriptによるデータ可視化管理システム開発
■ プロジェクトの目的
保険会社の各部門スタッフが業務データをリアルタイムで
可視化・操作できる管理システムの構築。
■ 体制・人数
フロントエンド2名・バックエンド2名。
■ 自分のポジション・役割
基礎データモジュール・申請レベルモジュール・
主体機構モジュールの実装を担当。
■ 目的を達成する上での課題
・複雑なフォームバリデーションとビジネスロジックの整合
・異なるデータ更新後の画面反映の正確性確保
■ 課題に対して取り組んだこと
・Vue3のリアクティブシステムを活用した動的バリデーション実装
・EChartsによるデータ可視化ダッシュボードの構築
・共通CRUDロジックのコンポーネント化による開発効率向上
■ ビジネス上の成果
・各部門の業務データ閲覧・操作の効率が大幅に向上
・手作業によるデータ集計をシステム化し、ミスをほぼゼロにVue3、TypeScript、Vite、Pinia、Vue Router、ECharts、axios
-
Vue3 + TypeScriptを用いた信用カード管理アプリ開発
■ プロジェクトの目的
信用カード管理システムにおける顧客情報・消費記録・
チャージ記録の可視化と管理機能の実装。
■ 体制・人数
フロントエンド2名・バックエンド1名の小規模チーム。
■ 自分のポジション・役割
フロントエンドエンジニアとして認証機能・顧客管理・
档案管理モジュールを担当。
■ 目的を達成する上での課題
・ログイン認証とルートガード（権限制御）の実装
・複数モジュール間のデータ整合性の確保
■ 課題に対して取り組んだこと
・Vue3 + Piniaによるリアクティブな状態管理
・トークンベースの認証・ルートインターセプト実装
・再利用可能なテーブル・フォームコンポーネントの設計
■ ビジネス上の成果
・ログイン〜業務操作までのUXを統一化
・档案管理業務のデジタル化により入力ミスを削減Vue3、TypeScript、Vite、Pinia、Vue Router、axios、ant-design-vue
-
React/Next.js + TypeScriptを用いた銀行向け管理プラットフォーム開発
■ プロジェクトの目的
銀行内部スタッフが顧客情報・档案・個人税務データを
効率的に管理できるシステムの開発。
■ 体制・人数
フロントエンド2名・バックエンド2名の構成。
■ 自分のポジション・役割
フロントエンドエンジニアとして主要モジュールの実装を担当。
■ 目的を達成する上での課題
・大量の顧客データの一覧表示とページネーション処理
・複雑な検索・フィルタリング機能の実装
・既存のバックエンドAPIとの安定した連携
■ 課題に対して取り組んだこと
・Next.js + TypeScript + MobX/Reduxによる状態管理の設計
・ant-design-reactを活用した共通UIコンポーネントの構築
・axios二次封装による統一的なAPIリクエスト管理
■ ビジネス上の成果
・顧客情報の検索・更新業務の工数を約25%削減
・コンポーネントの再利用率向上により開発速度が改善React、Next.js、TypeScript、MobX、Redux、webpack、axios
-
React/Next.js を用いた企業向け管理画面システムの開発
■ プロジェクトの目的
企業向けの管理画面システムをゼロから構築。
社内業務の効率化と、データの可視化・操作性向上を目的とした。
■ 体制・人数
フロントエンド1名（自分）＋バックエンド1名の小規模チーム。
■ 自分のポジション・役割
フロントエンドエンジニアとして全画面のUI設計・実装を担当。
要件定義からリリースまで一貫して対応した。
■ 目的を達成する上での課題
・既存システムが旧来のjQueryベースで保守性が低かった
・データ量が多く、画面の表示パフォーマンスに課題があった
・型安全性が担保されておらず、バグが頻発していた
■ 課題に対して取り組んだこと
・React + TypeScriptによるフルリニューアルを実施
・Next.js App Routerを採用し、SSRとキャッシュ戦略を最適化
・Zodによるスキーマバリデーションで型安全性を確保
・Hono（バックエンド）とのAPI連携を実装
■ ビジネス上の成果
・ページ読み込み速度を約40%改善
・型エラーに起因するバグをほぼゼロに削減
・管理業務の工数を約30%削減React、Next.js、TypeScript、Vue3、Hono、Tailwind CSS、Git