jqueryを使ってhtmlを記述するコードを書いているのですが、jqueryの知識が乏しいのでどのように書くのが一番コードの可読性を高められるのかわかりません。
javascript
1$('#timeTable').children('.timeRowq') 2 .eq(row).children('.subject') 3 .eq(col).html('<div class="lessonTitle">'+timeTable[i][5]+ 4 '</div><div class="lessonTeacher">'+timeTable[i][6]+ 5 '</div><div class="lessonClassroom">'+timeTable[i][7]+ 6 '</div><div class="lessonSyllabus" style="display:none;">'+timeTable[i][8]+ 7 '</div><div class="lessonCode" style="display:none;">'+timeTable[i][0]+ 8 '</div><div class="lessonCol" style="display:none;">'+timeTable[i][1]+ 9 '</div><div class="lessonRow" style="display:none;">'+timeTable[i][2]+ 10 '</div><div class="lessonTerm" style="display:none;">'+timeTable[i][4]+ 11 '</div>');
上のようなコードを書いているのですが、このように書くと</div>が次の行に行ってしまうので可読性が下がっていると思います。
挙動としては問題が起こってないのですが、冗長だし人に見せたときに理解が送れるのではないかと思っています。
こんな書き方があるよだとか、このように書いたほうがいいよという書き方があれば教えて頂けるとうれしいです。
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答7件
0
ベストアンサー
+ 演算子
素直に連結する。
JavaScript
1var timeTable = [['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']]; 2var i = 0; 3var string = '<div class="lessonTitle">' + timeTable[i][5] + '</div>' + 4 '<div class="lessonTeacher">' + timeTable[i][6] + '</div>' + 5 '<div class="lessonClassroom">' + timeTable[i][7] + '</div>' + 6 '<div class="lessonSyllabus" style="display:none;">' + timeTable[i][8] + '</div>' + 7 '<div class="lessonCode" style="display:none;">' + timeTable[i][0] + '</div>' + 8 '<div class="lessonCol" style="display:none;">' + timeTable[i][1] + '</div>' + 9 '<div class="lessonRow" style="display:none;">' + timeTable[i][2] + '</div>' + 10 '<div class="lessonTerm" style="display:none;">' + timeTable[i][4] + '</div>'; 11 12console.log(string);
Array.prototype.join
配列の要素を連結する。
JavaScript
1'use strict'; 2var timeTable = [['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']]]; 3var i = 0; 4var string = ['<div class="lessonTitle">' + timeTable[i][5] + '</div>', 5 '<div class="lessonTeacher">' + timeTable[i][6] + '</div>', 6 '<div class="lessonClassroom">' + timeTable[i][7] + '</div>', 7 '<div class="lessonSyllabus" style="display:none;">' + timeTable[i][8] + '</div>', 8 '<div class="lessonCode" style="display:none;">' + timeTable[i][0] + '</div>', 9 '<div class="lessonCol" style="display:none;">' + timeTable[i][1] + '</div>', 10 '<div class="lessonRow" style="display:none;">' + timeTable[i][2] + '</div>', 11 '<div class="lessonTerm" style="display:none;">' + timeTable[i][4] + '</div>'].join(''); 12 13console.log(string);
template要素
確認の為にjQueryオブジェクト(jqueryObject
)からHTML文字列(htmlString
)に変換していますが、jQueryオブジェクトのままの状態で .append()
すると良いと思います。
HTML
1<template id="sample"><div class="lessonTitle"></div><div class="lessonTeacher"></div><div class="lessonClassroom"></div><div class="lessonSyllabus" style="display:none;"></div><div class="lessonCode" style="display:none;"></div><div class="lessonCol" style="display:none;"></div><div class="lessonRow" style="display:none;"></div><div class="lessonTerm" style="display:none;"></div></template> 2<script> 3'use strict'; 4var timeTable = new Map([[4, 'a'], [5, 'b'], [6, 'c'], [-1, 'd'], [7, 'e'], [0, 'f'], [1, 'g'], [2, 'h'], [3, 'i']]); 5var jqueryObject = jQuery(document.getElementById('sample').innerHTML); 6 7jqueryObject.each(function (i, div) { 8 div.innerHTML = timeTable.get(i); 9}); 10 11var htmlString = Array.prototype.reduce.call(jqueryObject, function (htmlString, div) { 12 return htmlString + div.outerHTML; 13}, ''); 14 15console.log(htmlString); 16jQuery('#timeTable>.timeRowq>.subject>td').eq(0).append(jqueryObject); 17<script>
対応表を用意する
template要素のコードの肝は、「timeTable[i][5]」と「div要素ノードの index 値(0)」の対応表を用意する事にあります。
他にも下記の方法が考えられます。
new Map
の代わりに二次元配列に対応表を格納する- 同じ index 値の値同士が対応するように変数
timeTable
の要素の順番を入れ替える - 「div要素が持つclass属性値」と「変数
timeTable
の index 値」の対応表を用意する
Re: cloudspider さん
投稿2017/06/30 13:18
編集2017/06/30 13:35総合スコア18162
0
バックスラッシュを入れることによって、文字列を改行することができます。
改行の直前にバックスラッシュを置くことで、改行をエスケープすることもできます。バックスラッシュと改行の両方が、文字列の値から取り除かれます。
本当はテンプレートリテラルを使うのがいいんでしょうけれど、IEが未対応です。
Template literal は組み込み式を扱うことができる文字列リテラルです。複数行文字列や文字列内挿機能を使用できます。
replace関数を使って、テンプレートもどきを作るのも手ですが、可読性が上がるかどうか、微妙なところ……
javascript
1'\ 2<div class="lessonTitle">{__}</div>\ 3<div class="lessonTeacher">{__}</div>\ 4<div class="lessonClassroom">{__}</div>\ 5<div class="lessonSyllabus" style="display:none;">{__}</div>\ 6<div class="lessonCode" style="display:none;">{__}</div>\ 7<div class="lessonCol" style="display:none;">{__}</div>\ 8<div class="lessonRow" style="display:none;">{__}</div>\ 9<div class="lessonTerm" style="display:none;">{__}</div>\ 10' 11.replace(/{__}/g, function(arr){ return function(){ return arr.shift() } }([ 12 timeTable[i][5], 13 timeTable[i][6], 14 timeTable[i][7], 15 timeTable[i][8], 16 timeTable[i][0], 17 timeTable[i][1], 18 timeTable[i][2], 19 timeTable[i][4] 20]));
投稿2017/06/30 10:55
総合スコア36089
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
Babelを使ってES6形式でJavaScriptを記述するというのは邪道でしょうか?
ES6形式であれば、文字列に「``」で囲ったテンプレートストリングが使えるので、
変数部分を${変数名}と記述すれば以下のように書き直すことが出来ます。
JavaScript
1$('#timeTable').children('.timeRowq') 2.eq(row).children('.subject') 3.eq(col).html(` 4 <div class="lessonTitle">${timeTable[i][5]}</div> 5 <div class="lessonClassroom">${timeTable[i][6}</div> 6 <div class="lessonClassroom">${timeTable[i][7]}</div> 7 <div class="lessonSyllabus" style="display:none;">${timeTable[i][8]}</div> 8 <div class="lessonCode" style="display:none;">${timeTable[i][0]}</div> 9 <div class="lessonCol" style="display:none;">${timeTable[i][1]}</div> 10 <div class="lessonRow" style="display:none;">${timeTable[i][2]}</div> 11 <div class="lessonTerm" style="display:none;">${timeTable[i][4]}</div> 12 `);
「+」で連結しない分、こちらのが可読性はかなり上がります。
Babelが使える状況であれば、jQueryでこの手のHTML生成を行わずに他のフレームワークを使ってるかもしれませんが・・・
参考
投稿2017/07/02 07:15
総合スコア217
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/02 07:21
0
可読性という話題はよく見かけますが、コード自体の可読性を限界まで高める方法以外にも、コメントをそれなりに入れておけば十分なんじゃないかと思うことがあります。
という考えで下にコメント付きのコードを書いてみましたがどうでしょうか?
あと、書き出すのがちょっと長いhtmlなので、html()の中に直接書くよりはどこか別の場所で作ったhtmlを書き出す方がメンテナンス性は良いと思います。
例えば、出力するHTMLだけを変更したい、または、書き出し先に追加変更を加えたいってときに()や{}を気にする量が減るかなと
javascript
1 2/* test data */ 3var timeTable = [['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']]; 4var i = 0; 5/* end */ 6 7 8function get_html(){ 9 10 /* 11 * return html code 12 * 13 <div class="lessonTitle">hoge</div> 14 ... 15 <div class="lessonTerm" style="display:none;">piyo</div> 16 * 17 */ 18 19 var html = '', 20 list = [ 21 ['Title',5,false], 22 ['Teacher',6,false], 23 ['Classroom',7,false], 24 ['Syllabus',8,true], 25 ['Code',0,true], 26 ['Col',1,true], 27 ['Row',2,true], 28 ['Term',4,true], 29 ]; 30 31 list.forEach(function(e){ 32 attr = e[2]?' style="display:none;"':''; 33 html += '<div class="lesson'+e[0]+'"'+attr+'>'+timeTable[i][e[1]]+'</div>'; 34 }); 35 36 return html; 37 38} 39 40/* test */ 41 console.log( get_html() ); 42/* end */ 43 44 45$('#timeTable').children('.timeRowq') 46 .eq(row).children('.subject') 47 .eq(col).html(get_html());
投稿2017/06/30 16:30
総合スコア1895
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/02 05:35
0
“use strict”(厳格モード)なら、環境の準備とかせずに利用できますよ。
厳格モードの記述を利用したい部分だけを即時関数でラップすればお手軽です。
javascript
1(function(){ 2"use strict"; 3 4$('#timeTable').children('.timeRowq') 5.eq(row).children('.subject') 6.eq(col).html(` 7<div class="lessonTitle">${timeTable[i][5]}</div> 8<div class="lessonClassroom">${timeTable[i][6}</div> 9<div class="lessonClassroom">${timeTable[i][7]}</div> 10<div class="lessonSyllabus" style="display:none;">${timeTable[i][8]}</div> 11<div class="lessonCode" style="display:none;">${timeTable[i][0]}</div> 12<div class="lessonCol" style="display:none;">${timeTable[i][1]}</div> 13<div class="lessonRow" style="display:none;">${timeTable[i][2]}</div> 14<div class="lessonTerm" style="display:none;">${timeTable[i][4]}</div> 15`); 16})()
投稿2017/07/10 12:59
総合スコア1441
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/07/10 14:00
退会済みユーザー
2017/07/11 08:16
0
jQueryではないですが、lodash.jsなどを使うのはいかがでしょうか?
以下公式からの抜粋のサンプルコードです。
javascript
1// Use the "interpolate" delimiter to create a compiled template. 2var compiled = _.template('hello <%= user %>!'); 3compiled({ 'user': 'fred' }); 4// => 'hello fred!' 5 6// Use the HTML "escape" delimiter to escape data property values. 7var compiled = _.template('<b><%- value %></b>'); 8compiled({ 'value': '<script>' }); 9// => '<b><script></b>'
##参考リンク
- Lodash Documentation
https://lodash.com/docs/4.17.4#template
- lodash.js (underscore.js)でのtemplateの使い方
投稿2017/06/30 12:35
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/02 06:20
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/07/02 06:19
退会済みユーザー
2017/07/10 11:52
2017/07/10 13:52