21
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

この記事では、early returnというコードの可読性を向上させるコーディング方法について簡単に紹介する。

タイトルに特に意味はない。夏っぽさとプログラミングっぽさを感じさせる俳句のようなものだね(?)。

この記事は、5分以内で読むことができます。

early returnとは

まず、early returnは直訳すると早期リターンになる。

関数やメソッドの途中で、特定の条件が満たされた場合に、処理を早期(early)に終了(return)して関数から抜けるプログラミング技法だ。

early returnを用いることで、不要なネストや複雑な条件分岐を避け、コードの可読性と保守性を向上させることができる。

つまり、場合にもよるが、early returnを用いることでリーダブルになるわけだ。

early returnを使わない場合と使った場合

実際に、処理は同じだけどearly returnを使っていない場合のコードと、使った場合のコードを見比べて、可読性が向上しているかを見てみよう。

例として、認証情報がある場合に、何らかの処理をさせたいコードを記述し比較を行う。

early returnを使わない場合

early returnなし

// 認証情報があるかどうかを判定する関数
const authenticateUser = (user) => {
  if (user) {
    if (user.username) {
      if (user.password) {
        if (isCorrectCredentials(user.username, user.password)) {
          return 'User authenticated successfully';
        } else {
          return 'Invalid username or password';
        }
      } else {
        return 'Password is missing';
      }
    } else {
      return 'Username is missing';
    }
  } else {
    return 'User object is null or undefined';
  }
};

// 正しい資格情報かどうかをチェックする関数
const isCorrectCredentials = (username, password) => {
  return username === 'admin' && password === '1234';
};

// 定義
const user = { username: 'admin', password: '1234' };
const result = authenticateUser(user);

// 結果の参照
console.log(result); // User authenticated successfullyとなる

少し大袈裟に書いているものの、ネストがかなり深くなっていることが見て取れる。

次に、上記とまったく同じことを実現できるコードをearly returnを使って記述する。

early returnを使った場合

early returnあり

// 認証情報があるかどうかを判定する関数
const authenticateUser = (user) => {
  if (!user) {
    return 'User object is null or undefined';
  }
  if (!user.username) {
    return 'Username is missing';
  }
  if (!user.password) {
    return 'Password is missing';
  }
  if (!isCorrectCredentials(user.username, user.password)) {
    return 'Invalid username or password';
  }
  return 'User authenticated successfully';
};

// 正しい資格情報かどうかをチェックする関数
const isCorrectCredentials = (username, password) => {
  return username === 'admin' && password === '1234';
};

// 定義
const user = { username: 'admin', password: '1234' };
const result = authenticateUser(user);

// 結果の参照
console.log(result); // User authenticated successfullyと出る


early returnを使用することでネストがなくなり、かなりスッキリしたことがわかる。
early returnを使わない場合、user情報がある場合は次々に下のネスト(次の処理)に進むように記述されていた。一方、early returnを用いる記述方法では、user情報がない場合、つまりfalsyな場合は、早期に処理を抜けるように記述している。

2つの比較からわかること

early returnを使うことで、大きく以下4つのメリットが考えられる。

  • 可読性の向上
    各条件を満たさない場合、即関数から抜けるため、コードが直線的になり読みやすくなる。ネストが深くならず、複雑さを回避できる。

  • 保守性の向上
    コードの変更や新しい条件の追加が容易になる。各条件が独立しているため、新しいチェックを追加しても全体の構造が複雑になりにくい。

  • バグの減少
    早期に異常な状態を検出し、処理を中断することは、バグの発生を未然に防ぐことにつながる。異常な状態が続くことを避けることで、予期しない動作を削減できる

  • パフォーマンスの向上
    不要な処理を早期に終了することで、無駄な計算や処理を省略でき、パフォーマンスの向上につながる。

おわりに

可読性 EarlyReturnと 蝉の声

21
3
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
21
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?