0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

非常に小さな記事ですが、よくあるケースの不具合です。

0
Last updated at Posted at 2025-12-18

はじめに

今回のテストで気が付きました。
新たにプラグインを作成して、追加したところ、不具合があり、調べてみると、わかりました。

現象

元々のリストのエレメント数は、50個でした。それまでは、その50個で処理がうまく行っていました。今回、それに新たなプラグインを追加しました。
そのプラグインでは、リストのエレメント数が4個です。そのことを十分考慮せずに、それまでと同様にリストの表示を実行しました。

しかし、それがこれまでと同様には処理しません。エラーが発生していました。

原因

デバッガで、よく調べました。
すると、おかしなことに、いつもの処理では、50件で正常に動作していたものが、それ以上のエレメント数で処理していて、そこでundefinedエラーが発生しています。

当初は、なぜなんだろうと不思議でした。もしかして、このエレメント数が、多い原因があるのでは、
と考えてみると、思いあたりました。
もしかたら、新たに追加したプラグインでもこのエレメントを使用していることが原因かとおもいました。
案の定、そうでした。同じエレメントをしようしていて、それも合わせて処理をしていたため、50個以上の合計54個までforループが進み、そこでエラーになっていました。

対処

この処理では、let elem = $("li");として、セレクターを取得していました。もともとは、このセレクターのエレメント数は50個です。その個数ではうまく処理できますが、今回のように、54個になると正しく処理ができません。そこで、新たに、

エレメントのセレクターを取得する箇所で、追加したプラグインのエレメントはここでの処理から除外するようにします。
今回は、$('body').not('.webkit')のようなnotメソッドを使用しています。これだと、youtubeプレーヤーなどで使用されている、class='webkit'属性他を除外できます。

参考までに、以下は、AIアシスタントの回答を引用したものです。
引用
javascript jquery セレクターで、除外するクラスを指定するには

AIが回答を生成中AIアシスタント
もちろんです!jQueryセレクターで特定のクラスを除外する方法ですね。いくつか便利な方法がありますよ。

🎯 :not() セレクターでクラスを除外
一番よく使われるのは、:not() 擬似クラスセレクターを使う方法です。これで、指定した条件に合致しない要素を選べます。

javascript
// 'myClass'クラスを持つ要素以外のdiv要素を選択
$('div:not(.myClass)').css('background-color', 'yellow');
これは、「div要素の中から、myClassを持たないものを選んでね」という意味になります。

⛔ not() メソッドでさらに絞り込み
すでに選択した要素の中から、特定の要素を除外したい場合は、not() メソッドが便利です。

javascript
// 全てのp要素の中から'excludeClass'クラスを持つものを除外
$('p').not('.excludeClass').css('color', 'blue');
この例では、まずすべてのp要素を選び、その中からexcludeClassというクラスがつけられたものだけを除外しています。

ここから、ヒントを得られます。

考察

除外して、実行したらうまく行きました。やはり、原因はそこにありました。

偶然のたまもので、たまたま、運よくすり抜けていた問題

プログラミングをしていると、この「たまたま」ということで、問題をすり抜けて、そのまま出荷されてしまうこともあり得ます。

後になって、重大なシステムトラブルになることもあります。

今回、ひとつそのようなケースがありました。
それは,ふたつのリストのケースです。一方のリストが先に処理を行っています。
そこで、$("li")でそのリストのセレクターを取得しています。この時は、たまたま4つのセレクターを取得できました。それは、ふたつ目のリストがまだ、表示されていなかったためです。
これがもし、すでに二つ目のリストも表示されていたら、54個のリストが取得されて、本来の処理がエラーになっていたはづです。

これは、偶然、後のリストの表示が遅れていたために、エラーが顕在化しなかったからです。しかし、この偶然を抱えたまま、出荷されていたら、おそらく、後になって問題が発生していたと思われます。

このように、たまたま、テストではうまくエラーを回避していたということがあると思います。
これは、怖いことです。

あとがき

こういう不具合は、よく起こります。うっかりが原因かと思います。
小さいことですが、重要な点です。

また、たまたま、テストでは、エラーが回避されていたという偶然の現象が起こることもあり得ます。
出荷検査は、このように大変な作業だと思います。

0
0
0

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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?