質問編集履歴
2
絵文字を追加
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
`<li>` の場合なら【createElement】よりも速い【+=】を使うべき [※1] だが、ではカスタム要素 `<my-li>` ではどうすべきか？
|
|
3
3
|
|
|
4
4
|
# 疑問の詳細
|
|
5
|
-
`<my-li>` も速いのは【+=】でしょうけれど、しかし文字列では HTML 生成にあたって必要な値をデータ属性で渡さねばならず、無駄なデータ属性を持つことになってしまいます。
|
|
5
|
+
`<my-li>` も `🚗速い` のは【+=】でしょうけれど、しかし文字列では HTML 生成にあたって必要な値をデータ属性で渡さねばならず、 `❌無駄なデータ属性` を持つことになってしまいます。
|
|
6
6
|
|
|
7
7
|
##### 【+=】の場合
|
|
8
|
-
例えば以下は `user.name` を `<my-li>` の中に表示するため、わざわざ `data-name` にも渡さねばならず、HTMLとしては `
|
|
8
|
+
例えば以下は `user.name` を `<my-li>` の中に表示するため、わざわざ `data-name` にも渡さねばならず、HTMLとしては `❌無駄なデータ属性` が必要になります。（しかし `🚗速い` というメリットがあります。）
|
|
9
9
|
```JavaScript
|
|
10
10
|
import htmlTemplates from "./htmlTemplates.js"
|
|
11
11
|
|
|
@@ -37,14 +37,14 @@
|
|
|
37
37
|
|
|
38
38
|
foreach (users as user) {
|
|
39
39
|
html += `
|
|
40
|
-
<my-li data-name="${user.name}"> <!--
|
|
40
|
+
<my-li data-name="${user.name}"> <!-- ❌無駄なデータ属性 -->
|
|
41
41
|
</my-li>`;
|
|
42
42
|
}
|
|
43
|
-
container.insertAdjacentHTML('beforeend', html);
|
|
43
|
+
container.insertAdjacentHTML('beforeend', html); // 🚗速い
|
|
44
44
|
```
|
|
45
45
|
|
|
46
46
|
##### 【createElement】の場合
|
|
47
|
-
こちらは `createElement()` したオブジェクトに対して `user.name` を `
|
|
47
|
+
こちらは `createElement()` したオブジェクトに対して `user.name` を `✅自然にセット` しており、その値を `userBox()` に渡すことができるので、上記【+=】のように `❌無駄なデータ属性` が不要になります。（しかし `🐢遅い` というデメリットがあります。）
|
|
48
48
|
```JavaScript
|
|
49
49
|
import htmlTemplates from "./htmlTemplates.js"
|
|
50
50
|
|
|
@@ -74,8 +74,8 @@
|
|
|
74
74
|
const container = document.createElement('ul');
|
|
75
75
|
foreach (users as user) {
|
|
76
76
|
const myLi = document.createElement('my-li');
|
|
77
|
-
myLi.name = user.name; //
|
|
77
|
+
myLi.name = user.name; // ✅自然にセット
|
|
78
|
-
container.appendChild(myLi);
|
|
78
|
+
container.appendChild(myLi); // 🐢遅い
|
|
79
79
|
}
|
|
80
80
|
```
|
|
81
81
|
|
1
コード修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -37,8 +37,7 @@
|
|
|
37
37
|
|
|
38
38
|
foreach (users as user) {
|
|
39
39
|
html += `
|
|
40
|
-
<my-li data-name="${user.name}">
|
|
40
|
+
<my-li data-name="${user.name}"> <!-- 🔴無駄なデータ属性 -->
|
|
41
|
-
${user.name} <!-- 🔴無駄なデータ属性 -->
|
|
42
41
|
</my-li>`;
|
|
43
42
|
}
|
|
44
43
|
container.insertAdjacentHTML('beforeend', html);
|