エラーではなく警告なので、正直、無視しても大丈夫ではありますが、ビルドのたびに表示されるのが煩わしいので修正しました。
今回は React で書かれたプロジェクトをビルドした時に ESLint の警告「Nested block is redundant no-lone-blocks」が表示される時の対処法です。
まずこちらの警告ですが、メッセージに「ネストされたブロックは冗長です」と書かれている通り、不要にネストされたブロックがあるときに発生します。
公式サイトのページがこちらです。
no-lone-blocks – Rules – ESLint – Pluggable JavaScript linter
https://eslint.org/docs/rules/no-lone-blocks
なお、このルールは「スクリプトのトップレベルまたは他のブロック内の不要で混乱を招く可能性のあるブロックを排除することを目的としています」とのことでした。
公式サイトに掲載されていた間違った書き方のサンプルコードがこちらです。
/* 間違った記述方法 */
{}
if (foo) {
bar();
{
baz();
}
}
function bar() {
{
baz();
}
}
{
function foo() {}
}
{
aLabel: {
}
}
見てわかる通り、不要な中括弧で囲まれている箇所がいくつか見受けられますね。
こちらは実行してもエラーにはなりませんが…確かに読みにくいように思います！
そして、正しい記述がこちら。
/* 正しい記述方法 */
while (foo) {
bar();
}
if (foo) {
if (bar) {
baz();
}
}
function bar() {
baz();
}
{
let x = 1;
}
{
const y = 1;
}
{
class Foo {}
}
aLabel: {
}
先程のコードよりもすっきりしましたね！
先述した通り、別に上のコードの書き方は間違っているわけではないのでエラーにはなりませんが、コードの可読性は悪くなるので、特に複数人で一つのプロジェクトを開発している場合、他の人の手間になってしまう可能性があります。
また、いつか自分が読み直した時に読むのが大変になる可能性もあるので、なるべく修正しましょう。
さて、警告メッセージの意味さえ分かってしまえば、修正自体はそう難しくないはずです。
コードにも該当の行数が書かれていますので、その周辺で何か変な書き方をしていないか確認してください。
私の場合、配列データを扱うときに .map() を使用していたのですが、個々の処理を for() で書き直したところ警告が発生しなくなりました。
.map() は実行後のデータを返り値で返してくれますが、今回行っていた処理では返り値を返す必要がなく、return を書き忘れてしまっていたため、ここで警告が発生していたようです。
…ただのうっかりミスでした。
以上、ESLint で「Nested block is redundant」警告が発生した時の対処法でした。
ご参考になれば幸いです。
