JavaScript、ReactJS、EcmaScript-6 における「Expected to return a value at the end of arrow function」警告の解決方法

Arrow 関数を使用する際に、末尾に値を返さない場合に発生する警告「Expected to return a value at the end of arrow function」について、その原因と解決方法を分かりやすく解説します。

原因

Arrow 関数は、簡潔な構文で関数を定義できる便利な機能です。しかし、末尾に return ステートメントがない場合、警告「Expected to return a value at the end of arrow function」が発生します。これは、Arrow 関数が暗黙的に undefined を返すことを期待しているためです。

解決方法

この警告を解決するには、以下の2つの方法があります。

値を返す

最も簡単な方法は、Arrow 関数の末尾に return ステートメントを追加して、値を返すことです。

// 警告が発生する例
const myFunction = () => {
  // 処理
};

// 警告を解決する例
const myFunction = () => {
  // 処理
  return '値';
};

式を省略する

Arrow 関数が処理を1行で行う場合、式を省略することで return ステートメントを省略できます。

// 警告が発生する例
const myFunction = () => {
  // 処理
};

// 警告を解決する例
const myFunction = () => 処理;

ReactJS と EcmaScript-6

この警告は、ReactJS コンポーネントや EcmaScript-6 モジュールを使用する際にも発生します。解決方法は上記と同じです。

const myFunction = () => {
  if (condition) {
    return '値1';
  } else {
    // 処理
  }
};

警告を解決する例

const myFunction = () => {
  if (condition) {
    return '値1';
  } else {
    return '値2'; // または、処理の結果を返す
  }
};

式を省略する例

const myFunction = () => condition ? '値1' : '値2';

ReactJS コンポーネントの例

import React from 'react';

const MyComponent = () => {
  if (condition) {
    return <div>値1</div>;
  } else {
    return <div>値2</div>;
  }
};

EcmaScript-6 モジュールの例

export default function myFunction() {
  if (condition) {
    return '値1';
  } else {
    return '値2';
  }
}

条件によって異なる値を返す場合、三項演算子を使用することで、簡潔にコードを記述できます。

const myFunction = () => condition ? '値1' : '値2';

デフォルト値を設定する

Arrow 関数の引数にデフォルト値を設定することで、条件分岐を省略できます。

const myFunction = (defaultValue = '値2') => {
  if (condition) {
    return '値1';
  } else {
    return defaultValue;
  }
};

null または undefined を返す

条件によって値を返さない場合は、明示的に null または undefined を返すことができます。

const myFunction = () => {
  if (condition) {
    return '値1';
  } else {
    return null; // または undefined
  }
};

forEach メソッドを使用する

配列に対して処理を行う場合は、forEach メソッドを使用することで、map メソッドによる警告を回避できます。

const numbers = [1, 2, 3];

numbers.forEach(number => {
  // 処理
});

ESLint の設定を変更する

ESLint を使用している場合は、設定を変更することで警告を非表示にすることができます。

{
  "rules": {
    "arrow-body-return": ["error", "always", {
      "except": ["ignore"]
    }]
  }
}