質問をすることでしか得られない、回答やアドバイスがある。

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

質問する

ただいまの
回答率

89.07%

この記述のjsをもっと簡潔にしたいです。

解決済

回答 9

投稿

  • 評価
  • クリップ 8
  • VIEW 2,962
ByronHasegawa

ByronHasegawa

score 263

$(".tokyo-chuoku").append("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>");

appendにある記述を簡潔にしたいです。


理想例：

area = ("<tr><th><span>" + json["category"] + "</span><a href='detail.php?id=" + json["id"] + "'><h4>" + json["title"] + "</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/" + json["address"] + "'>" + json["address"] + "</a></span></td><td><span class='txt'>" + json["tel"] + "</span></td><td><span class='txt'>" + json["business_hours"] + "</span></td><td><span class='txt'>" + json["holiday"] + "</span></td></tr>"); 

$(".tokyo-chuoku").append(area); 

$(".tokyo-shibuyaku").append(area); 


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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 9 件

link

checkベストアンサー

+6

プレースホルダを置いて後から置換するのはどうでしょう？ 
var json1={
  category:'カテゴリ名',
  id:'IDxxxx',
  title:'タイトル',
  address:'中央区XX町XXXX',
  tel:'XX-XXXX-XXXX',
  business_hours:'X:XX-X:XX',
  holiday:'休日'
}
var json2={
  category:'カテゴリ名',
  id:'IDxxxx',
  title:'タイトル',
  address:'渋谷区XX町XXXX',
  tel:'XX-XXXX-XXXX',
  business_hours:'X:XX-X:XX',
  holiday:'休日'
}
area = "<tr><th><span>{{category}}</span><a href='detail.php?id={{id}}'><h4>{{title}}</h4></a></th><td><span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span></td><td><span class='txt'>{{tel}}</span></td><td><span class='txt'>{{business_hours}}</span></td><td><span class='txt'>{{holiday}}</span></td></tr>";

function placeHolder(str, json){
  for ( var k in json ){
    str = str.replace('{{'+k+'}}',json[k]);
  };
  return str
}

$(".tokyo-chuoku").append(placeHolder(area,json1)); 

$(".tokyo-shibuyaku").append(placeHolder(area,json2));  

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+6

求めているものから少し道はそれますが、append地獄だとタグ挿入などのメンテが大変なので
Handlebars.jsを使うと見やすく書けます。
…このままだと動かないかもですが…； 

<script id="tmp01" type="text/x-handlebars-template">
  <tr>
    <th>
      <span>{{category}}</span>
      <a href='detail.php?id={{id}}'><h4>{{title}}</h4></a>
    </th>
    <td>
      <span class='gmap_link'><a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/{{address}}'>{{address}}</a></span>
    </td>
    <td><span class='txt'>{{tel}}</span></td>
    <td><span class='txt'>{{business_hours}}</span></td>
    <td><span class='txt'>{{holiday}}</span></td>
  </tr>
</script>

  var template = Handlebars.compile($("#tmp01").html());
  $("#tokyo-chuoku").append(template(json));
  $(".tokyo-shibuyaku").append(area);


投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+3

DOM生成用のヘルパーメソッドを作って、下記のような形で定義出来れば分かりやすいんじゃないかと。
ヘルパーメソッドは他の画面でも流用できますし。 

// trタグ生成　※他のタグのメソッドは割愛します
var tr = function (attr, value) {
  return '<tr' + attr + '>' + value + '</tr>';
}

area = tr ('',
  th ('',
    span ('', json['category']),
    a (" href=detail.php?id="+json['id'], h4 (json['title']) )
  ),
  td ('',
    span (" class='gmap_link'",
      a (" class='i_map target='_blank'" +
         "href='https://www.google.co.jp/maps/search/'" + json['address'],
        json['address']
      )
    )
  ),
  td ('', span (" class='txt'", json['tel']) ),
  td ('', span (" class='txt'", json['business_hours']) ),
  td ('', span (" class='txt'", json['holiday']) )
);

$(".tokyo-chuoku").append(area);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+1 

var htmlString = '';
var json = {
  id: 'id',
  title: 'title',
  category: 'category',
  address: 'address',
  tel: 'tel',
  business_hours: 'business_hours',
  holiday: 'holiday'
}

htmlString = htmlString.concat(
  '<tr>',
    '<th>',
      '<span>' + json['category'] + '</span>',
      '<a href="detail.php?id=' + json['id'] + '"',
      '<h4>' + json['title'] + '</h4>',
    '</th>',
    '<td>',
      '<span class="gmap_link">',
        '<a class="i_map" target="_blank" href="https://www.google.co.jp/maps/search/' + json['address'] + '">',
          json['address'],
        '</a>',
      '</span>',
    '</td>',
    '<td>',
      '<span class="txt">',
          json['tel'],
      '</span>',
    '</td>',
    '<td>',
      '<span class="txt">',
          json['business_hours'],
      '</span>',
    '</td>',
    '<td>',
      '<span class="txt">',
          json['holiday'],
      '</span>',
    '</td>',
  '</tr>'

);

$(function () {
  $element = $('.tokyo-chuoku');
  $element.html(unescape(htmlString));
});

詳しくは知らないため「これ」とおすすめできるものはありませんが、jQuery 以外の、AngularJS などのフレームワークの導入を検討されてはいかがでしょうか

