要素から値を取得する時点で加工するというアプローチは非常に理にかなっています。
ChatGPT
入力されたデータを処理するタイミングで適切にフォーマットを行うことで、後続の処理がスムーズに進み、エラーが減少することが期待できます。
住所変換機で問題発生!
次のように、「ハイフンはあってもなくてもOK。」とハイフンの入力を許容しているのに、ハイフン入りの郵便番号を入力するとエラーが発生した。
![](https://i0.wp.com/tenka.blog/wp-content/uploads/2024/06/CleanShot-2024-06-14-at-10.49.10@2x.png?resize=1200%2C1070&ssl=1)
まっさきに疑ったのが、郵便番号のバリデーションをする「validatePostalCode」関数だ。
/**
* 正しい郵便番号フォーマット(7桁の数字)であるかをチェック
*
* @param {string} postalCode - チェックする郵便番号
* @return {boolean} 7桁の数字ならtrue、でなければfalseを返す
*/
function validatePostalCode(postalCode) {
postalCode = postalCode.replace(/-/g, ''); // ハイフンを除去
return /^\d{7}$/.test(postalCode);
}
ここでTrueを返していなければ、上記のエラーになるはずだが、テストしたところちゃんとTrueを返している。この関数に問題がない。
さらに調べていくうちに、原因を見つけることができた。
// 郵便番号の入力を検証し、日本語住所を表示
function validatePostalCodeAndUpdateAddress() {
clearFieldsExceptPostalCode(); // すべての内容をクリアする
// エラーメッセージも全てクリアする???ラッピングする!
displayError('', 'block_lot');
displayError('', 'building');
displayError('', 'room');
let postalCode = document.getElementById('postal_code').value;
if (checkPostalCodeInput(postalCode)) { // 郵便番号の入力の有無をチェック
if (validatePostalCode(postalCode)) { // 郵便番号のフォーマットをチェック
displayError('', 'postal_code') // 正の場合は(あるかどうかにかかわらず)エラーメッセージを非表示
// 住所を取得し、日本語の住所を組み立てる
getAddressFromPostalCode(postalCode).then(address => {
validatePostalCodeAndUpdateAddressというこれから整理する関数だが、これの14行目にvalidatePostalCodeがあり、trueを返している。
その場合コードが下に流れていき、19行目で郵便番号で住所を取得することになっている。これを担うのがgetAddressFromPostalCode関数だが、それに渡されている引数postalCodeは、10行目で取得されたけど、ハイフン未除去だということに気がついた。
そこでpostalCodeを取得した時点でハイフン除去処理をするように修正した。
let postalCode = document.getElementById('postal_code').value.replace(/-/g, '');
ここでハイフン除去をしたならば、もうvalidatePostalCode内でそれをする必要がないので、該当部分を削除し、以下のようにした。
/**
* 正しい郵便番号フォーマット(7桁の数字)であるかをチェック
*
* @param {string} postalCode - チェックする郵便番号
* @return {boolean} 7桁の数字ならtrue、でなければfalseを返す
*/
function validatePostalCode(postalCode) {
return /^\d{7}$/.test(postalCode);
}
validatePostalCodeについては、次の記事に詳しい。
今回の問題を解決するのにもChatGPTの世話になったが、途中経過が乱雑すぎるので割愛する。
しかし今回のことでページの値を取得する時に、取得した時点で必要な加工をし、以後ずっとそれを使うほうが問題が起こりにくいと感がじたので、賛同を得るためにChatGPTに聞いてみた。
![](https://i0.wp.com/tenka.blog/wp-content/uploads/2024/06/CleanShot-2024-06-14-at-12.05.43@2x.png?resize=1080%2C1238&ssl=1)
![WordPressでは、デフォルトの機能だけではユーザーのアバター画像を直接変更することはできません。通常、アバター画像はGravatarという外部サービスを通じて管理されます。GravatarはWordPress.comと統合されており、ユーザーのメールアドレスに基づいてアバター画像を表示します。
しかし、WordPress自体でアバター画像を変更するためのプラグインがあります。以下にいくつかの方法を紹介します。](https://i0.wp.com/tenka.blog/wp-content/uploads/2024/06/CleanShot-2024-06-14-at-12.06.56@2x.png?resize=1200%2C158&ssl=1)
![WordPressでは、デフォルトの機能だけではユーザーのアバター画像を直接変更することはできません。通常、アバター画像はGravatarという外部サービスを通じて管理されます。GravatarはWordPress.comと統合されており、ユーザーのメールアドレスに基づいてアバター画像を表示します。
しかし、WordPress自体でアバター画像を変更するためのプラグインがあります。以下にいくつかの方法を紹介します。](https://i0.wp.com/tenka.blog/wp-content/uploads/2024/06/CleanShot-2024-06-14-at-12.07.53@2x.png?resize=1200%2C408&ssl=1)
コードも修正してくれたが、私がしたのと変わらないので割愛する。回答の最初と最後だけを上記の通り掲載する。
「正しい認識に至ったと思います」って、なんだか嬉しい。調子に乗って褒めてもらうことにした。
![](https://i0.wp.com/tenka.blog/wp-content/uploads/2024/06/CleanShot-2024-06-14-at-12.07.40@2x.png?resize=532%2C86&ssl=1)
![WordPressでは、デフォルトの機能だけではユーザーのアバター画像を直接変更することはできません。通常、アバター画像はGravatarという外部サービスを通じて管理されます。GravatarはWordPress.comと統合されており、ユーザーのメールアドレスに基づいてアバター画像を表示します。
しかし、WordPress自体でアバター画像を変更するためのプラグインがあります。以下にいくつかの方法を紹介します。](https://i0.wp.com/tenka.blog/wp-content/uploads/2024/06/CleanShot-2024-06-14-at-12.10.44@2x.png?resize=1200%2C276&ssl=1)
今回は以上だ。