前職で実際にやってしまったことやヒヤリハットについて色々経験し自分の中で教訓になっていることを紹介します。
ファイルアップ時のヒヤリハット
前職ではサーバーにファイルをアップロードするのにFTPクライアントのFileZillaを使用していました。ドラッグアンドドロップでファイルをアップロードでき、とても操作しやすく便利なものでした。
ヒヤリハットが起きたときも特に変わった使用方法などせず普通に使用していました。
がしかしディレクトリを移動しようとフォルダのアイコンをダブルクリックしようとした際にマウスが動いていたせいか、フォルダアイコンの真下のファイルがドラッグアンドドロップでフォルダを移動させてしまったのです。
幸いなことに移動先のフォルダには同名のファイルが存在せず上書き等も行われずそのままファイルをもとの場所に戻して事なきを得ました。
もしファイルの上書きをしてしまいさらに対象のファイルのバックアップをもっていなかったらディレクトリの場所次第ですが大きな損害になっていたと思うと恐ろしいです。
操作が簡単だからと言って気を抜いて作業するのは絶対によくないです。サービスの運用にかかわるものを触るときは慎重に作業しましょう。あとバックアップはすごく大切です。
フォームのチェックボックス（大惨事）
フォームの最後に注意事項を記載したスクロールできるボックスとその注意事項をちゃんと確認し同意しますか？というチェックボックスを実装したときの話です。
実装内容としては注意事項を最後までスクロールしてからでないとチェックボックスをチェックできないようにするというものでした。特に難しい実装もなく実装の内容としては、
注意事項の書かれた要素の高さを取得してその高さ分スクロールしたかをscrollイベントで取得して比較するような実装をしていました。
実装の確認もMac：Google、Safari、Firefox、Windows：Google、Edge、IE、Firefox、iPhone：Safari、Googleで確認しました。Androidのみ実機を所持していなかったのですが特にデバイスに依存するような実装じゃないので大丈夫だと思ってテストアップの報告をしました。
ディレクターからも問題ないというフィードバックを受け、本番に反映し、いざ応募を開始したところAndroidのユーザーからチェックボックスをチェックできなくて応募できませんとの報告を受けました。
もう応募を開始してしまっているため急いで修正するためチェックボックスをスクロールせずにチェックできるようにしディレクターに確認してもらいすぐ本番に反映しました。
できるだけ早く修正しましたがクライアントがとても大きいため短時間でも応募できなかったユーザーはどれだけいたのかわからず謝罪を行うような事態になってしまったのです。
確認するべきブラウザやOSについては契約の内容に含まれるものすべてで確認が必要なのにAndroidでの確認を疎かにしてしまったことで謝罪を行うような事態になってしまいました。
この件のあとから社内の確認フローにAndroidでの確認を必ずするようにと全体周知を行うようになりました。
自分はこの件のあとからブラウザ確認をしっかりするようになったことと、スクロールによる比較にはずれることがあるかもしれないと思い、できるだけスクロールの比較をするような実装をしなくなりました。
具体的にはwindow.addEventListener('scroll')をほとんど使用せずInterSectionObserverを使用するようになりました。
余談ですがscroll系の実装はGSAPかInterSectionObserverの使用をおすすめします。
まとめ
- 簡単な作業でも動いているサービスを扱う場合は一つのミスが大きな損害になり得るので絶対にミスをしないように集中して作業を行う。
- 確認作業はしすぎるくらいにしよう。対応端末やOS、ブラウザについても確認しておきましょう。
短くなってしまいましたが前職のやらかしと教訓についてでした。
やらかしてしまうとずっと引きずってしまうことになるのでできるだけやらかさないように気を付けましょう。