現在、javascriptを習得すべく、カレンダープログラムの写経を行っているのですが、「'」「"」の入れ子構造でいつも迷ってしまいます。
例えば以下のような場面です。

javascript
1txt += '<table summary="' + y + '年' + m_display + '月のカレンダー" class="calendar month' + m + '">';

「'」「"」が多く出てきていてどこで閉じられているのか判別するのが大変です。
また、選択してもハイライトもされないので、なおさら分かりません。
みなさんどうやって判断されているのでしょうか？

ちなみに、テキストエディタはatomを使用しています。
初歩的な質問で恐縮ですがお答えいただけるとありがたいです。

kei344

2017/04/15 02:56

質問タグ「Atom(言語)」「Atom(フォーマット)」は無関係ですので外して置いてください。また質問タグ「JavaScript」を付けることをお勧めします。

roronoazoro

2017/04/15 03:00

おっしゃる通りでした。ありがとうございます。

kei344

2017/04/15 03:03

「Atom(テキストエディタ)」は適切な質問タグだと思いますよ。

roronoazoro

2017/04/15 03:35

たびたびありがとうございます。

行動規範の内容に同意します

回答5件

IDEや単独のエディターは星の数ほどあると思いますが、それぞれにシンタックスカラー機能を持っていたりと見やすくする工夫がなされていると思います。ご質問のようなことを混乱しにくくするエディターもどこかにあるかも知れませんが・・・

IDEなどに依存しない工夫を考えてみます。以下は極端な例ですが・・・

javascript
1// どこが文字列の区切りか明確になるようにそれぞれ別の変数としてしまう
2var t1 = '<table summary="',
3    t2 = '月のカレンダー" class="calendar month',
4    t3 = '">';
5txt += t1 + y + '年' + m_display + t2 + m + t3;

しかし、これではシングル/ダブルクォート文字は区別しやすくなったかも知れませんが、全体としてどういう文字列が作られているか行間に視線を走らせなければならずかえって煩わしくなる気もしますね。

ECMAScript6のテンプレートリテラルが利用できるなら

javascript
1txt += `<table summary="${y}年${m_display}月のカレンダー" class="calendar month${m}">`;

のように文字列連結を書かずにすむため、ややこしさが減らせる気がします。
途中で連結する必要がないのでシングルクオートは一番外側にしかなく、その内側にあるダブルクォート文字は全部文字列の中に出現するものと見做せるのでわかりやすくなると思います。

投稿2017/04/15 03:12

KSwordOfHaste

総合スコア18394

ベストアンサー

javascript
1''.concat('<table summary="', y, '年', m_display, '月のカレンダー"',
2          'class="calendar month', m, '">')

concat() で連結するのがいいと一瞬思いましたが、要素を作成して、所定の場所に追加する方法のほうが良いような気もします

javascript
1// 値の仮設定
2m_display = 10
3m = 10
4y = 2017
5
6// 属性値の設定
7tableSummary = ''.concat(y, '年', m_display, '月のカレンダー')
8tableClassAttr = ['calendar', 'month', m].join(' ')
9
10// <table/> 要素の生成
11table = document.createElement('table')
12table.setAttribute('summary', tableSummary)
13table.setAttribute('class', tableClassAttr)
14
15// <table/> 追加先の取得と要素の追加
16parentNode = document.getElementById('app')
17parentNode.append(table)

この一連の処理の中で、 m_display, m, y に関してのみ、可変になりそうなので、それを引数に取る関数として、各処理を定義してあげるといいかもしれません(たとえばそのまま tableSummary(year, displayMonth) 関数、tableClassAttr(month) 関数、など)

何か参考になれば幸いです

Links

投稿2017/04/15 20:59

gouf

総合スコア2321

roronoazoro

2017/04/16 07:44

勉強不足なために、なかなか理解が追いつかないですが、なんとなく把握することができました。もう少し勉強してからまた見返して見ようかと思います。丁寧な開設ありがとうございます。

行動規範の内容に同意します

一番の解決策は「慣れ」かと思いますが、
要素ごとに変数を付けてあげてはいかがでしょうか。

javascript
1
2var tableSummary = y + '年' + m_display + '月のカレンダー';
3var tableClass = 'calendar month' + m;
4
5txt += '<table summary="' + tableSummary + '" class="' + tableClass + '">';
6