はじめに：情シスや現場管理者の「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）の記録です。特定の企業・団体の実環境や業務上の非公開情報とは一切関係ありません。