【エラー解決方法】Nuxt.js で「error ” is never reassigned. Use ‘const’ instead prefer-const」が発生したときの対処法

こんにちは、樋口です。
 
今回は、Nuxt.jsのeslint機能によって出力されるエラーの解決策を記載いたします。
※ 今回は「npm」コマンドを使用して説明を行います。

ソースコード

今回のエラーが発生するコードは下記ソースとなります。

<template>
<div class="samaple__conntents">
<div style="margin-top: 20px;">
<h1>Font awesome</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
computed: {
test() {
let testParam = 100
return testParam
},
},
}
</script>
<template> <div class="samaple__conntents"> <div style="margin-top: 20px;"> <h1>Font awesome</h1> </div> </div> </template> <script> export default { data() { return { count: 0, } }, computed: { test() { let testParam = 100 return testParam }, }, } </script>
<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>Font awesome</h1>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  computed: {
    test() {
      let testParam = 100
      return testParam
    },
  },
}
</script>

エラー内容(error ‘testParam’ is never reassigned. Use ‘const’ instead prefer-const)

ソースを実行した際に下記エラーが発生します。

error ‘testParam’ is never reassigned. Use ‘const’ instead prefer-const

エラー発生時の環境

エラー発生時の環境は、下記の通りです。

Vue.js
2.6.11
Nuxt.js
2.12.2

エラー解決方法

今回のエラーの原因は、値の変更がない変数を「let」で宣言しているので「const」に変更しろというエラーとなります。ソースを下記内容に修正することによりエラーがなくなります。

<template>
<div class="samaple__conntents">
<div style="margin-top: 20px;">
<h1>Font awesome</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
computed: {
test() {
let testParam = 100 ← 変数宣言をletから、constに変更します
return testParam
},
},
}
</script>
<template> <div class="samaple__conntents"> <div style="margin-top: 20px;"> <h1>Font awesome</h1> </div> </div> </template> <script> export default { data() { return { count: 0, } }, computed: { test() { let testParam = 100 ← 変数宣言をletから、constに変更します return testParam }, }, } </script>
<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>Font awesome</h1>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  computed: {
    test() {
      let testParam = 100  ← 変数宣言をletから、constに変更します
      return testParam
    },
  },
}
</script>

修正後ソース
<template>
<div class="samaple__conntents">
<div style="margin-top: 20px;">
<h1>Font awesome</h1>
</div>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
}
},
computed: {
test() {
const testParam = 100
return testParam
},
},
}
</script>
<template> <div class="samaple__conntents"> <div style="margin-top: 20px;"> <h1>Font awesome</h1> </div> </div> </template> <script> export default { data() { return { count: 0, } }, computed: { test() { const testParam = 100 return testParam }, }, } </script>
<template>
  <div class="samaple__conntents">
    <div style="margin-top: 20px;">
      <h1>Font awesome</h1>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0,
    }
  },
  computed: {
    test() {
      const testParam = 100
      return testParam
    },
  },
}
</script>

 
これで無事、解決です。
 
 
 
 
《関連記事》

記事をシェア
MOST VIEWED ARTICLES