Q&A
現在どういう構文になっているか、質問本文に記載してください。
###前提
業務で比較的大規模なウェブアプリの1画面に対して簡単な改修をすることになりました。
cssのクラス名を修正すれば不具合は解消することがわかっていますが、
cssを修正するということで他にそのcssを適用している部分があれば影響が出てしまう恐れがあり、
影響範囲の洗い出しを行っています。
ただ、jsで動的に生成されるポップアップがある可能性があり、その部分に該当のクラス名が使われていた場合は開発者ツールを使った単純な検索やgrep等では洗い出しきれない可能性があります。
その画面にどれだけのポップアップが隠れているかわからないからです。
補足
自分はつい先日この現場に配属されて、ほぼ初めてWeb系の技術に触れている初心者です。
昔htmlとcssの入門書をざっとやったことがある程度で、JavaScriptに至ってはほぼ触ったことがありません。
また本質問は以下の質問から派生したものになります。（本質問だけ読んでいただければご回答いただけるようにはしているつもりです。）
https://teratail.com/questions/306667
###現状わかっていること
html上で親要素に.parentというクラス名が適用されていて、その子要素に.childというクラス名が適用されている場合、cssで「.parent .child」として定義されているクラス名がその子要素の方に適用されると思います。
ここで例えば、css上で「.parent」のみを「.hoge」に変更する修正をした場合、影響範囲として「.parent .child」を適用している要素をすべて洗い出さなければならなくなります。
このような場合、どうやって「.parent .child」が適用されている要素を検索すればいいでしょうか？（単純に「.parent .child」でgrep検索しても、html上では親要素と子要素に分かれて適用されているため、当然うまくヒットしません。）
ブラウザ上で表示されている画面のhtml上で「.parent .child」が適用されている箇所を検索するのならば、F12開発者ツールのコンソール上で「$('.parent').find('.child')」と打ち込めば調べられるようです。（他にもうまい方法があれば教えていただきたいです。）
###実現したいこと
たとえば特定の操作をした場合にjsによって表示させるポップアップなどに「.parent .child」クラスが適用されていた場合、該当のポップアップを表示しなければ開発者ツールを使った上記方法ではヒットしない場合があるようです。
jsによって生成されるhtml上で、「.parent .child」クラスが適用されている要素をできるだけ漏れなく洗い出す方法を教えてください。
補足
知りたいのはあくまで**「影響範囲の洗い出し」**の方法である点を強調しておきます。
ちなみに、影響範囲の洗い出しは、改修の対応によって他の部分に不具合が生じないことをお客様に説明する目的もあります。
また、説明資料に記載できる明快な方法（改修担当者の勘や経験に頼らず誰が見てもわかる確実な方法）を求めています。
###サンプルソース
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="./style.css"> 6 </head> 7 <body> 8 <!-- 修正したい部分(本来は適用したくないクラスが適用されている)--> 9 <span class="parent"> 10 <span class="child">Hello</span> 11 </span> 12 13 <!-- 影響を与えたくない部分 （ポップアップなどを展開すれば他にもあるかもしれない)--> 14 <span class="parent hoge"> 15 <span class="child">World</span> 16 </span> 17 </body> 18</html>
css
1.parent .child{color:red;} 2/* .parentという名称だと”Hello”の部分にも適用されてしまうため、以下のように変更する対応をする。 3.hoge .child{color:red;} 4なお、影響箇所が未知のため、上記は暫定的な改修案として記載しています。 5たとえばHTMLの他の要素に「.parent .child」が適用されており、かつその親要素に「.hoge」の適用がなければこの修正方法は不適切となる可能性があります。*/
業務で見ているソースを記載することはできませんが、必要な部分だけサンプルソースとして作成し記載しました。(JavaScriptについてはまだ勉強中のためどうやってポップアップ等表示しているのかわからず、申し訳ありませんが記載できませんでした。)
よろしくお願いします。
ん？
影響を与えたい要素と、
与えたくない要素の構造が全く同じですが、
上下で何が違うのでしょうか？
すみません、修正しました。
> ここで例えば、css上で「.parent」のみを「.hoge」に変更する修正をした場合
HTMLソース上では
「.parent」のみを「parent hoge」に変更する修正をした場合
になっていて、質問文との整合性がとれません。
> <!-- 影響を与えたくない部分 （ポップアップなどを展開すれば他にもあるかもしれない)-->
> <span class="parent hoge">
HTMLソースだけ見るなら、:not() で否定すれば良いと思います。
htmlソースには手を加えず、cssのクラス名を「.hoge .child」に変更する修正を意図していますが、間違っているでしょうか？
その修正によって
<!-- 修正したい部分(本来は適用したくないクラスが適用されている)-->
には文字色の変更を適用しないようになります。
つまり、
<!-- 影響を与えたくない部分 （ポップアップなどを展開すれば他にもあるかもしれない)-->
<span class="parent ...">
<span class="child">World</span>
</span>
の ... を、動的生成される要素についてまで網羅して列挙したい、ということですか？
... が実際には何であるか不明なので、:not() では対応できない、ということでしょうか。
また、「影響を与えたくない部分」のクラス指定が "parent ..." のように複数クラスであることは確定ですか？ "parent" 単独である可能性もありますか？
> の ... を、動的生成される要素についてまで網羅して列挙したい、ということですか？
...に当たる部分を列挙したいわけではないです。
あくまで親要素に.parentが適用されていて、子要素に.childが適用されている部分（＝質問に記載したCSSのクラス名の修正によって影響が及びうる箇所）の洗い出しがしたいというだけです。
> "parent" 単独である可能性もありますか？
影響範囲は未知なので、"parent" 単独である可能性もあると考えられます。
また、お二方がおっしゃっている:not()を使用する対応が何を解決することを目指したものなのか、申し訳ありませんがよくわかっていません。※恥ずかしながら:not()というcssの機能？を初めて知り、調べましたが、これを影響範囲の洗い出しにどのように使用すればいいのか想像できませんでした。
あくまで「影響範囲の洗い出し」の方法を質問している、という点は伝わっているでしょうか？
ちなみに、影響範囲の洗い出しは、改修の対応によって他の部分に不具合が生じないことをお客様に説明する目的もあります。
また、説明資料に記載できる明快な方法（勘や経験に頼らない誰が見てもわかる確実な方法）を求めています。（質問文に追記しておきます。）
つまり、
.hoge .child{color:red;}
で修正しようというのは、あくまで願望というか仮定の話なのですね。理解しました。
そうですね、影響範囲を洗い出した結果、その方法では他の部分に不具合が生じるという可能性もあります。
既知の部分に影響を与えず不具合を治す方法の例として書きました。わかりにくく申し訳ないです。
サンプルコードに補足しておきました。ありがとうございます。
補足ありがとうございました。
これについて、網羅性の高い検証方法はないと思います。
通常のテストを行うより他にはないのではないかと感じました。
Lhankor_Mhyさん
それがわかっただけでも助かりました。
画面系のプログラムの（特にCSSの修正の？）影響範囲調査は難しいんですね。
ありがとうございました。
回答3件
0
ベストアンサー
その画面にどれだけのポップアップが隠れているかわからないからです。
そのポップアップを表示するためのスクリプトがあって、そのスクリプトが html 要素に付与される class 属性の設定を行っているなら、問題の CSS のクラス名はスクリプトにハードコーディングされているのではないですか？
であれば、前のスレッド https://teratail.com/questions/306667 で書いたように、parent と child がどこに埋め込まれているはずなので、それらを探して、スクリプトを読んで影響を判断するぐらいしか現実的な方法はないと思われます。
JavaScriptに至ってはほぼ触ったことがありません。
ということですので、スクリプトを読んで影響を判断というのが難しいかもしれませんが。
でも、ユーザーの操作によって html 要素に付与される class 属性の設定を切り替えるというようなスクリプトがある場合は地道にコードを読むしか適当な手はなさそうに思います。
（前のスレッドの私の回答の 2 枚目の画像を見てください。ユーザー入力の検証結果によって css を切り替えています。そういうのもあるかも）
投稿2020/11/30 05:52
退会済みユーザー
総合スコア0
こちらの質問にもご回答いただきありがとうございます。
やはり、機械的に調べる方法はなさそうですか。
それがわかっただけでも助かりました。
0
jsによって生成されるhtml上の「.parent .child」要素をできるだけ漏れなく洗い出す方法を教えてください。
であるならば、
JSで生成する際、
生成した要素にのみ、ターゲット用として、
全く別のクラスを当て、
（例えば、.target）そのクラスをもって、
grep検索かければできるかと思います。
投稿2020/11/30 04:00
総合スコア9528
たしかにそれができれば解決できそうですね。
初歩的なことで申し訳ありませんが、2点質問させてください。
・生成した要素にのみクラスを当てるというのは、どのような方法でできるでしょうか？
・その方法だと、未表示のポップアップも検知できますか？
> 生成した要素にのみクラスを当てるというのは、どのような方法でできるでしょうか？
要素を生成した時点で、その要素変数にaddClass（jQuery）なり、classList.addで追加すればいいです。
> その方法だと、未表示のポップアップも検知できますか？
？
未表示だろうがなんだろうが、DOMに追加さえされていれば、取得できますが。
失礼ながらJavaScriptの文法等わかっていない状態でコメントするので、意味がわからなければ無視してください。
> 要素を生成した時点で、その要素変数にaddClass（jQuery）なり、classList.addで追加すればいいです。
どこで目的の要素が生成されるかわからないため、jsが生成しうるすべての要素に.targetクラスを適用するという理解であっているでしょうか。
> DOMに追加さえされていれば、取得できますが。
逆に言うと、DOMに追加されていない場合は検知できないということでしょうか。
未表示の場合、DOMに組み込まれていない（特定の操作をしたときにDOMに追加され、表示される）ポップアップもあるのではないかと思うのですが、それらの要素を検知するには地道にjsファイルの処理を追って、該当の画面でどのようなポップアップがどのような操作によっていくつ表示されるかを地道に確認していくしかないでしょうか。
あぁ・・・・、なるほど。
つまり、元のDOMを生成するスクリプトは、質問者さんが作ったものではないのですね。
そこらへん書かないとわかりません。
回答者のみなさん、質問者さんが書いたスクリプトなのに、なんでわからんの？
ってなってますよ。
おそらくですが、DOMを生成し、HTMLに入れた際にコールバックが用意されているはずなので、
そのコールバック時に、DOM取得を走らせれば、確実に捕捉できると思います。
コールバックが用意されてなければ、自分でコールバックを追加するしかないですね。
あとは、document自体を監視し、DOMツリーに変化があった時点で、DOM取得するようにする、とか・・・。
（それはやれますがかなりめんどうです）
影響範囲の調査という旨の質問なので、調査対象が他人の書いたコードだということは自明かと思いました。Web業界ではだれが書いたかわからないコードの改修をするということが少ないんですかね。
(そもそも影響範囲の調査という作業がそれほど一般的ではないのかな..？と感じました)
わかりにくくてすみません。
ご記載の内容は難しくて現段階ではわからないので、勉強が進んだら試してみます。
ご回答ありがとうございました。
なるほど、質問の修正で明らかになっていったので、
私が回答した時点ではその前提などは明確になっていなかったかと。
私も、回答した時点での状態での認識だったので、それは申し訳なかったです。
> 影響範囲の調査という旨の質問なので、調査対象が他人の書いたコードだということは自明かと思いました。Web業界ではだれが書いたかわからないコードの改修をするということが少ないんですかね。
分かる訳ないですよ。他人ですから。
まあ例外として、例えば質問者がteratailの上位回答者のように『出来る人』という暗黙の前提条件でもあれば別ですけどね。
そうでなければ残念ながら『出来る人』ではないという想定で回答されることがほとんどかと。
>miyabi_takatsukさん
質問文にいろいろ手を加えたので初めの方は明示できていなかったかもしれません。
私の方こそ、把握できていなくてすみません。
>hentaimanさん
全く無関係なあなたが何を目的に横槍を入れてきたのかわからないです。
通報しておきました。
> 全く無関係なあなたが何を目的に横槍を入れてきたのかわからないです。
丁寧なコメント・回答を貰っておきながら唐突に非常に失礼なコメントをしたと感じた為、あなたが他者にそれを自明だと受け取らせる事が出来るほど出来る側では全く以てないという事を唐突にコメントしただけです。
また、業務に関わる事でありながら問題点をコアな部分まで詰めた訳でもない状態から無料QAで済まそうという神経は非常識です。顧客に対しても非常に失礼です。
0
質問の意図がわかりかねますが
.parentのみを変更する修正をした
document.querySelectorAll('.parent')で十分ですから
.childは関係ないですよね？
document.querySelectorAll('.parent .child')で
上位にparentクラスを持つ.childは拾えますが
.childを子孫にもつ.parentを探すのはちょっと工夫が必要です
投稿2020/11/30 03:22
総合スコア114769
初歩的な質問で申し訳ありませんが、document.querySelectorAll('.parent .child')というのは開発者ツールに打ち込めばいいのでしょうか？
やってみたところポップアップに表示される要素は拾えなかったのですが、なぜでしょうか。
必要な情報があれば調べます。
.childを持つ.parentをすべて可視化したいならこうしてみては？
<style>
.target{
background-Color:yellow;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
document.querySelectorAll('.parent .child').forEach(x=>{
x.closest('.parent').classList.add('target');
});
});
</script>
<div class="parent">
<div class="child">Hello</div>
</div>
<div class="parent">
<div class="child">World</div>
</div>
<div class="parent">
<div>no child</div>
</div>
<div>
<div class="child">no parent</div>
</div>
ちょっと時間かかるかもしれませんが、やってみます。ありがとうございます。
あなたの回答
tips
プレビュー