## Links

* 人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］ - Build Insider
* jquery inserted HTML is rendered as a raw text - Stack Overflow

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

+1

個人的にはhtmlとjavascriptは分けて記述したほうがメンテナンスとかしやすくなると思います。
たぶんセレクトボックスとかにチェックしたときに表示させるような仕様なのかなと推測してしたのように作ってみました。
※ちょっと長かったので多少データ省略させてもらいました。
appendを使うのはajaxで程よく整形されたhtmlを返す前提でないと仕様変更時にjavascriptの文字列結合と格闘する羽目になると思います。
apiなどからjsonで帰ってくるデータを使うとするとattrやtextで予め用意しておいた非表示のhtmlに値をうまく入れるほうが個人的にはすっきりします（あくまでも好みの問題かもしれませんが） 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

<script>
    $(function(){

        //.areaInfoがクリックされたら
        $('.areaInfo').click(function(){

            //これはたぶんajaxでとりますか？
            var json = {category:'中央区',id:1,address:'cuouku'};

            //クリックされたdata-areaの値を変数areaに代入
            //この後出てくるareaは'chuoku'という文字列になる
            var area = $(this).attr('data-area');

            //この場合だと#chuoukuの子要素のa.detail_linkのhrefに「detail.php?id=1」が入る
            $('#' + area + ' a.detail_link').attr("href","detail.php?id=" + json["id"]);

            //この場合だと#chuoukuの子要素のh4.categoryに「中央区」が入る
            $('#' + area + ' h4.category').text(json["category"]);

            //この場合だと#chuoukuの子要素のh4.categoryのhref属性の値に
            //「https://www.google.co.jp/maps/search/cuouku」が入る
            var gmapUrl = "https://www.google.co.jp/maps/search/" + json["address"];
            $('#' + area + ' a.i_map').attr("href",gmapUrl);

            //aタグのなかに「cuouku」が入る
            $('#' + area + ' a.i_map').text(json["address"]);

            //非表示のtrを表示させる。ただtrをtableだったか。。
            //→とりあえず表示しますが、レイアウト上の問題があるかも
            $('#' + area).css("display","table");

        });//.areaInfoクリックで発生する処理終了
        
    });
    
</script>
    
<a href='javascript:;' data-area="chuoku" class="areaInfo">中央区のデータを表示</a>
<table>
    <tr id='chuoku' style="display:none">
        <th>
            <span class="category">
                <a href="" class="detail_link"><h4 class="category"></h4></a>
            </span>
        </th>
        <td>
            <span class='gmap_link'>
                <a class="i_map" target="_blank" href=""></a>
            </span>
        </td>
    </tr>
</table>
※ソースはデスクトップに保存すればそのまま動きますので挙動見ていただければ幸いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0

append祭りで（簡潔かどうかと言われると…） 
$(".tokyo-chuoku").append(createTrData(json));

var url = "https://www.google.co.jp/maps/search/";
function createTrData(json){
    var ctd = function(value){
        return $('<td />').append($('<span />').addClass('txt').text(value));
    };
    return $('<tr />')
    .append($('<th />').append($('<span />').text(json["category"]))
        .append($('<a />').attr('href',"detail.php?id=" + json["id"] )
            .append($('<h4 />').text(json["title"]))))
    .append($('<td />').append($('<span />').addClass('gmap_link').append($('<a />')
        .addClass('i_map').attr('target','_blank').attr('href',url +json["address"])
        .text(json["address"]))))
    .append(ctd(json["tel"]))
    .append(ctd(json["business_hours"]))
    .append(ctd(json["holiday"]));
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0

この手の手法は大きく3種類で
  1.  テンプレートエンジンを使う
  2.  文字列を配列に入れて [].join();
  3.  表示上の変更される部分だけ更新する

このHTMLが絶対変更されないということでもない限り、テンプレートエンジンを使うべきだと思います。
そうでないならば、配列.join や 文字列.concat方法でいいんじゃないでしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0 

function area(json_arg) {
  return "<span>" + json_arg["hoge"] + "</span>";
}

json = { "hoge" : "huga" };

$(".tokyo-chuoku").append(area(json)); 
$(".tokyo-shibuyaku").append(area(json));

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

link

0

まぁ、可読性とメンテナンス性を考えると、普通はこうなるかなぁ…

var tr = "\
<tr>\
    <th>\
        <span>:category</span>\
        <a href='detail.php?id=:id'>\
            <h4>:title</h4>\
        </a>\
    </th>\
    <td>\
        <span class='gmap_link'>\
            <a class='i_map' target='_blank' href='https://www.google.co.jp/maps/search/:address'>:address</a>\
        </span>\
    </td>\
    <td><span class='txt'>:tel</span></td>\
    <td><span class='txt'>:business_hours</span></td>\
    <td><span class='txt'>:holiday</span></td>\
</tr>\
";

var labels = ["category", "id", "title", "address", "tel", "business_hours", "holiday" ];
    
for(var i in labels)
{
    var label = labels[i];
    var val = json[label];
    tr = tr.replace(new RegExp(':' + label), val);
}

$(".tokyo-chuoku").append($(tr));

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
質問する

関連した質問

同じタグがついた質問を見る

SNSアカウントでログイン

teratailアカウントでログイン

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る