teratail
回答率
85.47%
質問するログイン新規登録
トップJavaScriptに関する質問コード記述の簡略化の仕方がわかりません。

編集履歴

回答編集履歴

6

テキスト修正

2022/10/03 07:01

投稿

退会済みユーザー
test CHANGED
@@ -1,6 +1,6 @@
1
1
  ひとつのやり方としては、各ランキングアイテムのCSSクラスである`ranking1`, `ranking2` ... といった文字列をキーにして出現回数を値とする[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)でカウンターを作ることです。
2
2
 
3
- 質問にあるコード
3
+ この回答では質問にあるコード
4
4
  ```
5
5
  $('.ranking1').each(function(){
6
6
  $(this).prepend('<span class="num">' + i + '</span>');
@@ -14,8 +14,7 @@
14
14
 
15
15
  ・・・
16
16
  ```
17
-
18
- から推測されるHTMLとして、たとえば以下
17
+ から推測されるHTMLとして以下
19
18
  ```html
20
19
  <ul>
21
20
  <li class="ranking3">あいうえお</li>
@@ -30,9 +29,9 @@
30
29
  <li class="ranking2">わをん</li>
31
30
  </ul>
32
31
  ```
33
- のようなものを想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLではMapを使う説明のために必要最低限の簡易なHTMLとCSSクラスにしています。（※CSSクラス指定がより複雑な場合の対応を回答の末尾に追記しました。)
32
+ を想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLはMapを使う説明のために必要最低限の簡易なものです。（※CSSクラス指定がより複雑な場合の対応を回答の末尾に追記しました。)
34
33
 
35
- まずキーごとのカウント数を取得する関数を返す(高階)関数 `makeCounter`
34
+ 欲しいのは `'ranking1'`, `'ranking2'` ... といった文字列を与えるとそれのカウント数を返してくれる関数です。ですので、まずそのような関数を作って返してくれる(高階)関数`makeCounter` ：
36
35
  ```javascript
37
36
  function makeCounter() {
38
37
  const map = new Map;
@@ -44,12 +43,11 @@
44
43
  }
45
44
  }
46
45
  ```
47
- を作っておきます。
48
- 次にこれを以下のように実行することでカウント数取得関数 `countOf` を作っておきます。
46
+ を作っておきます。次にこれを実行して返される関数を変数 `countOf` に代入しておきます：
49
47
  ```javascript
50
48
  const countOf = makeCounter();
51
49
  ```
52
- 上記の `countOf` 関数にCSSクラスの `ranking<数字>` の文字列を渡すことで各ランキング別の出現順に1, 2, 3 ･･･の番号を取れるので、全ランキングアイテムを取ってきてそれらの各々に順位表示の`span` を prepend するのは以下のように書けます。
50
+ この `countOf` は関数であり引数にCSSクラス名の `ranking<数字>` の文字列を渡すことで各ランキング別の出現順を表す1, 2, 3 ･･･の番号を得ることができます。これを使って、全ランキングアイテムを取ってきてそれらの各々に順位表示の`span` を prepend するのは以下のように書けます。
53
51
 
54
52
  ```javascript
55
53
  $('[class^=ranking]').each(function() {
@@ -60,7 +58,7 @@
60
58
  ```
61
59
  - **動作確認用** 👉 https://codepen.io/su507/pen/wvjjpJO?editors=0010
62
60
 
63
- このやり方のメリットとしては、ランキングの種類が今後増えても全ランキングアイテムを取得してループするのでランキングの種類が増えるだけの変更に対しては修正は不要になることです。またランキングの種類が何種類あるのか（つまりクラス `ranking<数字>` の `<数字>`の最大値は何か）を知っている必要もありません。
61
+ Mapをカウンターとして使うこのやり方のメリットとしては、ランキングの種類が今後増えても全ランキングアイテムを取得してループするのでランキングの種類が増えるだけの変更に対しては修正は不要になることです。またランキングの種類が何種類あるのか（つまりクラス `ranking<数字>` の `<数字>`の最大値は何か）を知っている必要もありません。
64
62
 
65
63
  ### 追記
66
64
 
@@ -76,9 +74,7 @@
76
74
  ```html
77
75
  <li class="up ranking" data-ranking-id="4">さしすせそ</li>
78
76
  ```
