検査技師がITで業務改善に挑む：ToDoアプリ開発の第一歩（Day1〜Day5 環境準備編）

はじめに

こんにちは、labnote_writer です。
普段は臨床検査技師として病院勤務をしています。

日々の業務の中で感じる 「手作業」「紙運用」「属人化」。
こうした課題をなんとかできないか？と考え、
「自分でツールを作ってみよう」と始めたのがこのToDoアプリ開発です。

この記事では、Day1〜Day5（環境準備編） のチャレンジを振り返ります。

ℹ️ デモ公開について
現在、一般公開デモは準備中です。
設計方針や実装過程をまずは記事で共有し、URLは追って追記します。

---

Day1: 技術選定と設計方針

現場業務を整理しながら、まずは技術選定からスタートしました。

• フロントエンド: Vue 3 + TypeScript（直感的で使いやすいUIを目指す）
• バックエンド: Express + TypeScript（安定したAPI基盤）
• DB: MySQL（複数人で共有できるデータ管理を想定）
• インフラ: AWS EC2 + Docker（運用を意識した構成）
• ドメイン: Route53で独自ドメインを取得

「タスク管理」という汎用テーマを、検査技師の業務タスクや当直予定の管理に応用することを意識しました。

---

Day2: プロジェクト構成を作成

まずはコードの整理。
ToDoApp/
├── frontend/ # Vue 3 + TS
├── backend/ # Express + TS
└── docs/ # 設計ドキュメント

さらにDocker Composeで mysql / backend / frontend をつなぎ、
「同じ環境で誰でも動かせる」状態を整備。

これは検査室でも「業務フローを統一して、誰が入っても回る仕組み」を作るのと同じ発想です。

---

Day3: ドメイン取得

AWS Route53で独自ドメインを取得し、サブドメインをアプリ公開用に設定しました。

DNSやSSLは医療現場ではあまり触れる機会がありませんが、
セキュアにシステムを公開するには必須の知識。
設定に苦戦しつつも、少しずつ理解が深まってきました。

（※ 実運用URLは社内用のため非公開。デモURLは準備ができ次第追記します）

---

Day4: フロントエンドの初期実装

Vue 3 + Vite で開発環境を構築し、UIライブラリ Element Plus を導入。

最初に形にしたのは タスク一覧画面。
「検体処理」「緊急報告」「機器メンテナンス」など、
日々の検査業務を一覧化できるイメージで作りました。

---

Day5: バックエンドの準備

Express + Prisma でAPIを構築しました。

• /users（利用者アカウント管理）
• /tasks（業務タスク管理）
• /categories（検査業務カテゴリ）

といったエンドポイントを設計し、
「axios → route → controller → service → return」 の流れで実装。

これでフロントとバックがつながり、タスク管理アプリとしての土台ができました。

---

学びポイント

• 現場視点での設計が重要
  → 「一人用」ではなく「複数人が同じ画面を使う」前提で作る
• Dockerで環境を揃える安心感
  → 「誰のPCでも同じ結果が得られる」ことがチーム開発にもつながる
• セキュリティの意識
  → SSLやドメイン運用は、医療システムの公開運用に直結する知識

---

まとめ

Day1〜Day5で「開発環境の土台」を整えることができました。

臨床検査業務でも「検査前の準備が精度を左右する」ように、
IT開発でも最初の設計と環境構築が大事だと実感しました。

次は タスク管理機能を拡張し、PWAや通知機能で“現場で本当に使える形” を目指します。

---

ソースコード

GitHubリポジトリはこちら 👉 ToDoApp_Project
（※ 社内運用部分は除外したデモ用リポジトリを順次整備予定）