こんにちは。
ジメジメとした梅雨の空気が続く今日この頃、業務もなかなかスカッと終わらずに疲れが溜まっている方も多いかもしれませんね。
今回は、そんなある日の自分の“楽をしようとしてちょっと焦った”話をシェアしたいと思います。
作業がつらい。とにかくつらい。
とある業務システム。
画面上にたくさんの入力欄が並んでいて、それぞれに毎回データを打ち込まなければならない。
同じような情報を繰り返し入れるだけなのに、「次の画面に進むには全部入力必須」というやっかいな仕様。
「マウスとキーボードを何十回も往復するの、もうムリ、、、」
「システムの改造にはお金も時間も掛かるし、、、」
そう思った私は、検証ツール（F12）→ コンソールを開きました。
ひらめいた。value直接書き換えればいいじゃん！
「DOMから直接入力欄に値入れちゃえばいいんじゃ？」
そんなノリで、検証ツールのコンソールからDOMを直接いじり始めたのが始まりでした。
document.querySelectorで値をセット！
たとえばこんな感じで：
document.querySelector('#name').value = '山田 太郎';
document.querySelector('#email').value = 'yamada@example.com';
document.querySelector('#age').value = '35';を実行すると、おぉ、ちゃんと入力された！
タブキーでフォーカスを変える必要もありません。
入力している元のデータはExcelなので、データ部分の変更は自動で書き換わるように設定！
「おお、楽勝じゃん！これから定時退社確定♪」と調子に乗って、他のフィールドにも次々とvalueを代入。
送信ボタンを押したら「データを入力してください」と言われる
ところが、入力が終わって送信ボタンを押してみると……
「必須項目が未入力です」
コンソールで確認しても value はちゃんと入ってるし、見た目も埋まってる。
なのに、なぜかシステムには“入力されていない”と判定されてる。
何度も試しても結果は同じ。
自動入力に成功したと思った矢先の失敗は、地味にメンタルに響きます。
見た目は正しくても、システムの裏側では何も起きていなかった。
このときの私は、まだそれに気づいていませんでした。
まとめ：ちょっと便利にしようとした結果…
ちょっと楽をしようとしただけなのに、思わぬ壁にぶつかった今回の一件。
便利に見えるDOM操作にも、意外な落とし穴があると実感しました。
次回どのようにしたら解決できるか考えてみましょう！
