if文を書く際に注意すべきポイント5選

今回は明快で読みやすいif文（条件式）を書くために気をつけるポイントについて解説していきます。

以下のポイントに注意して、保守性と可読性の高いコードを心がけていきましょう。

マジックナンバーを避ける

if文で直接数字を使用（マジックナンバー）するのは避けたほうが無難です。その数字が何を意味するのか示す定数を作成し、それを使用しましょう。

NG例

let userAge = 22;

if (userAge >= 20) {
    console.log("あなたは応募できます。");
} else {
    console.log("あなたは応募できません。");
}

OK例

const MINIMUM_APPLICATION_AGE = 20;
let userAge = 22;

if (userAge >= MINIMUM_APPLICATION_AGE) {
    console.log("あなたは応募できます。");
} else {
    console.log("あなたは応募できません。");
}

比較演算子の左辺には、評価したい変数を置く

通常文章は左から右に読むので、if文もそれに沿って書くことで直感的に理解できます。"if (x=10）"の場合「もしxが10より大きければ」と読むことができます。

NG例

if (MINIMUM_APPLICATION_AGE <= userAge) {
    console.log("あなたは応募できます。");
} else {
    console.log("あなたは応募できません。");
}

OK例

const MINIMUM_APPLICATION_AGE = 20;
let userAge = 22;

if (userAge >= MINIMUM_APPLICATION_AGE) {
    console.log("あなたは応募できます。");
} else {
    console.log("あなたは応募できません。");
}

複雑な条件は避ける

条件に計算式を入れたり複数の条件があるなど複雑なif文はできるだけ避けましょう。複雑な条件の場合は条件式を一つの変数に格納することで、何を表しているかが分かりやすくなります。

NG例

if (applicantAge >= MINIMUM_APPLICATION_AGE && 
    experienceYears >= MINIMUM_EXPERIENCE_YEARS && 
    hasRequiredQualification) {
    console.log("あなたは応募できます。");
} else {
    console.log("あなたは応募できません。");
}

OK例

const canApply = applicantAge >= MINIMUM_APPLICATION_AGE && experienceYears >= MINIMUM_EXPERIENCE_YEARS && hasRequiredQualification;

if (canApply) {
    console.log("あなたは応募できます。");
} else {
    console.log("あなたは応募できません。");
}

否定条件の使用を避ける

二重否定など否定形を使用すると読み手に余計な負担を書ける場合があるのでなるべく避けましょう。

NG例

let isNotActive = true;

if (!isNotActive) {
    console.log("アカウントはアクティブです。");
} else {
    console.log("アカウントは非アクティブです。");
}

OK例

let isActive = true;

if (isActive) {
    console.log("アカウントはアクティブです。");
} else {
    console.log("アカウントは非アクティブです。");
}

ネストの深いif文を避ける

ネストが深いと可読性が下がり理解するのが困難になります。早期リターンなどを利用することでコードがシンプルになります。

NG例

function validateData(data) {
    if (data !== null) {
        if ('value' in data) {
            if (typeof data['value'] === 'number') {
                console.log("バリデーション成功");
                return true;
            } else {
                console.log("'value'は数値ではありません");
                return false;
            }
        } else {
            console.log("キー'value'が存在しません");
            return false;
        }
    } else {
        console.log("データが存在しません");
        return false;
    }
}

OK例

//早期リターンを行う
function validateData(data) {
    if (data === null) {
        console.log("データが存在しません");
        return false;
    }
    if (!('value' in data)) {
        console.log("キー'value'が存在しません");
        return false;
    }
    if (typeof data['value'] !== 'number') {
        console.log("'value'は数値ではありません");
        return false;
    }
    console.log("バリデーション成功");
    return true;
}