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

Q&A

4回答

1099閲覧

コード記述の簡略化の仕方がわかりません。

tah_s
tah_s

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2022/10/02 00:44

0

1

前提

ランキング設置にともない自動でナンバリングをするコードを書いてみました。
ですが、この書き方だとランキングがふえるたんびに書き直さないといけません。
書き直さないで済むこと＆記述を軽くすることは可能なのでしょうか？

実現したいこと

●記述を簡略化＆軽くしたい
●ランキング増えるたんびに書き直さないで済むようにしたい

該当のソースコード

$(function() {
var i = 1;
var i2 = 1;
var i3 = 1;
var i4 = 1;
var i5 = 1;
var i6 = 1;
var i7 = 1;

						$('.ranking1').each(function(){
						  $(this).prepend('<span class="num">' + i + '</span>');
						  i++;
						});
						
						$('.ranking2').each(function(){
						  $(this).prepend('<span class="num">' + i2 + '</span>');
						  i2++;
						});
					  
						$('.ranking3').each(function(){
						  $(this).prepend('<span class="num">' + i3 + '</span>');
						  i3++;
						});
						
						$('.ranking4').each(function(){
						  $(this).prepend('<span class="num">' + i4 + '</span>');
						  i4++;
						});
						
						$('.ranking5').each(function(){
						  $(this).prepend('<span class="num">' + i5 + '</span>');
						  i5++;
						});
						
						$('.ranking6').each(function(){
						  $(this).prepend('<span class="num">' + i6 + '</span>');
						  i6++;
						});
						
						$('.ranking7').each(function(){
						  $(this).prepend('<span class="num">' + i7 + '</span>');
						  i7++;
						});
					  });

試したこと

調べてみました。対応できませんでした。。。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

m.ts10806
m.ts10806

2022/10/03 01:30

＞調べてみました。対応できませんでした。。。 有益な情報があったが適用できなかっただけなのか、 そもそも有益な情報がなかったのか はたまた これだけでは分からないので具体的に記載してください。 調べたこと試したこと。
guest

回答4件

0

jQueryは使ったことないけどこれでいけるかな？

js
1$(function() {
2  for (let ranking = 1; ranking <= 7; ranking++) {
3    let i = 1;
4    $('.ranking' + ranking).each(function(){
5      $(this).prepend('<span class="num">' + i + '</span>');
6        i++;
7    });
8  }
9});

投稿2022/10/02 01:56

編集2022/10/02 02:14
shiracamus
shiracamus

総合スコア5413

0

この場合は、どうなりますか？

$(function() {
var i = 1;
var i2 = 1;
var i3 = 1;
var i4 = 1;
var i5 = 1;
var i6 = 1;
var i7 = 1;
$('.ranklist1 p.rank2').each(function(){
$(this).prepend('<span class="num">' + i + '</span>');
i++;
});

							$('.ranklist2 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i2 + '</span>');
							  i2++;
							});
						  
							$('.ranklist3 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i3 + '</span>');
							  i3++;
							});
							
							$('.ranklist4 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i4 + '</span>');
							  i4++;
							});
							
							$('.ranklist5 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i5 + '</span>');
							  i5++;
							});
							
							$('.ranklist6 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i6 + '</span>');
							  i6++;
							});
							
							$('.ranklist7 p.rank2').each(function(){
							  $(this).prepend('<span class="num">' + i7 + '</span>');
							  i7++;
							});
						  });

投稿2022/10/02 13:45

tah_s
tah_s

総合スコア2

Cocode
Cocode

2022/10/02 19:27

どなたかが低評価つけられていますが、どうしてかと言うと、そちらの質問は質問の投稿を編集して追加してください😀 ここは回答欄なので…！
guest

0

ひとつのやり方としては、各ランキングアイテムのCSSクラスであるranking1, ranking2 ... といった文字列をキーにして出現回数を値とするMapでカウンターを作ることです。

この回答では質問にあるコード

$('.ranking1').each(function(){
  $(this).prepend('<span class="num">' + i + '</span>');
  i++;
});

$('.ranking2').each(function(){
  $(this).prepend('<span class="num">' + i2 + '</span>');
  i2++;
});

・・・

から推測されるHTMLとして以下

html
1<ul>
2<li class="ranking3">あいうえお</li>
3<li class="ranking1">かきくけこ</li>
4<li class="ranking4">さしすせそ</li>
5<li class="ranking1">たちつてと</li>
6<li class="ranking3">なにぬねの</li>
7<li class="ranking1">はひふへほ</li>
8<li class="ranking4">まみむめも</li>
9<li class="ranking2">やゆよ</li>
10<li class="ranking1">らりるれろ</li>
11<li class="ranking2">わをん</li>
12</ul>

を想定して、Mapを使う具体的なやり方の一例を挙げていきます。なお上記のHTMLはMapを使う説明のために必要最低限の簡易なものです。（※CSSクラス指定がより複雑な場合の対応を回答の末尾に追記しました。)

欲しいのは 'ranking1', 'ranking2' ... といった文字列を与えるとそれのカウント数を返してくれる関数です。ですので、まずそのような関数を作って返してくれる(高階)関数makeCounter ：

javascript
1function makeCounter() {
2  const map = new Map;
3  
4  return (key) => {
5    const count = 1 + (map.get(key) || 0);
6    map.set(key, count);
7    return count;
8  }
9}

を作っておきます。次にこれを実行して返される関数を変数 countOf に代入しておきます：

javascript
1const countOf = makeCounter();

この countOf は関数であり引数にCSSクラス名の ranking<数字> の文字列を渡すことで各ランキング別の出現順を表す1, 2, 3 ･･･の番号を得ることができます。これを使って、全ランキングアイテムを取ってきてそれらの各々に順位表示のspan を prepend するのは以下のように書けます。

