処理内容がよくわかる関数名はコードの明確性と可読性を高める

2024-06-19

プログラミング

コードを書く際には、関数名やコメントを適切に付けることで、他の開発者や将来の自分がそのコードを容易に理解し、維持しやすくすることが重要である。
ChatGPT

住所変換機のコード整理の続きだ。

まず、前々回の記事で取り扱った「updateAddressDisplay」関数を「updateJapaneseAddressDisplay」に名前変更する。日本語の住所を更新する関数だからだ。

次に、今回のテーマだが、下記「validateInput」関数を整理していく。

JavaScript

        // 郵便番号以外の入力チェック
        function validateInput(inputElementId, value) {
            let errorCode = null;

            if (inputElementId === 'block_lot' && /[^0-9-]/.test(value)) {
                errorCode = 'INVALID_BLOCK_LOT';
            } else if (inputElementId === 'room' && /[^0-9a-zA-Z-]/.test(value)) {
                errorCode = 'INVALID_ROOM';
            } else if (inputElementId === 'building' && /[\u4E00-\u9FFF\u3040-\u309F]/.test(value)) {
                errorCode = 'INVALID_BUILDING';
            }

            // エラーコードが設定されている場合、エラーを表示する
            if (errorCode) {
                displayError(errorCode, inputElementId);
                return false; // バリデーションエラー
            } else {
                // エラーメッセージをクリアする
                displayError('', inputElementId);
                return true; // バリデーション成功
            }
        }

この関数では、5行目で入力エリアがblock_lot、つまり番地の場合、入力されたテキストが数字とハイフンのみかをチェックしている。丁目や番・号などは省略し、1-1-1のような形しか受け入れないことになっている。

7行目では、入力エリアがroom、つまり部屋番号の場合、入力されたテキストが英数字かハイフンのみかをチェックしている。部屋番号を想定しているが、階数も入力OKだ。ただその場合は、例えば３階を3Fに置き換えるなど、英数字かハイフンになるようにしてもらうこと必要だ。

9行目では、入力されたテキストに漢字とひらがなが含まれていないかをチェックしている。これは現在の設定だが、ひらがなのた建物名も許容するかどうか、これから検討していきたい。

14行目ではエラーが発生した場合、エラー表示とfalseを返す処理をしている。

17行目以降は、エラーを非表示し、trueを返す処理をしている。

簡単で明晰なコードで、中身を修正する必要はない。ただ関数名は変えたい。

「validateInput」では曖昧で、どの入力を検証する関数なのかわかりにくいからだ。こうなったのも、ChatGPTに質問して作るとき、ChatGPTが全体像がわからないため、より具体的な関数名を提案できなかったからだ。

ChatGPTに聞くまでもないや、と思ったが、案外いいのが思い浮かばない。

「validateSpecificInput」では、何が「特定の」（Specific）かはやはりパット見でわからない。

「validateFieldInput」は、何のFieldかわからない。

「validateAddressField」では、何の住所（Address）かわからない。しかも他の関数名との統一の観点から、最後をInputで終わらせたい。

そこで僕は考えた。「validateDetailAddressInput」ではどうかと。詳細住所の入力という意味だが、日常目にするフォームでもよくある表現だから違和感がない。ただ、最後を単数形と複数形のどちらにすべきか、ちょっとわからない。複数の入力の判定をしているので複数のほうが良さそうなのだが、なんかちょっと違和感がある。▼

OK、これに決定だ。JSDocコメントも付けた最終コードはこれだ。▼

JavaScript

        /**
         * 郵便番号以外の詳細住所フィールドの入力を検証します。
         *
         * @param {string} inputElementId - 検証対象の入力要素のID。
         * @param {string} value - 検証する入力要素の値。
         * @returns {boolean} - バリデーションが成功した場合はtrue、失敗した場合はfalseを返します。
         */
        function validateDetailAdressInput(inputElementId, value) {
            let errorCode = null;

            // 番地に数字とハイフン以外含まれていないかをチェック
            if (inputElementId === 'block_lot' && /[^0-9-]/.test(value)) {
                errorCode = 'INVALID_BLOCK_LOT';
            // 部屋番号に英数字とハイフン以外含まれていないかをチェック
            } else if (inputElementId === 'room' && /[^0-9a-zA-Z-]/.test(value)) {
                errorCode = 'INVALID_ROOM';
            // 建物名に漢字とひらがなが含まれていないかをチェック
            } else if (inputElementId === 'building' && /[\u4E00-\u9FFF\u3040-\u309F]/.test(value)) {
                errorCode = 'INVALID_BUILDING';
            }

            // エラーコードが設定されている場合、エラーを表示する
            if (errorCode) {
                displayError(errorCode, inputElementId);
                return false; // バリデーションエラー
            } else {
                // エラーメッセージをクリアする
                displayError('', inputElementId);
                return true; // バリデーション成功
            }
        }

今回は以上だ、と言いたいところだが、上記の内容では記事のタイトルに難儀してしまう。やはり、ChatGPTから何か教訓めいたそれらしい名言を引き出したい。

記事の全内容をコピペの上で、「この内容から教訓を得られるとすればどのようなものだろうか？」と質問。▼

ChatGPTのどのような質問に対しても何らかの回答を出せるという点を高く評価したい。

今回は以上だ。

関連