エラー定数の整理と、関数利用によるメンテナンス性の向上についての取り組み

2024-06-15

プログラミング

今回はChatGPTからの啓示はない
天化

今回コードを見直すのはエラー処理関数「displayError」だ。

この関数はエラーコード（errorCode）とフィールド（fieldId）を受け取り、フィールドに対応するエラー表示エリアに、エラーコードに対応するエラーメッセージを表示するものだ。

最後の４行はエラー表示と関係のない部分であるが、用途を把握してから関数外に移動させるつもりだ。今回はこのままにしておく。

JavaScript

function displayError(errorCode, fieldId) {
  let errorMessageElementId = fieldId + '_error'; // 入力フィールドIDからエラーエレメントIDを作成
  let message = errorCode ? errorMessages[errorCode] : '';
  document.getElementById(errorMessageElementId).textContent = message;

  // 特定のエラーが発生した場合、block_lot、building、room をクリアする
  if (errorCode === errorCodes.INVALID_POSTAL_CODE || errorCode === errorCodes.POSTAL_CODE_NOT_FOUND) {
    document.getElementById('block_lot').value = '';
    document.getElementById('building').value = '';
    document.getElementById('room').value = '';
    document.getElementById('address').textContent = '';
    document.getElementById('english_address').textContent = '';

    // 更新全局变量并刷新地址显示
    currentBlockLot = '';
    currentBuilding = '';
    currentRoom = '';
    updateAddressDisplay();
  }
}

関数内ではerrorCodesとerrorMessagesという２つの定数が利用されている。errorCodesは７行目、errorMessagesは４行目だ。

それぞれの定義は以下の通りだ。

JavaScript

        const errorCodes = {
            INVALID_POSTAL_CODE: 'INVALID_POSTAL_CODE',
            POSTAL_CODE_NOT_FOUND: 'POSTAL_CODE_NOT_FOUND',
            POSTAL_CODE_EMPTY: 'POSTAL_CODE_EMPTY',
            INVALID_BLOCK_LOT: 'INVALID_BLOCK_LO',
            INVALID_ROOM: 'INVALID_ROOM',
            INVALID_BUILDING: 'INVALID_BUILDING',
            CAN_NOT_CONVERT: 'CAN_NOT_CONVERT'
        };

        const errorMessages = {
            INVALID_POSTAL_CODE: '正しい郵便番号を入力してください。',
            POSTAL_CODE_NOT_FOUND: '実在しない郵便番号が入力されました。',
            POSTAL_CODE_EMPTY: '郵便番号を入力してください。',
            INVALID_BLOCK_LOT: '番地には数字とハイフンのみ入力できます。',
            INVALID_ROOM: '部屋番号にはアルファベット、数字、ハイフンのみ入力できます。',
            INVALID_BUILDING: '建物名には漢字とひらがなは入力不可です。カタカナに変換の上入力してください。',
            CAN_NOT_CONVERT: '住所未取得のため変換できません'
        };

定数の統合

まず、２つも定数が要るのかと疑問に思った。

errorCodesではキーと値が同じで気色悪く感じるし（ChatGPTによればこれはふつうのことらしいが！）、そもそも自分で作るとしたらerrorMessagesしか作らないと思う。

本当に２つも必要か、１つにまとめられないかと聞いてみた。▼

エラー項目の統合と質問の意味を取り違えている。そうじゃなく、定数を１つにまとめたいんだが！▼

今度は理解してくれた。定数の統合と、この定数を主に使っているdisplayErrorsの修正をしてくれた。

でもその通りに修正し実行したら、郵便番号が実在しない時に起きるエラー（POSTAL_CODE_NOT_FOUND）が表示されなくなった。

これはなぜか。

これはerrorCodes定数を使っているところがまだあるからだ。具体的に言うと、getAddressFromPostalCode関数の下記のところを取り除かなければならなかったのだ。

下記のように、「errorCodes.」を削除し、POSTAL_CODE_NOT_FOUNDをクォーテーションで囲って文字列にしたら問題が解決できた。

JavaScript

reject({ code: 'POSTAL_CODE_NOT_FOUND', field: 'postal_code' });

既存関数の利用

下記のピンク枠内は、もう１つの修正ポイントだ。

なぜ修正が必要かと言うと、この５行はclearFieldsExceptPostalCodeという関数の内容そのもので、ここではその関数を呼び出したほうがメンテナンス性が向上し、コードがきれいになるからだ。

ちなみにclearFieldsExceptPostalCode関数は次のようになっている。

JavaScript

        function clearFieldsExceptPostalCode() {
            document.getElementById('block_lot').value = ''; // 番地
            document.getElementById('building').value = ''; // 建物名
            document.getElementById('room').value = ''; // 部屋番号or階数
            document.getElementById('address').textContent = ''; // 日本語の住所
            document.getElementById('english_address').textContent = ''; // 英語の住所
        }

したがってピンク枠内を「clearFieldsExceptPostalCode();」とすればよい。

修正し、コメントも手直ししたdisplayError関数の最終バージョンはこれだ。▼

JavaScript

        /**
         * エラー表示
         *
         * @param {string} errorCode - エラーコード
         * @param {string} fieldId - エラーメッセージを表示する入力フィールドのID
         */
         function displayError(errorCode, fieldId) {
            let errorMessageElementId = fieldId + '_error'; // 入力フィールドIDからエラーエレメントIDを作成
            let message = errorCode ? errors[errorCode] : '';
            document.getElementById(errorMessageElementId).textContent = message;

            // 郵便番号のエラーが発生した場合、郵便番号以外のエリアをクリア
            if (errorCode === 'INVALID_POSTAL_CODE' || errorCode === 'POSTAL_CODE_NOT_FOUND') {
                
                clearFieldsExceptPostalCode();

                // グローバル変数を更新し、住所表示をリフレッシュ
                currentBlockLot = '';
                currentBuilding = '';
                currentRoom = '';
                updateAddressDisplay();
            }
        }

今回は以上である。

定数の統合

既存関数の利用

関連