毎朝パンではなくご飯を食べたいが、嫁がパンを出す系で少し凹んでいる下駄です。
WEBページやサービスを作っている時にjavascriptを使わないという作業がほぼありません。
そんなjavascriptでのDOM検索でquerySelectorが便利すぎて多様してしまうのですが、cssのselectorをそのまま使用できるので、webサイト全体の管理と含めて非常に使い勝手が良いのですが、今回はそのquerySelectorで発見した機種仕様による不具合を見つけたので、簡単にその説明をしておきます。
仕事でjavascriptを使っている人ですでに気がついている人もいるかもしれませんが、僕の環境で非常に重要なポイントでもあったので、ブログに掲載しておくことにします。
不具合発見までのストーリー
うちの家では、手作りの家計簿アプリに嫁が日々の買い物したレシートをスマホで入力するようにしているんですが、消費税が8%から10%に変更されて軽減税率が適用されたことで、これまで使っていた家計簿が陳腐化してしまったので、新たにレシート画像も登録できるような機能追加した家計簿システムを構築しておきました。
これを実際に使い始めた時の話ですが、嫁が「送信ボタンを押しても何にも変化しないよ」というので、何やら送信処理のトラブルではないかと思い、パソコンで調べてみたが普通に登録ができる・・・
試しに嫁はパソコンで登録したのと同じ内容を登録してみたがやはり同じ症状で一向にデータが登録できない・・・
少し不思議に思い、自分のスマホで同じ内容を登録してみると、問題なく登録ができる・・・一体嫁のスマホに何が起きているのか？？？
こうした時は、仕事の経験から、同じiphone同士で動作が違うということなので、環境の違いを調査してみることにした。
環境の違いは比較的カンタンで、嫁スマホはiOSを最新版にしておらず、iOS12で僕のスマホはiOS13になっていたという点です。
しかし、この家計簿アプリはWEBブラウザで動作するように作られているので、ようするにsafariブラウザで問題なく動作すればスマホでも問題なく使用できるはずなのに、何故嫁スマホだけ、送信ボタンが押せないのか、まだ理解できません。
PCのsafariで同じ操作をしても、javascriptコンソールにエラーは一切でないし、chromeブラウザでも、同じ状態です。
最後の手段と思い、嫁スマホをケーブルでmacにつなぎ、safariの開発用デバッグモードでiphoneのブラウザコンソールを直接pc画面に表示してみました。
すると、見事にページを読み込んだ直後にjsエラーが出ているではありませんか・・・?!
そして、その記述されているファイルの記述行を見てみると、以下のような記述がされていました。
document.querySelector("[name='submit_button'");
ページ読み込み時に、内部のDOM構造で送信ボタンを検知して送信イベントを埋め込む箇所の記述で不具合が見つかりました。
正確には以下のようになるはず。
document.querySelector("[name='submit_button']");
閉じ"]"（カッコ）が漏れているのが原因でした・・・
でも待てよ・・・こんなに明確な不具合がPCやiosの最新版でエラーが検知されないなんておかしくない？
とりあえず、家計簿システムはその箇所の誤記述を修正して、無事に嫁スマホでも送信ができるようになりました。
憶測
文献を色々調べてみましたが、なかなかこれに関する記述が見当たらなかったので、僕が勝手に憶測での見解を考えてみました。
ようするに、PCやスマホの最新OSでは、こうした簡易な誤記述に対して寛容に対処できるように、親切機能として自動修復機能が搭載されていて、よくあるHTMLタグの閉じ忘れと同じような処置がとられたのではないかと考えられる。
それにより、古い機種ではその寛容機能が働かずにエラーになり、新しい機種ではエラーが出ずに正常動作しているようになったという事だと勝手に納得しました。
しかしながら、今回の件で一番正確な挙動をしていたのは、古い嫁スマホであり、不具合検知もそのために時間がかかってしまったことを考えると、何のための寛容処置なのか、少し考え深い思考に陥ってしまった・・・
こんなときのためにjavascriptの"use strict"をちゃんと記述して置くことで、こうした不具合も検知できるのでは・・・とやってみたがst理CTモードでも不具合検知はできませんでした・・・
とりあえず、こうした事象を理解しておいて、個別に対策を行うしかないかもですね・・・
0 件のコメント:
コメントを投稿