📖

# 1.1 Django × Vue で業務システムを刷新した話（導入編）

に公開
Django
Vue.js
tech

ここ1年、著者は自社の業務システムを Django（バックエンド） と Vue（フロントエンド） で刷新している。
旧システムはベンダー委託で .NET ベース で作られており、画面も複雑化して保守が難しい状況だった。
改善のたびに期間・コストがかさみ、利用者からの不満も多かった。

さらに近年は AI を活用した開発が現実的になった。
AI はコードの生成や修正を大幅に支援してくれるが、既存のレガシー環境ではその効果を十分に発揮できない。
モダンな技術スタックを採用し、API ドリブンな設計に統一しておくことで、AI が出力するコードも自然に組み込みやすくなり、
「人が設計と判断を行い、AI が実装を補助する」理想的な形に近づける。

こうした背景から、
「なぜ刷新したのか」「なぜ Django × Vue なのか」「なぜ SPA にしたのか」
という全体像をここで整理しておく。

旧システムの課題

  • UI が古い：画面遷移ごとにページがリロードされ、操作感が重い
  • 保守性が低い：ウォーターフォール開発で実際のニーズを反映しづらく、修正も困難。設計書も現物と一致しているか分からない
  • 機能追加にコストがかかる：小さな変更にも費用が高く、しかも期間が長すぎる。その間ユーザーの時間も奪ってしまう

こうした課題を解消するには 「設計思想そのもの」の見直し と、内製化 が必要だった。
加えて、AI を活かすには 内製で素早く試行錯誤できる環境 が不可欠だった。

Django を選んだ理由

バックエンドは Python 製フレームワークの Django を採用。
理由はシンプルで、業務システムに必要な「型」が揃っているから。

  • 管理画面が標準で付いてくる
  • 認証・権限まわりがしっかりしている
  • モデルベースの開発がやりやすく、既存の SQL 資産も活かせる
  • Python ベースなので周辺ライブラリが豊富
  • 学習コストが低い

さらに Python は AI ライブラリとの親和性が高い。
Django を採用することで、AI が生成するコード片を自然に組み込め、将来的な AI 活用拡張も見据えられる。

Vue を選んだ理由

フロントエンドは Vue。
React など他の選択肢もあったが、学習コストを重視した。

  • 記述がシンプルで理解しやすい
  • コンポーネント設計が直感的

特に内製化では 「チームが早く慣れること」 が重要で、その点 Vue は最適だった。
また、AI が出力するフロントエンドコードも Vue の方が読みやすく、修正しやすいという利点があった。

SPA にした理由

刷新の大きな決断のひとつが SPA（Single Page Application）化。
選んだ理由は以下の通り。

  • 操作感の向上
    ページ全体をリロードせずにコンテンツだけを切り替えるため、ユーザー体験がスムーズになる
  • モバイル対応しやすい
    スマホやタブレットでもネイティブアプリに近いレスポンス感を出せる
  • 機能を柔軟に組み合わせられる
    カレンダー、チャット、スプレッドシート表示などを同じ画面に統合できる
  • API ドリブンな構成に統一できる
    Django REST Framework で API を提供し、Vue 側でデータを扱う
    → バックエンドとフロントの役割分担が明確になり、保守性も向上
  • 複雑なデータ構造に強い
    製造業特有の BOM のような複雑なデータも扱いやすい。これは .NET では限界があった

業務システムはユーザーが一日中操作することも多い。だからこそ 「サクサク動く快適さ」 は思った以上に効果が大きい。

さらに SPA 化は AI 活用との相性も良い。
API が明確に切り分けられているため、AI が提案するコードを部分的に試す・差し替えることが容易になった。

まとめ

Django × Vue で SPA 構成 にしたことで、操作感と開発効率が大幅に改善。
さらに AI を取り入れやすい土台ができたことで、改善スピードも格段に上がった。
今では「使いやすくなった」と現場の声も増えてきている。

このシリーズを通じて、同じようにレガシーシステム刷新を考えている方が、
AI 時代に適応した開発スタイル をつかむヒントになれば幸いです。

Discussion