spl@net2 #個別の記録を管理する(途中)

はじめに

Javascript #配列
JSに対して不勉強だったツケがきた DatatablesでJSONを表示するコードを今まで書いてきて、なあなあでなんとなく動くコードを使っ...

これの最後に出てきたデータ取得部をやります。

DB書き込みは全てPHPのpdoを使っておこないます。ローカルから全て済ませるのでSQLインジェクションの可能性はないものと仮定します。

データベース構造

こんな感じのテーブルを作成しました。

+--------+-------------+------+-----+---------+-------+
| Field  | Type        | Null | Key | Default | Extra |
+--------+-------------+------+-----+---------+-------+
| type   | varchar(16) | YES  |     | NULL    |       |
| mode   | varchar(16) | YES  |     | NULL    |       |
| rule   | varchar(16) | YES  |     | NULL    |       |
| id     | int(11)     | YES  |     | NULL    |       |
| result | varchar(16) | YES  |     | NULL    |       |
| stage  | varchar(32) | YES  |     | NULL    |       |
| weapon | varchar(32) | YES  |     | NULL    |       |
| src    | varchar(64) | YES  |     | NULL    |       |
| point  | int(11)     | YES  |     | NULL    |       |
+--------+-------------+------+-----+---------+-------+
9 rows in set (0.00 sec)

以下、それぞれの解説。

  • type
    レギュラーマッチ/ガチマッチ。
  • mode
    ソロ/フェス/リーグマッチ/プライベートマッチ。
  • rule
    レギュラーマッチ/ガチホコバトル/ガチヤグラ/ガチエリア/ガチアサリ。
  • id
    リザルト番号。
  • result
    勝ったか負けたか。
  • stage
    ステージ情報。
  • weapon
    使っていたブキ。
  • src
    ブキの画像URL。
  • point
    塗りポイント。

ゴミコードを救出せよ

はっきりいうのもなんだが、ここまでのゴミコードはなかなか見れるものではない。

前半はまあいいのだが、後半が終わっている。

$(document).ready(function() {
  $.ajax('https://iksm.pgw.jp/api/stats/?rule=turf_war',
      {
        type: 'get',
        dataType: 'json'
      })
  .success(function(data){
    for(key in data){
      var stat = "
<li class=\"" + data[key].result + "\">"
        + "<a class=\"internal-link\" href=\"/results/" + data[key].id + "\">"
        + "
<div class=\"order\">WIN!</div>

"
        + "
<div class=\"result-contents\">
<div class=\"weapon\">"
        + "<img class=\"weapon-image\" src=\"" + data[key].src + "\" alt=\"" + data[key].weapon + "\"></div>

"
        + "
<div class=\"stage\">"
        + data[key].stage
        + "</div>

"
        + "
<div class=\"point\">"
        + data[key].point
        + "p</div>
</div>

</a></li>

";
      // console.log(stat);
      $(".turf_war").append(stat);
    }
  })
})

これを全く等価なコードに書き換えたものが以下のものである。

なんというかとても書きやすいし、間違えているかどうかがすぐわかる。

上のゴミコードをベストアンサーにした人は何を考えているのか。

$(document).ready(function() {
  $.ajax('https://iksm.pgw.jp/api/stats/?rule=turf_war',
      {
        type: 'get',
        dataType: 'json'
      })
  .success(function(data){
    var list = $('ul.turf_war');
    for(key in data){
      var li = $('
<li>').addClass(data[key].result).appendTo(list);
      var link = $('<a>').addClass('internal-link').attr('href', '/results/'+data[key].id).appendTo(li);
      var order = $('
<div>
').addClass('order').text('WIN!').appendTo(link);
      var contents = $('
<div>
').addClass('result-contents').appendTo(link);
      var weapon = $('
<div>
').addClass('weapon').appendTo(contents);
      var weapon_img = $('<img>').addClass('weapon-image').attr('src', data[key].src).attr('alt', data[key].weapon).appendTo(weapon);
      var stage = $('
<div>
').addClass('stage').text(data[key].stage).appendTo(contents);
      var point = $('
<div>').addClass('point').text(data[key].point+"p").appendTo(contents);
    }
  })
})

ただ、appendTo()がそれなりに重いらしいので多用はしないほうが良いらしい。
はい、まだまだ続きます。

シェアする