PORTFOLIO

社内業務自動化システム

Excel/CSV加工、ファイル整理、Webスクレイピングの3種類の定型業務をワンクリックで自動実行するWebアプリケーション。Docker Composeによるローカルネットワーク運用を前提に設計。

CATEGORY
業務自動化
TECH STACK
Docker FastAPI Playwright Python React shadcn/ui SQLite Tailwind CSS TypeScript Zustand

プロジェクトの背景

組織内の定型業務 ― データ加工・ファイル管理・Web情報取得 ― を自動化し、手作業で1日1〜2時間費やしていた反復業務をワンクリックで完了させるシステム。管理者/一般ユーザーの2段階権限、ドライラン（テスト実行）、実行履歴など、業務運用に必要な機能を一通り備える。

課題解決プロセス

01
課題 CHALLENGE
Excel加工・ファイル操作・Webスクレイピングという本質的に異なる3種の処理を、統一されたインターフェースで管理・実行する必要があった。ファイル操作やスクレイピングは不可逆な変更を伴う可能性があり、ドライラン機能を全タスク種別で一貫して提供する必要があった。また、利用者は非技術者であり、直感的なGUIとテンプレートによる設定最小化が求められた。
02
アプローチ APPROACH
Strategy Patternによるタスク実行基盤を採用。TaskRunnerクラスがタスク種別を判定し、各Processorに処理を委譲。全Processorにis_dry_runフラグを統一実装し、ドライラン時はデータ検証まで実行して書き込みのみスキップ。7種のシードテンプレートで非技術者のJSON設定作成を排除。JWT + RBACで管理者/一般ユーザーの2段階権限制御。
03
成果 OUTCOME
3種の自動化エンジンを統一インターフェースで実装。ドライラン機能で安全な検証フローを確立。7画面のフルスタックWebアプリを構築。15以上のREST APIエンドポイントを設計・実装。Docker Composeで一発起動を実現。

ポイント

  • Strategy Pattern による統一実行基盤: Excel/CSV加工・ファイル操作・Webスクレイピングという異なる3種の処理を、共通インターフェースで統一。新タスク種別はProcessorクラス1つ追加で完了する拡張設計
  • 全タスク種別対応のドライラン: 本実行前にデータ読み込み・検証まで実行し書き込みのみスキップ。スクレイピングではセレクタの存在確認まで実施し、不可逆操作の事前検証を徹底
  • FastAPI + async/await の非同期API: タスク実行中もUIの応答性を維持。SQLAlchemy + aiosqliteで軽量ながら非同期DB操作を実現
  • Zustand による最小限の状態管理: authStore / taskStore / historyStore / toastStore の4ストア構成。Reduxのボイラープレートを排除しつつ、認証・タスク・履歴を一元管理
  • Playwright によるスマートスクレイピング: Headlessブラウザで動的レンダリングサイトに対応。robots.txt自動確認で法的リスクを軽減し、業務利用に耐える設計

プロジェクト概要

組織内の定型業務 ― データ加工・ファイル管理・Web情報取得 ― を自動化し、手作業で1日1〜2時間費やしていた反復業務をワンクリックで完了させるシステム。管理者/一般ユーザーの2段階権限、ドライラン（テスト実行）、実行履歴など、業務運用に必要な機能を一通り備えるフルスタックWebアプリケーションです。

主要機能

  • Excel/CSV加工: フィルタリング、集計、ソートなどの操作をJSON設定で定義し自動実行
  • ファイル整理: リネーム、拡張子別分類、日付別整理、コピー、移動を自動化
  • Webスクレイピング: Playwrightで動的サイトにも対応。robots.txt自動確認付き
  • ドライラン: 本実行前にプレビューで確認。データを変更せずに結果を検証
  • テンプレート: 7種の定型テンプレートからタスクを即座に作成。設定の手間を削減
  • 認証・権限管理: JWT認証 + bcryptハッシュ。管理者/一般ユーザーの2段階RBAC

画面構成（7画面）

  • ログイン画面: ダークテーマの認証画面。ユーザー名 + パスワードでJWTトークンを発行。システムの特徴（3つの自動化タイプ、100%ローカル実行、外部依存0）を表示
  • ダッシュボード: 総タスク数、アクティブ数、本日の実行数、成功率の4指標をカード表示。タイプ別内訳と直近の実行履歴テーブルを併設
  • タスク一覧: 全タスクをテーブル形式で一覧表示。タイプ別バッジ、ステータスドット、ワンクリック実行ボタン
  • タスク詳細: タスクのタイプ・ステータス・作成者・作成日を表示。「テスト実行」（ドライラン）と「実行」ボタンで操作
  • 実行履歴: タスク名・ステータス・実行タイプでフィルタリング可能。ページネーション対応
  • テンプレート: 7種の定型テンプレートからワンクリックでタスク作成（月次売上レポート集計、CSV顧客データ整形、ダウンロードフォルダ整理など）
  • ユーザー管理: 管理者専用画面。ユーザーの追加・編集・削除、ロールの設定

システム構成

フロントエンド（React + TypeScript / Vite）、バックエンドAPI（FastAPI / Python）、データ処理層（pandas + openpyxl + Playwright）の3層構成。Docker Composeで docker compose up 一発起動を実現し、ローカルネットワーク内での運用を前提に設計しています。

Frontend

  • React 18 + TypeScript
  • Vite 6（ビルド・開発サーバー）
  • Tailwind CSS + shadcn/ui
  • Zustand 5（状態管理）
  • React Router 6

Backend

  • Python 3.12 + FastAPI
  • SQLAlchemy + aiosqlite
  • JWT認証（python-jose）
  • Alembic（マイグレーション）
  • Pydantic（バリデーション）

技術選定の理由

  • FastAPI: async/await対応、自動API文書生成（OpenAPI）、Pydanticによるバリデーションが業務システムのAPI設計に適合
  • React + shadcn/ui: Radix UIベースの高品質コンポーネントで統一的なデザイン。アクセシビリティも担保
  • SQLite: ローカルネットワーク・少人数運用の前提で、外部DB不要・ゼロ設定で済む最適解。Docker volume内で永続化
  • Playwright: SPA/動的レンダリングサイトのスクレイピングに対応。Headlessモードでサーバーサイド実行に最適
  • Zustand: Reduxより軽量でボイラープレートが少ない。認証・タスク・履歴の3ストアで十分な規模に最適
  • Docker Compose: フロントエンド・バックエンドを1コマンドで起動・停止。環境構築の手間を排除し、再現性のあるデプロイを実現
開発事例一覧に戻る

COMPANY

会社概要

WORKS

開発事例

CONTACT

お問い合わせ