はじめに：情シスや現場管理者の「Excel信仰」にどう立ち向かうか？
LAN内の資産管理ツールや業務管理Web画面を開発してリリースしたとき、現場のベテラン管理者から必ず言われる「お決まりのクレーム」があります。
「このWeb画面、カラム（列）の幅をマウスで広げられないの？ Excelならマウスで自由に幅を変えられるのに、これじゃ長いホスト名が途切れて見えないよ。Excelに戻して。」
開発者としては「レスポンシブデザインで組んだからブラウザ幅を変えてくれ」と言いたくなりますが、現場の管理者にとって 「列境界をドラッグして幅を調整できること」 は絶対譲れない機能なのです。
かといって、これだけのために重厚なReactデータグリッドライブラリ（AG Gridなど）を導入すると、バンドルサイズが跳ね上がり、システムの複雑化を招きます。
普通のHTML <table> タグに対し、外部ライブラリを一切使わず、Pure JavaScript（Vanilla JS）わずか50行で「列幅のドラッグリサイズ機能（最小幅ガード付き）」と「リアルタイム死活Pingインジケーター（🟢/⚪）」 を組み込みました。
本記事では、現場の管理者を唸らせたこのフロントエンド実装を公開します。
1. HTML & CSS：透明な「ドラッグ境界線（リサイザー）」の配置
各 <th> 要素の右端に、掴みやすいリサイズ用の境界線 div.resizer を絶対配置（absolute）します。
💻 コア実装・設定スニペット（抜粋）
# (要点抜粋)
/* table_resizable.css */
table.excel-table {
border-collapse: collapse;
width: 100%;
table-layout: fixed; /* 重要: 固定レイアウトにして列幅制御を効かせる */
}
table.excel-table th, table.excel-table td {
border: 1px solid #cbd5e1;
padding: 8px 12px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; /* テキストの折り返しを防ぎExcel風に */
}
table.excel-table th {
position: relative;
background-color: #f1f5f9;
user-select: none; /* ドラッグ中のテキスト選択を無効化 */
}
/* 列幅リサイズハンドル */
.resizer {
position: absolute;
top: 0;
right: 0;
width: 5px;
cursor: col-resize;
user-select: none;
height: 100%;
background-color: transparent;
}
.resizer:hover, .resizing {
background-color: #0284c7; /* ホバー・ドラッグ時に青く光る */
}
/* リアルタイム死活Pingインジケーター */
.status-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
}
.status-dot.online { background-color: #22c55e; box-shadow: 0 0 6px #22c55e; } /* 🟢 オンライン */
.status-dot.offline { background-color: #94a3b8; } /* ⚪ 応答なし */
2. Pure JavaScript によるドラッグ伸縮（最小幅ガード付き）
わずか50行足らずのコードで、マウスイベント（mousedown, mousemove, mouseup）を処理し、列が潰れすぎないよう 最小10px の安全ガードを入れます。
3. バックグラウンドPingによる「生きた死活状態」のリアルタイム反映
テーブルの先頭列には、端末のリアルタイム疎通状況（Ping応答）を非同期でフェッチして表示します。
まとめ：現場の信頼は「手触り感」から生まれる
どれほど裏側のAIやスキャンロジックが高度であっても、毎日その画面を使う管理者が「列幅すら変えられなくて使いにくい」と感じてしまえば、ツールは定着しません。
- ヘビーフレームワークを使わず、Pure JSだけで軽快に動かす
- Excelの使い慣れた手触り感をWeb上に再現する
- 死活状況が視覚的にパッと分かるインジケーターを添える
この「現場ファーストな手触りの良さ」へのこだわりこそが、LAN内ツールを「全員が使いたがる愛用ツール」に変えるための最大のカギです！
📚 さらに詳しいアーキテクチャ設計・パラメータ表・トラブルシューティング
最後までお読みいただきありがとうございます！
本記事が少しでも「役に立った」「あとで試したい」と感じていただけましたら、ぜひQiitaの 「いいね（♡）」 と 「ストック」、および アカウントのフォロー をいただけると今後の検証・執筆の大きな励みになります！
また、本記事のさらに踏み込んだ 「深層アーキテクチャ解説」「主要パラメータの技術的根拠」「現場アンチパターン・トラブルシューティング対応表」 は、以下のGitHub技術リファレンスにて公開しています。
👉 【第24弾 詳細技術リファレンス (QIITA_ARTICLE_DETAIL_24.md)】
⭐ 全14層・200パターンの自立型インフラ＆オンプレAIリファレンス集（おじさんの武器庫）を順次公開中です。ぜひGitHubリポジトリへの Star (★) と X (@OjisanTechnical) のフォローもお願いいたします！
👉 GitHub リポジトリ: ojisantech/ojisan-arsenal
💡 【検証環境・個人研究（PoC）に関する注記】
本記事は、筆者個人の自宅検証環境（ホームラボ／仮想環境）において、公開情報およびOSS（オープンソースソフトウェア）を用いて独自に構築・検証した個人研究（PoC）の記録です。特定の企業・団体の実環境や業務上の非公開情報とは一切関係ありません。