[今日のプログラミング] JavascriptのURL APIを使った、トラブルシューティング

他人のコードを見て勉強することがありますか？ それが後輩や、プログラミング初心者が書いたコードであっても、自分とは違うプログラミングコードを見ると、「自分ならこう書く」と「自分よりいいコード」というような思考が先立ってしまう自分がいる。 でも、そんな他人が書いたコードこそ、プログラミングのコーディングスキルを向上させるチャンスでもあります。 最近では、AIに書かせてから、自分で書き直す作業をやっているのですが、書き直さずにそのまま仕事のプログラムで使っちゃう人もいるとのこと。 問題がなければ良いんですが、今回は問題ありだったコードを元に、その原因と修復までの過程後ご紹介します。

問題発覚

とあるWebサービスを公開する直前に、最終チェック担当者からこんな報告が来ました。

• 「リンクのURLがおかしいです！」

そのWebサービスというのは、特殊なコンテンツ販売を行うサービスで、１個ずつのコンテンツをサイト内で遷移して購入させるというサイトでした。 何がおかしいのかというと、購入するページまでのリンクが一覧で並んでいるリンク先のURLに全て、これまでなかったハッシュタグが設置されてしまっているとのことでした。 少しわかりやすく解説すると、以下のような正常な場合と、その下のおかしなURLにわかった場合の違いが発生しているとのことでした。

正常な場合

Link1 -> https://wxample.com/content-1.html Link2 -> https://wxample.com/content-2.html Link3 -> https://wxample.com/content-3.html

おかしなURLの場合

Link1 -> https://wxample.com/content-1.html#perchase Link2 -> https://wxample.com/content-2.html#perchase Link3 -> https://wxample.com/content-3.html#perchase

全てのリンクのURLに "#perchase" というハッシュタグがくっついてしまっているようでした。

原因

この少し前に、購入ページに、購入ボタンまでページ読み込み時に自動的にスクロールさせるようにハッシュリンクをつけて欲しいという要望があり、 エンジニアが設置したという作業が発生していました。 以下のようなページで、ページの下の方にある購入ボタンにダイレクトにファーストビューで表示させたいという要望だったわけですね。 http://example.com/parchase/content-any.html#parchase そして、このページに表示されるリンクURLに全て#parchase アンカーリンクがくっついていたという事象でした。 原因としては、このリンク一覧は、ページ内に設置されたモジュールで作り出されていて、以下のようなコードが書かれていました。 const id = "対象のID値" const link_tag = document.querySelector("a.link") let url = new URL(window.location.href); url.searchParams.set("target_id", id); link_tag.href = url おそらく、これまでは、ハッシュリンクがなかったので、現在のアクセスしているURLのtarget_idだけを変更するという意図で作られたコードだと思うんですが、 ハッシュ値が入ったことで、URLにそれも含まれてしまうようになってしまいました。 これで得に問題がない場合もありますが、何も考えずにURLを設置するのは危険なんです。 もしこのページに外部リンクからの、広告リンクで、サイト内のアクセス解析に影響する値が含まれていた場合、 広告リンクでもないのに、その値を別のリンクに持っていってしまい、アクセス解析の値が不明になってしまうという事も容易に想像できます。

適切なリンクURLに変更

修正自体はさほど難しくありませんでした。 const id = "対象のID値" const link_tag = document.querySelector("a.link") let url = new URL(window.location.href); url.searchParams.set("target_id", id); link_tag.href = url.origin + uri.path +"?target_id=" +url.searchParams.get("target_id") こうすることで、不要なゴミクエリを無意識にくっつけることは無くなります。

あとがき

今回は、URL APIのトラブルについて解説しましたが、APIの挙動とそれのリスクを理解せずに、プログラミングしてしまうことで、こうしたプログラマー本人が把握していない不具合を生み出します。 多くの場合、手抜きしたプログラミング、または、AIに言われたままのプログラムをそのまま自分で思考せずに使ってしまうというのが問題なようですね。 自分の思考が最後の砦になるようなコーディングができるようにならないと、今後のプログラムを仕事にすることは難しくなるんじゃないかな〜と考えてしまいました。 こういうトラブル、一度経験すると、自分のプログラミングにも大きく注意点として影響を与えてくれるので、ある意味感謝ですけどね。