00:06
神経質やせ男です。 今日は、ボタンの暴走を止める方法というテーマでお話します。
ある日、保存ボタンを押した瞬間、画面がリロードされて、入力していた内容が全て消えました。
あの絶望感、なかなかのものです。
ちゃんと保存したはずなのに。
そう思っていたんですが、原因はとてもシンプルでした。
それがボタンのタイプです。
実は、HTMLのボタンって、何も指定しないとデフォルトで送信ボタンとして動きます。
つまり、押した瞬間にサーバーへデータを送って画面を更新しようとするんですね。
これ事務作業で例えるとこうです。
まだ下書きのつもりで押したハンコが勝手に本体質として処理されてしまう。
しかも手元の機械は回収される。
ちょっとした事故ですよね。
今回やりたかったのは保存だけ。
画面の更新する必要はありません。
なのにボタンが勝手に走り出してしまった。
これが今回のトラブルの正体でした。
ではどうするか。
答えはシンプルです。
保存ボタンにこう書きます。
type="button".
これだけです。
たった一言なんですが、効果は絶対です。
この指定をすることで、ボタンは勝手に送信しなくなります。
その場に留まって、JavaScriptの指示だけを待つようになります。
いわば落ち着いた受付係ですね。
この違い地味なんですが、UXに直結します。
ユーザーからすれば、落ちたら消えたとか、ちゃんと保存されたか、
その差はとても大きい。
今回のリファクタリングを通して感じたのは、
こうした小さな設定が全体の安心感を作るということでした。
コードって派手なロジックよりも、
こういう当たり前を守る工夫の積み重ねなんですよね。
さて、ここまででJavaScriptのリファクタリングシリーズは一区切りです。
見た目と動きを分けてタイミングを整えて、
データの流れを整理して、
手作業を自動化して最後にボタンの役割を明確にする。
一つ一つは小さな改善ですが、
積み重ねることで大きな安心につながります。
忙しい日々の中でも、正しく整えた仕組みはちゃんと応えてくれる。
そんな手応えを感じた5日間でした。
それでは今日も良い一日をお過ごしください。
お知らせです。
先日発売した新刊、会社公認、爆速仕事術、
管理者権限なしでできるPC魔改造ですが、
おかげさまで多くの方に手に取っていただいています。
無料期間は終了しましたが、
現在はKindle Unlimitedの読み放題にも対応しています。
会員の方は追加料金なしで、
そうでない方も数百円の投資で、
一生もののPC時短スキルが手に入ります。
事務作業を1日15分短縮できれば、
1ヶ月で約5時間の自由時間が生まれます。
03:00
その5時間を介護や趣味、学習に当てたい方は、
ぜひ概要欄のリンクからチェックしてみてください。
次回は5日間で変わる、
JS整理の全記録についてお話しする予定です。
ご静聴ありがとうございました。