ESLint のエラー「Use object destructuring prefer-destructuring」に対応する。

• facebook

オフィス狛 技術部のKoma（Twitterアカウントの中の人＆CEO）です。

Node.js + ESLint で開発を行っていると、良く出てくるエラーが、
「Use object destructuring prefer-destructuring」です。

直訳すると、「オブジェクトの非構造化の使用」なのですが、初見だと、何をどう修正すれば良いのか分からないんですよね・・・

例えば、以下のようなプログラムがあったとします。（あくまで例なので、意味の無いプログラムになっています）

  const response = await hogeService.getUser();
  if (response.id) {
    const userId = response.id;
  } else if (response.name) {
    const userName = response.name;
  }

「hogeService.getUser()」は、DBやAPIからデータを取得するイメージです。
「hogeService.getUser()」の戻り値の中には、「{id: 1234, name: "test"}」のような構造化されたデータが入っている事が前提で、そのデータと構成を「response」に設定している、という感じです。

これでESLintのチェックに掛けると、見事に
error Use object destructuring prefer-destructuring
が出ます。

「オブジェクトの非構造化の使用」を促されているので、問題なのは構造化されている「response」だと分かります。
（正確に言うと、構造化された後の使い方ですが）

と言う事で、

  const { id, name } = await hogeService.getUser();
  if (id) {
  } else if (name) {
  }

と直す事で、ESLintのエラーが出なくなります。
「const { id, name }」とする事で、構造化から解放されていますね。

初見だと分かり難いですが、
お決まりのパターンの修正なので、慣れるのが一番ですね。


ESLint , Node.js