2026/02/04

社内システムのWebアプリケーションを長年、IE11との互換性を維持したIEモードで運用してきましたが、
ようやくIEモードを使用せずに、ChromeやEdgeの標準の動作が可能になりました。
これまで、IE11互換への配慮のせいで使えなかったHTML5記述やJavaScriptフロントエンドライブラリなど、
各種の機能が一斉に使えるようになりました。
その中で、エンドユーザーの操作性改善・UX改善に大きく寄与するために真っ先に採用すべき機能を、
思いつく限り挙げてください。

------
・「テーブルのヘッダ行だけ固定してスクロール」にFixedMidashiライブラリは不要になった。
CSS3の標準の書き方で行けるはず(詳しくは聞いてください)
または縦横双方のスクロール固定が必要ならFixedMidashi継続のほか、
DatatablesというJavaScriptライブラリが便利

他のライブラリ
Tabulator
Grid.js
Handsontable　⇒Excelライク、大規模対応
SlickGrid　⇒高速重視なら

※DatatablesはjQuery依存が逆にネックとなりつつある。
Datatablesの弱点
・大量データで遅い
・jQuery必須のため、ReactやVueと衝突する危険あり
・UIが古めで、CSSを駆使しないとモダンに見えない
・カスタマイズしにくい機能あり…グルーピング、フィルターの保存、編集など
------

◆HTML5基礎機能によるUI改善
・placeholder  …薄い文字で○○を入力してください、と補足が表示できる
・入力チェック required / pattern / type=email|date|number, datetime-local
・datalist (いわゆるコンボボックス)
・autofocus
・カレンダー表示 <input type="date">, <input type="time">
・数値等のスピナー / プログレスバー

◆<dialog> 要素 ⇒2022年に標準化されたそう、モーダルダイアログを簡単に復活？

◆IE時代に封印されていたHTML5機能たち
<details><summary>（折りたたみ）

<details>
  <summary>詳細</summary>
  詳細本文
</details>

<progress> / <meter>
https://somegoro.hatenablog.com/entry/2017/09/08/025832

・Clipboard APIでクリップボードにコピー

・Drag & Drop API

・File API（複数選択・プレビュー）
⇒アップロード前のCSVファイルを事前にチェックする
…必須項目、列の数、日付書式、数値範囲、コードの存在、文字数、禁止文字、空白の有無など

・Web Storage（localStorage / sessionStorage）、IndexedDB
⇒サーバに負荷を掛けず、ブラウザ側で過去の検索条件を覚えておき次回表示などの用途に使える

・FlexBoxレイアウト…横並び、縦並び等が簡単にできる

◆キーボードユーザーへの改善
・Tab順の整理
・ショートカットキー
・フォーカス可視化

◆重い処理にJavaScriptだけで「処理中です…」を大きく表示

◆モダンJSフレームワークの部分導入
・React / Vue / Svelte の 部分適用
・画面全体SPAにせず「1画面1コンポーネント」
既存サーバーサイド構成を壊さず段階導入できる

◆await fetch API
非同期通信、SPAの基本実装
入力フォームをリセットせずに項目別に入力チェックや入力補完ができる