回答編集履歴
4
テキスト修正
answer
CHANGED
|
@@ -258,7 +258,7 @@
|
|
|
258
258
|
|
|
259
259
|
のような感じで、クラス名を命名するときに、 ハイフンとアンダーバーを異なる意味で使用したり、2個連続したりします。ですので、BEMの文法として使うハイフンやアンダーバーと被らないようにするのであれば、`users-list` や `users_list` ではなく、上記３パターンのうちの 1.を使った `usersList` がよい、と言えるかもしれません。
|
|
260
260
|
|
|
261
|
-
BEM
|
|
261
|
+
BEM以外のCSS設計論として [ECSS](https://ecss.io/) というCSS設計の体系もありますが、これもハイフンやアンダーバーをその設計論による文法の一部として使います。クラス名を`users-list` や `users_list` とした場合、これらに含まれるハイフンやアンダーバーが、BEM や ECSS の文法の一部としてのハイフンやアンダーバーとしてよいのかは、CSSクラスの設計上で、`users` という識別子が、どのような対象、あるいはどこまでの範囲を示すものとするのか、によります。これらを検討するには、BEMやECSSがどのようなものかを知る必要があります。
|
|
262
262
|
|
|
263
263
|
ただし、上記はBEMやECSSのようなCSS設計手法を取り入れることが見えているのであれば検討すべきことですが、そのような予定はない、または、あるとしてもまだ先の話であれば、先の [stackoverflow の回答](https://stackoverflow.com/a/6028289) と同様に
|
|
264
264
|
|
3
テキスト修正
answer
CHANGED
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
|
|
60
60
|
|
|
61
61
|
|
|
62
|
-
### 補足
|
|
62
|
+
### 補足1
|
|
63
63
|
|
|
64
64
|
ご質問に若葉マークがありましたので、老婆心によるおせっかいから、一点補足します。
|
|
65
65
|
|
|
@@ -74,4 +74,212 @@
|
|
|
74
74
|
- `usersContainer` ではなく、`container`は複数形にして、 `usersContainers` にすること
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
といったように、変数名を単数形にすべきか複数形にすべきかについて、今のうちからこだわる習慣をつけておくと、後々、何かとよろしいかと思います。
|
|
77
|
+
といったように、変数名を単数形にすべきか複数形にすべきかについて、今のうちからこだわる習慣をつけておくと、後々、何かとよろしいかと思います。
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
### 補足2
|
|
82
|
+
|
|
83
|
+
コメントから頂きました、
|
|
84
|
+
|
|
85
|
+
> CSSクラス名のところですが
|
|
86
|
+
> 「.users-list」と「$usersLists」でなく、
|
|
87
|
+
> 「.users_list」と「$users_lists」というのは…ナシでしょうか。
|
|
88
|
+
|
|
89
|
+
とのご質問に、以下にて回答します。
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
#### 1. JavaScriptの変数名について
|
|
93
|
+
|
|
94
|
+
まず、JavaScript のほうの変数名を `$usersLists` ではなく `$users_lists` とすることについて
|
|
95
|
+
|
|
96
|
+
> ナシでしょうか。
|
|
97
|
+
|
|
98
|
+
に回答します。質問の捉え方によって回答も若干変わってきますが、まず、ひとつの捉え方として、今回の質問に挙げられているコードの範囲に限らず、
|
|
99
|
+
|
|
100
|
+
- 今から、スネークケース(users_lists)とキャメルケース(usersLists)とで、どちらかに慣れていくとしたら、どちらがいいか？
|
|
101
|
+
|
|
102
|
+
というご質問と捉えると、迷わずキャメルケース(usersLists)のほうをお勧めします。以下に、JavaScript ではキャメルケースのほうが慣例になっている事例を２つ挙げておきます。
|
|
103
|
+
|
|
104
|
+
##### 1.1 Google の JavaScriptスタイルガイド
|
|
105
|
+
|
|
106
|
+
Google の JavaScriptスタイルガイドというドキュメントがあります。
|
|
107
|
+
|
|
108
|
+
- [Google JavaScript Style Guide](https://google.github.io/styleguide/jsguide.html)
|
|
109
|
+
|
|
110
|
+
このドキュメントの目的は、1. Introduction の冒頭に
|
|
111
|
+
|
|
112
|
+
> This document serves as the complete definition of Google’s coding standards for source code in the JavaScript programming language.
|
|
113
|
+
|
|
114
|
+
と書かれています。つまり、グーグルにおけるJavaScriptでプログラムを書くときのお作法、といった内容です。このドキュメントの
|
|
115
|
+
|
|
116
|
+
[6 Naming](https://google.github.io/styleguide/jsguide.html#naming)
|
|
117
|
+
|
|
118
|
+
の章に、変数やメソッド名などの識別子についての名前の付け方のルールが記載されており、6.2.1 Package names
|
|
119
|
+
から 6.2.10 Module-local names までの間で、コードを書いているときに多く使う識別子である、
|
|
120
|
+
|
|
121
|
+
- 6.2.3 Method names
|
|
122
|
+
|
|
123
|
+
- 6.2.7 Parameter names
|
|
124
|
+
|
|
125
|
+
- 6.2.8 Local variable names
|
|
126
|
+
|
|
127
|
+
は、`lowerCamelCase` (先頭小文字のキャメル）を使うように記載されており、
|
|
128
|
+
|
|
129
|
+
- 6.2.2 Class names
|
|
130
|
+
|
|
131
|
+
は、`UpperCamelCase` (先頭大文字のキャメル）を使うことが記載されています。
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
##### 1.2 ESLint のルール
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
JavaScript のコードの、文法的な誤りではなく、書き方の問題を指摘してくれる ESLint というツールがあります。
|
|
140
|
+
|
|
141
|
+
- [ESLint](https://eslint.org/)
|
|
142
|
+
|
|
143
|
+
コード上のどのような問題をESLint に指摘させるかを、様々なルール
|
|
144
|
+
|
|
145
|
+
- [https://eslint.org/docs/rules/](https://eslint.org/docs/rules/)
|
|
146
|
+
|
|
147
|
+
によって設定できます。上記のルール一覧の中に
|
|
148
|
+
|
|
149
|
+
**camelcase**
|
|
150
|
+
|
|
151
|
+
というルールがありますが、これは
|
|
152
|
+
|
|
153
|
+
**enforce camelcase naming convention**
|
|
154
|
+
|
|
155
|
+
という説明のとおり、このルールが設定されたESLint が、ソースコードを解析しているときに、スネークケースの識別子(例：`first_name`)をみつけると、
|
|
156
|
+
|
|
157
|
+
**error Identifier 'first_name' is not in camel case**
|
|
158
|
+
|
|
159
|
+
といったエラーメッセージが出力されます。このように、スネークケースの識別子をキャメルケースにするようにと促すルールは存在しますが、逆に、キャメルケースの識別子をなるべくスネークケースにするよう求めるようなルールは見当たりません。
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
まとめますと、私見としては、
|
|
165
|
+
|
|
166
|
+
(1)GoogleのJavaScriptスタイルガイドでは、変数名などの識別子をキャメルケースで書くルールになっている。
|
|
167
|
+
|
|
168
|
+
(2)ESLintで、キャメルケースになっていないことをエラーにするルール（camelcase)はあるが、スネークケースになっていないことをエラーにするルールは存在しない。（つまり、なるべくスネークケースでコードを書かせるようなESLintの設定を、誰も必要としていない）
|
|
169
|
+
|
|
170
|
+
という二点を根拠として「今からどちらかに慣れていくとしたら、どちらがいいか？」というご質問であれば、迷わずキャメルケースをお勧めします。ですので、今回も、ちょっと違和感あるかもしれませんが、`$users_lists`ではなく`$usersLists` とするのをお勧めします。
|
|
171
|
+
|
|
172
|
+
ただし、冒頭で
|
|
173
|
+
|
|
174
|
+
> ナシでしょうか。
|
|
175
|
+
|
|
176
|
+
というご質問の捉え方によって回答も若干変わってきます、と書きましたとおり、`$usersLists` と書くのが絶対ではありません。
|
|
177
|
+
|
|
178
|
+
たとえば、業務や学校の課題などで、複数人のチームに所属して、その人たちと共同でホームページ等を作るというような
|
|
179
|
+
状況になったとして、自分がそのプロジェクトに参加し始めた時点で、すでに大量のJavaScriptのコードが書かれていて、そのコードでは、変数名やプロパティ名がスネークケースで書かれているほうが多い、という状況においての
|
|
180
|
+
|
|
181
|
+
`$users_lists` と書くのは
|
|
182
|
+
|
|
183
|
+
> ナシでしょうか。
|
|
184
|
+
|
|
185
|
+
というご質問であれば、
|
|
186
|
+
|
|
187
|
+
（そういうことであれば、ひとまず） アリですね。
|
|
188
|
+
|
|
189
|
+
という回答になります。
|
|
190
|
+
|
|
191
|
+
GoogleやESLintのルールといっても絶対ではありませんので、これらで決まっているルールを知った上で、それらをごり押しするのではなく、周囲の人たちとうまくやり業務が円滑に進むように、臨機応変にご対応されるとよろしいかと思います。
|
|
192
|
+
|
|
193
|
+
coletteさんとしては、スネークケースのほうが
|
|
194
|
+
|
|
195
|
+
> スッキリさを感じます。
|
|
196
|
+
|
|
197
|
+
とのことですが、先述したようにJavaScript ではキャメルケースが（広く使われ、推奨されるという意味で）標準です。ただし、これは、キャメルケースのほうがスネークケースよりも誰からみてもあらゆる点で優れているということではありません。実際、Python というプログラミング言語では関数や変数は、いわゆるスネークケース、すなわち、すべて小文字で、適宜、単語をアンダースコアで区切ることが PEP8 という規約
|
|
198
|
+
|
|
199
|
+
- [pep-0008/#function-and-variable-names](https://www.python.org/dev/peps/pep-0008/#function-and-variable-names)
|
|
200
|
+
|
|
201
|
+
に
|
|
202
|
+
|
|
203
|
+
> Function and Variable Names
|
|
204
|
+
|
|
205
|
+
> Function names should be lowercase, with words separated by underscores as necessary to improve readability.
|
|
206
|
+
|
|
207
|
+
と定められています。私はときどきPythonでコードを書くこともあるので、スネークケースのほうが
|
|
208
|
+
|
|
209
|
+
> スッキリさを感じます。
|
|
210
|
+
|
|
211
|
+
というのも、実感として分かります。ですが、今後JavaScriptに熟達されたいのであれば、キャメルケースのほうに慣れて、JavaScriptのコードの中に `users_lists` が出てきたときに、なんとなく違和感を感じるぐらいを目指されることを推奨いたします。
|
|
212
|
+
|
|
213
|
+
キャメルケースに慣れるための方法のひとつとしては、JavaScriptを書くときの開発ツールとして、VSCodeやWebStormを使うと、上記の ESLint が効くようにしておくことができるので、先のルール camelcase を設定すれば、エディタで
|
|
214
|
+
|
|
215
|
+
`first_name`
|
|
216
|
+
|
|
217
|
+
と書いたその場で、即座に `first_name` の下に赤い下線が引かれて、マウスをのせるとESLintのエラーメッセージが表示されるといったことができます。そういったツールの力を借りて、自分の書くコードを楽に矯正していくのも良い方法かと思います。
|
|
218
|
+
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
#### 2. CSSのクラス名について
|
|
222
|
+
|
|
223
|
+
次に CSS のクラス名のほうを、ハイフン区切りの`.users-list`ではなく、アンダーバー区切りの `.users_list` と書くのは
|
|
224
|
+
|
|
225
|
+
> ナシでしょうか。
|
|
226
|
+
|
|
227
|
+
に回答しますが、正直なところ、私自身は、これらのどちらがいいのか、というご質問に対して、あまり有用な知見を持ち合わせておりませんので、ちょっとstackoverflow を調べてみました。すると、
|
|
228
|
+
|
|
229
|
+
- [What is the standard naming convention for html/css ids and classes?](https://stackoverflow.com/questions/6028211)
|
|
230
|
+
|
|
231
|
+
という質問がありました。この質問は HTMLを書くときの `id` 属性の書き方として、以下の3つ
|
|
232
|
+
|
|
233
|
+
```
|
|
234
|
+
1. id="someIdentifier" - looks pretty consistent with javascript code.
|
|
235
|
+
|
|
236
|
+
2. id="some-identifier" - looks more like html5-like attributes and other things in html.
|
|
237
|
+
|
|
238
|
+
3. id="some_identifier" - looks pretty consistent with ruby code and is still a valid identifier inside of Javascript
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
のどれがいいのか？を問うもので、これの[ベストアンサー](https://stackoverflow.com/a/6028289) の冒頭を簡単に要約すると、
|
|
242
|
+
|
|
243
|
+
```
|
|
244
|
+
３つのうちのどれがいい、というのはない。どれでも、自分の見やすい、または書きやすい方法を選べばよい。
|
|
245
|
+
ただし、開発チームですでに決まっている慣例があるのであれば、それに従おう。
|
|
246
|
+
```
|
|
247
|
+
|
|
248
|
+
といった感じです。私もこれに同意です。ただし、この回答者の最近の更新に、
|
|
249
|
+
|
|
250
|
+
> Update 2020
|
|
251
|
+
>
|
|
252
|
+
A boring update this year. I'm still using BEM.
|
|
253
|
+
|
|
254
|
+
というコメントがあり、いわく「BEMを使っている」とあります。
|
|
255
|
+
このコメントにあるBEMとはCSSの設計手法のひとつで、以下
|
|
256
|
+
|
|
257
|
+
- [http://getbem.com/naming/](http://getbem.com/naming/)
|
|
258
|
+
|
|
259
|
+
のような感じで、クラス名を命名するときに、 ハイフンとアンダーバーを異なる意味で使用したり、2個連続したりします。ですので、BEMの文法として使うハイフンやアンダーバーと被らないようにするのであれば、`users-list` や `users_list` ではなく、上記３パターンのうちの 1.を使った `usersList` がよい、と言えるかもしれません。
|
|
260
|
+
|
|
261
|
+
BEMの以外のCSS設計論として [ECSS](https://ecss.io/) というCSS設計の体系もありますが、これもハイフンやアンダーバーをその設計論による文法の一部として使います。クラス名を`users-list` や `users_list` とした場合、これらに含まれるハイフンやアンダーバーが、BEM や ECSS の文法の一部としてのハイフンやアンダーバーとしてよいのかは、CSSクラスの設計上で、`users` という識別子が、どのような対象、あるいはどこまでの範囲を示すものとするのか、によります。これらを検討するには、BEMやECSSがどのようなものかを知る必要があります。
|
|
262
|
+
|
|
263
|
+
ただし、上記はBEMやECSSのようなCSS設計手法を取り入れることが見えているのであれば検討すべきことですが、そのような予定はない、または、あるとしてもまだ先の話であれば、先の [stackoverflow の回答](https://stackoverflow.com/a/6028289) と同様に
|
|
264
|
+
|
|
265
|
+
- `class="usersList"`
|
|
266
|
+
|
|
267
|
+
- `class="users-list"`
|
|
268
|
+
|
|
269
|
+
- `class="users_list"`
|
|
270
|
+
|
|
271
|
+
のどれでも、自分が見やすいもの、分かりやすいものを選べばよろしいかと思います。
|
|
272
|
+
|
|
273
|
+
|
|
274
|
+
#### 3. まとめ
|
|
275
|
+
|
|
276
|
+
結論として、私見としては
|
|
277
|
+
|
|
278
|
+
① JavaScript の変数名： キャメルケース(今回であれば、`$usersLists`) をお勧めします。
|
|
279
|
+
|
|
280
|
+
② CSSクラス名： `.users-list` と `.users_list` との比較については、どちらでもよい。BEM や ECSS ではハイフンやアンダーバーがクラス名設計における文法の一部になっていることを頭の片隅に置きつつ、`.usersList` でもよい。
|
|
281
|
+
|
|
282
|
+
という回答になります。ただし、私としては、業務で主に担当してきた範囲の偏りから、上記の①については、それなりに自信を持って言えますが、②については、WEBデザイナーやWEBコーダーの熟練の方々からはまた違った視点からの有益な助言があるかもしれませんので、上記だけだとちょっとモヤモヤする感じでしたら、CSSクラス名の命名のみに論点を絞った質問を、再度投稿されるとよろしいかもしれません。
|
|
283
|
+
|
|
284
|
+
|
|
285
|
+
コメントから頂きましたご質問への回答は以上です。
|
2
テキスト修正
answer
CHANGED
|
@@ -74,4 +74,4 @@
|
|
|
74
74
|
- `usersContainer` ではなく、`container`は複数形にして、 `usersContainers` にすること
|
|
75
75
|
|
|
76
76
|
|
|
77
|
-
に今のうちからこだわる習慣をつけておくと、後々、何かとよろしいかと思います。
|
|
77
|
+
といったように、変数名を単数形にすべきか複数形にすべきかについて、今のうちからこだわる習慣をつけておくと、後々、何かとよろしいかと思います。
|
1
テキスト修正
answer
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
もうひとつのご質問として、ご質問のソースコードに含まれるコメント
|
|
10
10
|
|
|
11
|
-
```
|
|
11
|
+
```javascript
|
|
12
12
|
// elementでいいですか？objectでしょうか？それ以外でしょうか？
|
|
13
13
|
var $elment = $('.users');
|
|
14
14
|
```
|
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
```javascript
|
|
26
26
|
$element
|
|
27
27
|
```
|
|
28
|
-
という変数名は、`$` で始まっているので、
|
|
28
|
+
という変数名は、`$` で始まっているので、JQueryをそれなりに経験した人が読むと、先頭の`$`を見ただけで`$element` にはjQuery object が入ってくるのだな、という読み方をしますが、`$` の後に続く、element という名前はDOMの要素であるelementを思わせるので、全体として
|
|
29
29
|
```javascript
|
|
30
30
|
$element
|
|
31
31
|
```
|
|
32
|
-
という名前の付け方は、あまりよろしくない、ということになります。では、どのような命名がよいかというと、`$('.users')` によって、`users`クラスの要素を含むjQuery objectが返ってきますが、その該当要素は複数である場合があるので、
|
|
32
|
+
という名前の付け方は、あまりよろしくない、ということになります。では、どのような命名がよいかというと、`$('.users')` によって、`users`クラスの要素を含むjQuery objectが返ってきますが、その該当要素は複数である場合があるので、すぐに思いつくところだと、
|
|
33
33
|
|
|
34
34
|
```javascript
|
|
35
35
|
$usersLists = $('.users');
|
|
@@ -40,8 +40,9 @@
|
|
|
40
40
|
```javascript
|
|
41
41
|
$usersContainers = $('.users');
|
|
42
42
|
```
|
|
43
|
+
- **サンプルコード：** [codepen.io/jun68ykt/pen/WNwaBeX](https://codepen.io/jun68ykt/pen/WNwaBeX?editors=1011)
|
|
43
44
|
|
|
44
|
-
とするのがよいか思います。あるいは、他により良い名前があるかもしれません。さらには、以下のように、CSSクラス名
|
|
45
|
+
とするのがよいか思います。あるいは、他により良い名前があるかもしれません。さらには、`$usersLists`とするのであれば、以下のように、CSSクラス名も変数名に寄せることが考えられます。
|
|
45
46
|
|
|
46
47
|
```html
|
|
47
48
|
<ul class="users-list">
|
|
@@ -54,7 +55,7 @@
|
|
|
54
55
|
$usersLists = $('.users-list');
|
|
55
56
|
```
|
|
56
57
|
|
|
57
|
-
どのようにするのがよいかは、様々な事例や先達のご意見を参考に、ケースバイケースで検討するとよいかと思います。
|
|
58
|
+
どのようにするのがよいかは、様々な事例や先達のご意見、開発チームでの慣例を参考に、ケースバイケースで検討するとよいかと思います。
|
|
58
59
|
|
|
59
60
|
|
|
60
61
|
|