ギャラリーはこちら

眼科手術の情報管理をHTML×ローカルストレージで自作してみた|エクセル代替の可能性と課題

最近、ブログの記事数も少しずつ増えてきました。僕にとってこの場所は、情報発信だけでなく実験の場でもあります。使い慣れてくると、新しいことに挑戦したくなりますね。

その流れで今回は、「眼科での手術業務を支援するシンプルな管理ツール」を作ってみることにしました。

きっかけ:手術準備の小さな不便から

眼科では日々、白内障手術や硝子体注射といった処置が行われています。

それに伴って必要になるのが以下のような業務です。

  • 手術予定の患者情報を登録
  • 電子カルテに転記
  • 手術当日に一覧として表示

「これ、エクセルでやってるけど地味に面倒では…」

そんな思いから、「もっと簡単で柔軟な仕組みが作れないか?」と考えました。

使った技術:HTML+JavaScript+ローカルストレージ

コードは全くの初心者ですが、AIの力を借りながら試行錯誤。

ブラウザだけで動く、小さなWebアプリを作ることにしました。

  • データ保存にはローカルストレージを使用(外部サーバー不要)
  • 患者情報は術後7日で自動削除
  • HTMLとJavaScriptのみで動作

システム概要

🧾 新規登録/編集タブ

白内障手術と硝子体注射に対応した入力フォームを用意しています。手術日や患者ID、必要な備考などを登録可能。

📋 患者一覧タブ

登録された患者情報が一覧表示され、編集や削除もできます。術後7日を過ぎたデータは自動的に消えるため、「今週の手術患者」が自然に可視化されます。

📅 手術一覧タブ

日付単位で患者情報を確認できます。当日の手術リストとして活用できるようになっています。

苦労した点と達成感

たったこれだけの機能でも、かなりの量のコードが必要でした。

最初は「エクセルでよくない?」と思っていましたが、自動処理や一覧表示のしやすさを考えると、この仕組みには大きな意味があると感じています。

今後の課題と改良予定

このままではまだ実務レベルでは使えません。例えば:

  • データのバックアップや外部出力(CSVなど)
  • 入力のバリデーション強化
  • UIの改善(モバイル対応、視認性向上)
  • ログイン機能やパスワード保護(セキュリティ強化)

など、改良の余地はたくさんあります。でも、ゼロから動くものを作れたという経験は何にも代えがたいものでした。

おわりに

このプロジェクトは「学びながら作る」ことそのものが目的でもあります。

技術を学ぶモチベーションにもなり、自分の仕事や現場の改善にもつながっていく。

もしこの記事が、同じように何かを作ってみたいと思っている人のヒントになれば嬉しいです。

また進展があれば、随時ブログで報告していこうと思います!

↓お試しダウンロードはこちらです↓

※スマホ用の調整はしておりません。パソコンでダウンロードすると動くと思われます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA