回答編集履歴
2
「変数名の末尾にsを付ける命名規則の是非」「new 演算子で生成されるオブジェクトの変数名」を追記
test
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
### 変数名
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
配列(`[]`)に変更して、
|
|
2
6
|
|
|
3
7
|
|
|
@@ -22,6 +26,10 @@
|
|
|
22
26
|
|
|
23
27
|
|
|
24
28
|
|
|
29
|
+
### 配列風の名前
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
25
33
|
> 配列風に語尾にsを付けています。
|
|
26
34
|
|
|
27
35
|
|
|
@@ -46,4 +54,186 @@
|
|
|
46
54
|
|
|
47
55
|
|
|
48
56
|
|
|
57
|
+
### 変数名の末尾にsを付ける命名規則の是非
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
変数名の末尾に `s` を付ける事で複数形である事を示せますが、実際のところ、複数形の中にも**種類**があります。
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
|
|
65
|
+
```JavaScript
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
|
|
69
|
+
* 末尾に s を付ける(複数形)
|
|
70
|
+
|
|
71
|
+
*/
|
|
72
|
+
|
|
73
|
+
var items = [{barcode: 1, name: "name_1"}, {barcode: 2, name: "name_2"}, {barcode: 3, name: "name_3"}];
|
|
74
|
+
|
|
75
|
+
var items = new Map([[1,{barcode: 1, name: "name_1"}], [2,{barcode: 2, name: "name_2"}], [3,{barcode: 3, name: "name_3"}]]);
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
/**
|
|
80
|
+
|
|
81
|
+
* 末尾にユニークな名前を付ける
|
|
82
|
+
|
|
83
|
+
*/
|
|
84
|
+
|
|
85
|
+
var itemList = [{barcode: 1, name: "name_1"}, {barcode: 2, name: "name_2"}, {barcode: 3, name: "name_3"}];
|
|
86
|
+
|
|
87
|
+
var itemMap = new Map([[1,{barcode: 1, name: "name_1"}], [2,{barcode: 2, name: "name_2"}], [3,{barcode: 3, name: "name_3"}]]);
|
|
88
|
+
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
93
|
+
前者は配列と `new Map` を区別できませんが、後者は区別できます。
|
|
94
|
+
|
|
95
|
+
「末尾に `s` を付ける命名規則」が通用するのは、次のどちらかのルールが課せられている為です。
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
- 複数形が一種類しか存在しない
|
|
100
|
+
|
|
101
|
+
- 複数形は配列であるとコーダが**決め打ち**している(この場合、`new Map` は `itemMap` のように命名して区別する)
|
|
102
|
+
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
前者はコードリーディングする人がオブジェクト初期化部分のコードまで追いかけないと、変数の中身を確認できない事を意味します。
|
|
106
|
+
|
|
107
|
+
後者はコーダが勝手に「複数形は配列」と決め打ちしていますが、コードリーディングする人がそのルールとは限りません。
|
|
108
|
+
|
|
109
|
+
複数形である以上、配列以外のオブジェクトにも `s` を付ける可能性があります。
|
|
110
|
+
|
|
111
|
+
例えば、DOMノードを使ったコードでも `s` を使った命名規則を見かける事があります。
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
```JavaScript
|
|
116
|
+
|
|
117
|
+
var imgs = document.getElementsByTagName('img');
|
|
118
|
+
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
一見、このコードは問題ないように見えますが、変数 `imgs` に格納されるのは `HTMLCollection` です。
|
|
124
|
+
|
|
125
|
+
DOMの複数形には `NodeList` があり、「`querySelectorAll()` で参照した変数(NodeList)」と「`getElementsByTagName` で参照した変数(HTMLCollection)」を区別できない、という問題があります。
|
|
126
|
+
|
|
127
|
+
両者を区別するには、次のように書きます。
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
```JavaScript
|
|
132
|
+
|
|
133
|
+
var imgCollection = document.getElementsByTagName('img'); // HTMLCollection
|
|
134
|
+
|
|
135
|
+
var imgList = document.querySelectorAll('img'); // NodeList
|
|
136
|
+
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
`HTMLCollection` は **live** ですが、`NodeList` は **live** ではない、という性質の違いもあり、名前を区別する事で性質の違いも明確となります。
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
ところで、DOM Interface には `Node` がありますが、複数形は `Nodes` ではなく、`NodeList` もしくは `HTMLCollection` である点に気が付いたでしょうか。
|
|
146
|
+
|
|
147
|
+
`Nodes` と命名すると、「Node の複数形」が一つで決め打ちされてしまう為、ユニークな単語を末尾に着ける事で両者を区別しています。
|
|
148
|
+
|
|
149
|
+
英語でも Interface 名、コンストラクタ名などには末尾に `s` を付ける文化はないように感じています。
|
|
150
|
+
|
|
151
|
+
少なくとも、私が今までに DOM の仕様書を読んだ中では、末尾に `s` を付けた Interface 名を見ていません。
|
|
152
|
+
|
|
153
|
+
これは後から複数形の種類が拡張されて増える可能性を踏まえて、ユニークな名前を付ける配慮があるのだと思います。
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
|
|
157
|
+
DOM 上で「単語の末尾に `s` を持つプロパティ/メソッド」には次のものがあります。
|
|
158
|
+
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
- getElement**s**ByTagName (HTMLCollection を返す)
|
|
162
|
+
|
|
163
|
+
- Node#childNode**s** (HTMLCollection を返す)
|
|
164
|
+
|
|
165
|
+
- HTMLFormElement#element**s** (HTMLFormControlsCollection を返す)
|
|
166
|
+
|
|
167
|
+
|
|
168
|
+
|
|
169
|
+
これもいろいろと「決め打ち」しているからできる事です。
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
- 同様の「他の複数形式(NodeList等)で返す」機能が存在しない
|
|
174
|
+
|
|
175
|
+
- 返り値を決め打ちしている
|
|
176
|
+
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
コーダは名前からではなく、仕様書から各APIが持つ返り値を確認する必要があります。
|
|
180
|
+
|
|
181
|
+
|
|
182
|
+
|
|
183
|
+
### new 演算子で生成されるオブジェクトの変数名
|
|
184
|
+
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
原則としてコンストラクタから生成されるオブジェクトはコンストラクタ名を反映したものであるべき、と考えています。
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
|
|
191
|
+
```JavaScript
|
|
192
|
+
|
|
193
|
+
var object = new Object;
|
|
194
|
+
|
|
49
|
-
|
|
195
|
+
var array = new Array;
|
|
196
|
+
|
|
197
|
+
var map = new Map;
|
|
198
|
+
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
|
|
202
|
+
|
|
203
|
+
ただし、`new Object`, `new Array` だけは例外で、この2つは利用用途が広範で要素の中身が重要な為、コンストラクタ名だけでは「内容を表す名前」として不十分であり、要素に準じた名前を付けるようにしています。
|
|
204
|
+
|
|
205
|
+
また、DOMの要素ノード系も省略形を使う事が多いですね。
|
|
206
|
+
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
```JavaScript
|
|
210
|
+
|
|
211
|
+
/**
|
|
212
|
+
|
|
213
|
+
* 厳密系 (Interface HTMLParagraphElement)
|
|
214
|
+
|
|
215
|
+
*/
|
|
216
|
+
|
|
217
|
+
var htmlParagraphElement = document.createElement('p');
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
/**
|
|
222
|
+
|
|
223
|
+
* 省略系 (tagName)
|
|
224
|
+
|
|
225
|
+
*/
|
|
226
|
+
|
|
227
|
+
var p = document.createElement('p');
|
|
228
|
+
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
DOMの Interface 名を基にするなら、`HTMLParagraphElement` に準じた名前にすべきですが、名前が長すぎるので `tagName` 準拠の名前にしています。
|
|
234
|
+
|
|
235
|
+
|
|
236
|
+
|
|
237
|
+
### 更新履歴
|
|
238
|
+
|
|
239
|
+
- 2017/11/19 13:11 「変数名の末尾にsを付ける命名規則の是非」「new 演算子で生成されるオブジェクトの変数名」を追記
|
1
補足
test
CHANGED
|
@@ -22,4 +22,28 @@
|
|
|
22
22
|
|
|
23
23
|
|
|
24
24
|
|
|
25
|
+
> 配列風に語尾にsを付けています。
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
私は「末尾に `s` を付ける名前」を避けるようにしています。
|
|
30
|
+
|
|
31
|
+
理由は「**item と items を一目で見分けられないから**」です。
|
|
32
|
+
|
|
33
|
+
`item` と `itemList` なら違いが明確になります。
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
> ただ、名前的に配列と見分けがつかないので、悩んでおります。
|
|
38
|
+
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
個人的には配列のように見えるので、配列を使いたくなります。
|
|
42
|
+
|
|
43
|
+
バーコードはオブジェクト内に含まれており、バーコードをキーにする理由が明確でない為です。
|
|
44
|
+
|
|
45
|
+
バーコードをキーにする方が都合が良いのであれば、`new Map` を選択します。
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
25
49
|
Re: fjaiofjawiefjaw さん
|