79
- といったように修正したうえで、`$('.ranking')` の（上記の例だと）各要素の `data-ranking-id`属性の値をキーとして上記のカウンターを使えばよいかと思います。
77
+ といったように修正したうえで、`$('.ranking')` で取れる各要素の `data-ranking-id`属性値をキーとして先述のカウンターを使えばよいかと思います。
80
78
 
81
79
 
82
80
 
83
-
84
-

5

テキスト修正

2022/10/02 20:16

投稿

退会済みユーザー
test CHANGED
@@ -2,10 +2,17 @@
2
2
 
3
3
  質問にあるコード
4
4
  ```
5
- $('.ranking1').each(function(){
5
+ $('.ranking1').each(function(){
6
- $(this).prepend('<span class="num">' + i + '</span>');
6
+ $(this).prepend('<span class="num">' + i + '</span>');
7
- i++;
7
+ i++;
8
- });
8
+ });
9
+
10
+ $('.ranking2').each(function(){
11
+ $(this).prepend('<span class="num">' + i2 + '</span>');
12
+ i2++;
13
+ });
14
+
15
+ ・・・
9
16
  ```
10
17
 
11
18
  から推測されるHTMLとして、たとえば以下
@@ -23,7 +30,7 @@
23
30
  <li class="ranking2">わをん</li>
24
31
  </ul>
25
32
  ```
26
- のようなものを想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLではMapを使う説明のために必要最低限の簡易なHTMLとCSSクラスにしています。（※CSSクラス指定がより複雑な場合の対応を追記しました。)
33
+ のようなものを想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLではMapを使う説明のために必要最低限の簡易なHTMLとCSSクラスにしています。（※CSSクラス指定がより複雑な場合の対応を回答の末尾に追記しました。)
27
34
 
28
35
  まずキーごとのカウント数を取得する関数を返す(高階)関数 `makeCounter`
29
36
  ```javascript

4

テキスト修正

2022/10/02 20:03

投稿

退会済みユーザー
test CHANGED
@@ -23,7 +23,7 @@
23
23
  <li class="ranking2">わをん</li>
24
24
  </ul>
25
25
  ```
26
- のようなものを想定して、Mapを使う具体的なやり方の一例を挙げていきます。上記のHTMLではMapを使う説明のために必要最低限の簡易なHTMLとCSSクラスにしています。（※CSSクラス指定がより複雑な場合の対応を追記しました。)
26
+ のようなものを想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLではMapを使う説明のために必要最低限の簡易なHTMLとCSSクラスにしています。（※CSSクラス指定がより複雑な場合の対応を追記しました。)
27
27
 
28
28
  まずキーごとのカウント数を取得する関数を返す(高階)関数 `makeCounter`
29
29
  ```javascript

3

テキスト修正

2022/10/02 20:02

投稿

退会済みユーザー
test CHANGED
@@ -1,4 +1,14 @@
1
+ ひとつのやり方としては、各ランキングアイテムのCSSクラスである`ranking1`, `ranking2` ... といった文字列をキーにして出現回数を値とする[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)でカウンターを作ることです。
2
+
3
+ 質問にあるコード
4
+ ```
5
+ $('.ranking1').each(function(){
6
+ $(this).prepend('<span class="num">' + i + '</span>');
7
+ i++;
8
+ });
9
+ ```
10
+
1
- たとえば HTML が
11
+ から推測されるHTMLとして、たとえば以下
2
12
  ```html
3
13
  <ul>
4
14
  <li class="ranking3">あいうえお</li>
@@ -13,9 +23,9 @@
13
23
  <li class="ranking2">わをん</li>
14
24
  </ul>
15
25
  ```
16
- というものだったとします。ひとつのやり方としては、各ランキングアイテムのCSSクラスである`ranking1`, `ranking2` ... といった文字列をキーにして出現回数を値とする[Map](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Map)でカウンターを作ることです。
26
+ のようなものを想定して、Mapを使う具体的なやり方の一例を挙げていきます。上記のHTMLではMapを使う説明のために必要最低限の簡易なHTMLとCSSクラスにしています。（※CSSクラス指定がより複雑な場合の対応を追記しました。)
17
27
 
