【初心者向け】何行くらいになったら関数化するの

はじめに

何行くらいになったら関数化するの？という質問をされたので少し考えてみました

調べてみると難しい用語も出てきますが、私の言葉で一言で言うならこういうことです

行数が短く済むなら良いことだけどそこは本質ではない。「関数名で関数内の処理を説明しきれているか？」そうでないなら抽出したほうがいいかも

具体例

以下の関数は行数的にはそんなに長くないですけど

const checkXXX = (xxx) => {
    const errors = [];
    if (チェック処理1) {
         errors.push("チェック処理1に失敗しました");
    }
    if (チェック処理2) {
         errors.push("チェック処理2に失敗しました");
    }

    let errmsg = "";
    for (const err of errors) {
        errmsg += "<li>" + err + "</li>";
    }
    
    if (errmsg) {
        return "<ul>" + errmsg + "</ul>";
    }
    return "";
};

「チェックする関数だよね～どんなチェックをしてるのかな？」と思ってこれを見に来た人は「チェック以外のこともやってるんかい！」って思ってしまうかもしれません＞＜
でもこういうソースよく見かけます
せっかくに見に来てくれた人をがっかりさせたら良くないよ、1つのことに絞ろう

こんなのはどうでしょうか

const checkXXX = (xxx) => {
    const errors = [];
    if (チェック処理1) {
         errors.push("チェック処理1に失敗しました");
    }
    if (チェック処理2) {
         errors.push("チェック処理2に失敗しました");
    }

    return errors;
};

const createListHTML = (textList) => {
    // 略
}

const 呼び出し元 = () => {
    const errors = checkXXX(xxx);
    const errHTML = createListHTML(errors);
}

どうですか？チェック処理を見に来た人は、「チェック処理だなぁ～」って思うんじゃないでしょうか
しかも読みやすくなったどころか、なんと抽出した関数の汎用化にも成功していまして（本題ではないのでカット）

おわり

人間が読むんですから、読みやすいかどうかは人によって違いますよね
皆さんならどう書きますか？
どうやったら読みやすくなるかなって考えながらプログラミングするのはとても楽しいですよ（　＾ω＾）・・・
いいリファクタのやり方を閃いたらぜひ共有してみてください