質問編集履歴
8
誤字修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -116,6 +116,6 @@
|
|
|
116
116
|
|
|
117
117
|
なお、影響箇所が未知のため、上記は暫定的な改修案として記載しています。
|
|
118
118
|
|
|
119
|
-
たとえばHTMLの他の要素に「.
|
|
119
|
+
たとえばHTMLの他の要素に「.parent .child」が適用されており、かつその親要素に「.hoge」の適用がなければこの修正方法は不適切となる可能性があります。*/
|
|
120
120
|
|
|
121
121
|
```
|
7
ソースコードに補足
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -112,6 +112,10 @@
|
|
|
112
112
|
|
|
113
113
|
/* .parentという名称だと”Hello”の部分にも適用されてしまうため、以下のように変更する対応をする。
|
|
114
114
|
|
|
115
|
-
.hoge .child{color:red;}
|
|
115
|
+
.hoge .child{color:red;}
|
|
116
|
+
|
|
117
|
+
なお、影響箇所が未知のため、上記は暫定的な改修案として記載しています。
|
|
118
|
+
|
|
119
|
+
たとえばHTMLの他の要素に「.hoge .child」が適用されており、かつその親要素に「.hoge」の適用がなければこの修正方法は不適切となる可能性があります。*/
|
|
116
120
|
|
|
117
121
|
```
|
6
脱字を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
たとえば特定の操作をした場合にjsによって表示させるポップアップなどに「.parent .child」クラスが適用されていた場合、該当のポップアップを表示しなければ開発者ツールを使った上記方法ではヒットしない場合があるようです。
|
|
48
48
|
|
|
49
|
-
jsによって生成されるhtml上
|
|
49
|
+
jsによって生成されるhtml上で、「.parent .child」クラスが適用されている要素をできるだけ漏れなく洗い出す方法を教えてください。
|
|
50
50
|
|
|
51
51
|
|
|
52
52
|
|
5
補足を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -47,6 +47,16 @@
|
|
|
47
47
|
たとえば特定の操作をした場合にjsによって表示させるポップアップなどに「.parent .child」クラスが適用されていた場合、該当のポップアップを表示しなければ開発者ツールを使った上記方法ではヒットしない場合があるようです。
|
|
48
48
|
|
|
49
49
|
jsによって生成されるhtml上の「.parent .child」要素をできるだけ漏れなく洗い出す方法を教えてください。
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
**補足**
|
|
54
|
+
|
|
55
|
+
知りたいのはあくまで**「影響範囲の洗い出し」**の方法である点を強調しておきます。
|
|
56
|
+
|
|
57
|
+
ちなみに、影響範囲の洗い出しは、改修の対応によって他の部分に不具合が生じないことをお客様に説明する目的もあります。
|
|
58
|
+
|
|
59
|
+
また、説明資料に記載できる明快な方法（改修担当者の勘や経験に頼らず誰が見てもわかる確実な方法）を求めています。
|
|
50
60
|
|
|
51
61
|
|
|
52
62
|
|
4
前提を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
###前提
|
|
2
|
+
|
|
3
|
+
業務で比較的大規模なウェブアプリの1画面に対して簡単な改修をすることになりました。
|
|
4
|
+
|
|
5
|
+
cssのクラス名を修正すれば不具合は解消することがわかっていますが、
|
|
6
|
+
|
|
7
|
+
cssを修正するということで他にそのcssを適用している部分があれば影響が出てしまう恐れがあり、
|
|
8
|
+
|
|
9
|
+
影響範囲の洗い出しを行っています。
|
|
10
|
+
|
|
11
|
+
ただ、jsで動的に生成されるポップアップがある可能性があり、その部分に該当のクラス名が使われていた場合は開発者ツールを使った単純な検索やgrep等では洗い出しきれない可能性があります。
|
|
12
|
+
|
|
13
|
+
その画面にどれだけのポップアップが隠れているかわからないからです。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
**補足**
|
|
18
|
+
|
|
19
|
+
自分はつい先日この現場に配属されて、ほぼ初めてWeb系の技術に触れている初心者です。
|
|
20
|
+
|
|
21
|
+
昔htmlとcssの入門書をざっとやったことがある程度で、JavaScriptに至ってはほぼ触ったことがありません。
|
|
22
|
+
|
|
23
|
+
また本質問は以下の質問から派生したものになります。（本質問だけ読んでいただければご回答いただけるようにはしているつもりです。）
|
|
24
|
+
|
|
25
|
+
https://teratail.com/questions/306667
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
1
29
|
###現状わかっていること
|
|
2
30
|
|
|
3
31
|
|
3
サンプルソースを修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
|
|
43
43
|
<body>
|
|
44
44
|
|
|
45
|
-
<!-- 修正したい部分
|
|
45
|
+
<!-- 修正したい部分(本来は適用したくないクラスが適用されている)-->
|
|
46
46
|
|
|
47
47
|
<span class="parent">
|
|
48
48
|
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
|
|
55
55
|
<!-- 影響を与えたくない部分 （ポップアップなどを展開すれば他にもあるかもしれない)-->
|
|
56
56
|
|
|
57
|
-
<span class="parent">
|
|
57
|
+
<span class="parent hoge">
|
|
58
58
|
|
|
59
59
|
<span class="child">World</span>
|
|
60
60
|
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
|
|
73
73
|
.parent .child{color:red;}
|
|
74
74
|
|
|
75
|
-
/* .parentという名称
|
|
75
|
+
/* .parentという名称だと”Hello”の部分にも適用されてしまうため、以下のように変更する対応をする。
|
|
76
76
|
|
|
77
77
|
.hoge .child{color:red;} */
|
|
78
78
|
|
2
サンプルソースを修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
|
|
53
53
|
|
|
54
54
|
|
|
55
|
-
<!-- 影響を与えたくない部分
|
|
55
|
+
<!-- 影響を与えたくない部分 （ポップアップなどを展開すれば他にもあるかもしれない)-->
|
|
56
56
|
|
|
57
57
|
<span class="parent">
|
|
58
58
|
|
1
サンプルソースを追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
html上で親要素に.parentというクラス名が適用されていて、その子要素に.childというクラス名が適用されている場合、cssで「.parent .child」として定義されているクラス名がその子要素の方に適用されると思います。
|
|
6
6
|
|
|
7
|
-
ここで例えば、.parentのみを変更する修正をした場合、影響範囲として「.parent .child」を適用している要素をすべて洗い出さなければならなくなります。
|
|
7
|
+
ここで例えば、css上で「.parent」のみを「.hoge」に変更する修正をした場合、影響範囲として「.parent .child」を適用している要素をすべて洗い出さなければならなくなります。
|
|
8
8
|
|
|
9
9
|
このような場合、どうやって「.parent .child」が適用されている要素を検索すればいいでしょうか？（単純に「.parent .child」でgrep検索しても、html上では親要素と子要素に分かれて適用されているため、当然うまくヒットしません。）
|
|
10
10
|
|
|
@@ -19,3 +19,61 @@
|
|
|
19
19
|
たとえば特定の操作をした場合にjsによって表示させるポップアップなどに「.parent .child」クラスが適用されていた場合、該当のポップアップを表示しなければ開発者ツールを使った上記方法ではヒットしない場合があるようです。
|
|
20
20
|
|
|
21
21
|
jsによって生成されるhtml上の「.parent .child」要素をできるだけ漏れなく洗い出す方法を教えてください。
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
###サンプルソース
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
```html
|
|
30
|
+
|
|
31
|
+
<!DOCTYPE html>
|
|
32
|
+
|
|
33
|
+
<html>
|
|
34
|
+
|
|
35
|
+
<head>
|
|
36
|
+
|
|
37
|
+
<meta charset="utf-8">
|
|
38
|
+
|
|
39
|
+
<link rel="stylesheet" href="./style.css">
|
|
40
|
+
|
|
41
|
+
</head>
|
|
42
|
+
|
|
43
|
+
<body>
|
|
44
|
+
|
|
45
|
+
<!-- 修正したい部分 -->
|
|
46
|
+
|
|
47
|
+
<span class="parent">
|
|
48
|
+
|
|
49
|
+
<span class="child">Hello</span>
|
|
50
|
+
|
|
51
|
+
</span>
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
<!-- 影響を与えたくない部分 (他にもあるかもしれない)-->
|
|
56
|
+
|
|
57
|
+
<span class="parent">
|
|
58
|
+
|
|
59
|
+
<span class="child">World</span>
|
|
60
|
+
|
|
61
|
+
</span>
|
|
62
|
+
|
|
63
|
+
</body>
|
|
64
|
+
|
|
65
|
+
</html>
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
```css
|
|
72
|
+
|
|
73
|
+
.parent .child{color:red;}
|
|
74
|
+
|
|
75
|
+
/* .parentという名称が不適切だったため、以下のように変更する対応をする。
|
|
76
|
+
|
|
77
|
+
.hoge .child{color:red;} */
|
|
78
|
+
|
|
79
|
+
```
|