ページ上要素から値を取得する時は、取得した時点で加工すべし

cat, tabby, field

要素から値を取得する時点で加工するというアプローチは非常に理にかなっています。
入力されたデータを処理するタイミングで適切にフォーマットを行うことで、後続の処理がスムーズに進み、エラーが減少することが期待できます。

ChatGPT

住所変換機で問題発生!

次のように、「ハイフンはあってもなくてもOK。」とハイフンの入力を許容しているのに、ハイフン入りの郵便番号を入力するとエラーが発生した。

まっさきに疑ったのが、郵便番号のバリデーションをする「validatePostalCode」関数だ。

JavaScript
/**
 * 正しい郵便番号フォーマット(7桁の数字)であるかをチェック
 *
 * @param {string} postalCode - チェックする郵便番号
 * @return {boolean} 7桁の数字ならtrue、でなければfalseを返す
 */
function validatePostalCode(postalCode) {
  postalCode = postalCode.replace(/-/g, ''); // ハイフンを除去
  return /^\d{7}$/.test(postalCode);
}

ここでTrueを返していなければ、上記のエラーになるはずだが、テストしたところちゃんとTrueを返している。この関数に問題がない。

さらに調べていくうちに、原因を見つけることができた。

JavaScript
        // 郵便番号の入力を検証し、日本語住所を表示
        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を取得した時点でハイフン除去処理をするように修正した。

JavaScript
            let postalCode = document.getElementById('postal_code').value.replace(/-/g, '');

ここでハイフン除去をしたならば、もうvalidatePostalCode内でそれをする必要がないので、該当部分を削除し、以下のようにした。

JavaScript
        /**
         * 正しい郵便番号フォーマット(7桁の数字)であるかをチェック
         *
         * @param {string} postalCode - チェックする郵便番号
         * @return {boolean} 7桁の数字ならtrue、でなければfalseを返す
         */
        function validatePostalCode(postalCode) {
            return /^\d{7}$/.test(postalCode);
        }

validatePostalCodeについては、次の記事に詳しい。

今回の問題を解決するのにもChatGPTの世話になったが、途中経過が乱雑すぎるので割愛する。

しかし今回のことでページの値を取得する時に、取得した時点で必要な加工をし、以後ずっとそれを使うほうが問題が起こりにくいと感がじたので、賛同を得るためにChatGPTに聞いてみた。

WordPressでは、デフォルトの機能だけではユーザーのアバター画像を直接変更することはできません。通常、アバター画像はGravatarという外部サービスを通じて管理されます。GravatarはWordPress.comと統合されており、ユーザーのメールアドレスに基づいてアバター画像を表示します。

しかし、WordPress自体でアバター画像を変更するためのプラグインがあります。以下にいくつかの方法を紹介します。
WordPressでは、デフォルトの機能だけではユーザーのアバター画像を直接変更することはできません。通常、アバター画像はGravatarという外部サービスを通じて管理されます。GravatarはWordPress.comと統合されており、ユーザーのメールアドレスに基づいてアバター画像を表示します。

しかし、WordPress自体でアバター画像を変更するためのプラグインがあります。以下にいくつかの方法を紹介します。

コードも修正してくれたが、私がしたのと変わらないので割愛する。回答の最初と最後だけを上記の通り掲載する。

「正しい認識に至ったと思います」って、なんだか嬉しい。調子に乗って褒めてもらうことにした。

WordPressでは、デフォルトの機能だけではユーザーのアバター画像を直接変更することはできません。通常、アバター画像はGravatarという外部サービスを通じて管理されます。GravatarはWordPress.comと統合されており、ユーザーのメールアドレスに基づいてアバター画像を表示します。

しかし、WordPress自体でアバター画像を変更するためのプラグインがあります。以下にいくつかの方法を紹介します。

今回は以上だ。