18
- 具体的なやり方の一例としてはキーごとのカウント数を取得する関数を返す関数 `makeCounter`
28
+ まずキーごとのカウント数を取得する関数を返す(高階)関数 `makeCounter`
19
29
  ```javascript
20
30
  function makeCounter() {
21
31
  const map = new Map;
@@ -27,11 +37,12 @@
27
37
  }
28
38
  }
29
39
  ```
40
+ を作っておきます。
30
- を作っておき、これを実行して以下のようにカウント数取得関数 `countOf` を作っておきます。
41
+ 次にこれを以下のように実行することでカウント数取得関数 `countOf` を作っておきます。
31
42
  ```javascript
32
43
  const countOf = makeCounter();
33
44
  ```
34
- そうすると、全ランキング要素を取得して各ランキングの上位から1, 2, 3 ･･･の順位を表す番号表示の <span> を prepend するのは以下のように書けます。
45
+ 上記の `countOf` 関数にCSSクラスの `ranking<数字>` の文字列を渡すことで各ランキング別の出現順に1, 2, 3 ･･･の番号を取れるので、全ランキングアイテムを取ってきてそれらの各々に順位表示の`span` を prepend するのは以下のように書けます。
35
46
 
36
47
  ```javascript
37
48
  $('[class^=ranking]').each(function() {
@@ -40,7 +51,11 @@
40
51
  $(this).prepend(span);
41
52
  });
42
53
  ```
43
- - 動作確認用 👉 https://codepen.io/su507/pen/wvjjpJO?editors=0010
54
+ - **動作確認用** 👉 https://codepen.io/su507/pen/wvjjpJO?editors=0010
55
+
56
+ このやり方のメリットとしては、ランキングの種類が今後増えても全ランキングアイテムを取得してループするのでランキングの種類が増えるだけの変更に対しては修正は不要になることです。またランキングの種類が何種類あるのか（つまりクラス `ranking<数字>` の `<数字>`の最大値は何か）を知っている必要もありません。
57
+
58
+ ### 追記
44
59
 
45
60
  もし、各ランキングアイテムの class が
46
61
  ```html

2

テキスト修正

2022/10/02 11:18

投稿

退会済みユーザー
test CHANGED
@@ -50,11 +50,11 @@
50
50
  ```html
51
51
  <li class="ranking4 down">さしすせそ</li>
52
52
  ```
53
- などのように、`ranking<数字>` 以外のクラスも入ってくることがあり得る場合は上記のコードはそのままでは使えません。この場合は `ranking4` であれば CSSクラスのほうは `ranking` のみにして `4` をdata-*属性で指定することにして
53
+ などのように、`ranking<数字>` 以外のクラスも入ってくることがあり得る場合は上記のコードはそのままでは使えません。この場合は `ranking4` であれば CSSクラスのほうは `ranking` のみにして `4` をdata-*属性で指定することにして、たとえば
54
54
  ```html
55
55
  <li class="up ranking" data-ranking-id="4">さしすせそ</li>
56
56
  ```
57
- に修正したうえで、`$('.ranking')` の各要素の `data-ranking-id`属性の値をキーとして上記のカウンターを使えばよいかと思います。
57
+ といったように修正したうえで、`$('.ranking')` の（上記の例だと）各要素の `data-ranking-id`属性の値をキーとして上記のカウンターを使えばよいかと思います。
58
58
 
59
59
 
60
60
 

1

誤字修正

2022/10/02 11:17

投稿

退会済みユーザー
test CHANGED
@@ -50,7 +50,7 @@
50
50
  ```html
51
51
  <li class="ranking4 down">さしすせそ</li>
52
52
  ```
53
- などのように、`ranking<数字>` 以外のクラスも入ってくることがあり得る上記のコードはそのままでは使えません。この場合は `ranking4` であれば CSSクラスのほうは `ranking` のみにして `4` をdata-*属性で指定することにして
53
+ などのように、`ranking<数字>` 以外のクラスも入ってくることがあり得る場合は上記のコードはそのままでは使えません。この場合は `ranking4` であれば CSSクラスのほうは `ranking` のみにして `4` をdata-*属性で指定することにして
54
54
  ```html
55
55
  <li class="up ranking" data-ranking-id="4">さしすせそ</li>
56
56
  ```