javascript
1$('[class^=ranking]').each(function() {        
2  const count = countOf($(this).attr('class'));
3  const span = $('<span>').text(count).attr('class', 'num');
4  $(this).prepend(span);
5});

Mapをカウンターとして使うこのやり方のメリットとしては、ランキングの種類が今後増えても全ランキングアイテムを取得してループするのでランキングの種類が増えるだけの変更に対しては修正は不要になることです。またランキングの種類が何種類あるのか（つまりクラス ranking<数字> の <数字>の最大値は何か）を知っている必要もありません。

追記

もし、各ランキングアイテムの class が

html
1<li class="up ranking4">さしすせそ</li>

だったり

html
1<li class="ranking4 down">さしすせそ</li>

などのように、ranking<数字> 以外のクラスも入ってくることがあり得る場合は上記のコードはそのままでは使えません。この場合は ranking4 であれば CSSクラスのほうは ranking のみにして 4 をdata-*属性で指定することにして、たとえば

html
1<li class="up ranking" data-ranking-id="4">さしすせそ</li>

といったように修正したうえで、$('.ranking') で取れる各要素の data-ranking-id属性値をキーとして先述のカウンターを使えばよいかと思います。

投稿2022/10/02 11:15

編集2022/10/03 07:01
退会済みユーザー

退会済みユーザー

総合スコア0

Cocode
Cocode

2022/10/02 11:34

セレクタの[class^=ranking]の書き方がスマートで感動しました！勉強になりました🥺 ただ、それだと関係のないクラス、例えば「.ranking-container」とか「.rankingByCost」とかあれば、含まれてしまわないかな…？と心配しています！ 正規表現みたいに「rankingから始まり、数字が1つまたは複数あり、それで終わる」という表現できたら最高ですが…！
Cocode
Cocode

2022/10/02 11:40

最後の方にカスタムデータ属性使いましょうと対策かいてくれてました！！ 見落としてました失礼しました。
退会済みユーザー

退会済みユーザー

2022/10/02 11:58

コメントありがとうございます。本回答の主旨は「カウンターの実現にMapを使うのはどうでしょう？」という提案でしたので、ranking-container や rankingByCost などの「ranking 始まりだけれど ranking<数字> ではないクラス」が’あった場合のことまでは考えていませんでした。
Cocode
Cocode

2022/10/03 02:24

私の勘違いのコメントに優しいお返事をくださいましてありがとうございます…！ su507様と私の回答を総合して考えると、「.ranking」などの共通クラスをつけて処理した方がベターだと感じました。 そして順位を区別するために、 su507のおっしゃる通りカスタムデータ属性に数値をいれておくか、 クラス名に「.ranking-1」などを追加するか、ですかね。 非常に勉強になりました。ありがとうございました。
guest

0

方法は2つありまして、

  1. 対象の要素に同じクラス名をつける方法（例 .ranking）
  2. 対象の要素に連番でクラス名をつける方法（例 .ranking1, .ranking2...）

動作確認サンプル： https://jsfiddle.net/ur4daeso/

同じクラス名の方法　.ranking

javascript
1$('.ranking').each(function(i) {
2	$(this).prepend('<span class="num">' + (i+1) + '</span>'); 
3})

$('.ranking')

  • この部分で、.rankingというクラス名を持つ要素を全て（上から順番に）取得しています。
  • 取得した要素は配列みたいに格納されています。
    • [0番目の.ranking要素, 1番目の.ranking要素, 2番目の.ranking要素]

.each(function(i) {...})

  • functionの引数（()の中）にiと書くと、jQueryの場合はループごとに自動でi++の処理をしてくれます。
  • 取得した要素は全て↑のように配列みたいに格納されているので、これら1つずつに処理を行います。.each()
    • 英語でeachは「〜毎に」「1つずつ」という意味ですね。

'<span class="num">' + (i+1) + '</span>'

  • functionの引数にかいたiは0番から始まります。
  • ランキングの番号は1番から開始したいので、i+1で0+1, 1+1...という感じにします。

連番でクラス名をふる場合　.ranking1, .ranking2...

❗️❗️❗️ 注意 ❗️❗️❗️

●ランキング増えるたんびに書き直さないで済むようにしたい
この方法は質問者様の上記のご要望を 満たしていません。
ランキングが増えるたびに1ヶ所だけコードを変更する必要があります。

javascript
1for (let i = 1; i <= 3; i++) {
2	$('.ranking' + i).prepend('<span class="num">' + i + '</span>');
3}

for()の意味はご存知ですか？この文法を知らない場合、その旨を教えてください。回答に内容を追加して説明します。

for (let i = 1; i <= 3; i++) {

  • 連番が1番から始まってほしいので、let i = 1としました。
  • 要素の数（例では3つ）だけループしてほしいので、i <= 3としました。
    • 要素の数が変わるたびに、ここの3という数字を変更する必要があります。

$('.ranking' + i)

  • この部分で「.ranking」という文字列と、連番のiを結合し、.ranking1, .ranking2...というクラス名を表現します。
  • そしてそのクラス名の要素を1つずつ取得しています。
同じクラス名と連番クラス名の処理の違い
  • 同じクラス名をつける方法では、全部の要素を一度に取得して、1つずつ処理するという方法です。
    • 全部要素を取得して → 1つの要素を処理して → 次の1つの要素を処理して → 繰り返す
  • 連番のクラス名の場合では、1つずつ要素を取得して処理しています。
    • 1つ要素を取得して＆処理して → 次の1つ要素を取得して＆処理して → 繰り返す

投稿2022/10/02 02:15

編集2022/10/02 07:35
Cocode
Cocode

総合スコア2316

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.29%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップJavaScriptに関する質問

コード記述の簡略化の仕方がわかりません。