-
1:ID:TTopjt · 2017-09-08

#質問 コードの書き方で、以下のようにまとまりの区切りをわかりやすくするために改行を多めに使って書いていますが良くないのでしょうか?理由もつけてもらえると助かります。


(例:コードの一部を簡略化したもの)
<ul>

<li>
<a href="#" onClick="ga('send', 'event', 'banner', 'click', '#', {'nonInteraction': 1});">
<picture>
<source media="(max-width:780px)" srcset="#">
<img src="#" alt="#">
</picture>
</a>
</li>


<li>
<a href="#" onClick="ga('send', 'event', 'banner', 'click', '#', {'nonInteraction': 1});">
<picture>
<source media="(max-width:780px)" srcset="#">
<img src="#" alt="#">
</picture>
</a>
</li>


<li>
<a href="#" onClick="ga('send', 'event', 'banner', 'click', '#', {'nonInteraction': 1});">
<picture>
<source media="(max-width:780px)" srcset="#">
<img src="#" alt="#">
</picture>
</a>
</li>

</ul>

12 件の回答

2:ID:AC6nXP · 2017-09-08

タグ間の空白のことですか?
これが崩れる原因になります。
そうなっていても大丈夫な場合は多いし、締めタグなくてもエラーしないこともありますが、
正しくないです。

3:ID:/5GSSJ · 2017-09-08

個人的にonclickの中に色々書いてあるのはあまり好きくないです。
jsファイルには書けないんすかね。
ある規則があってそれに則っているんであれば、良いんじゃないすかね。
LIタグ間に改行を入れる必要性がわからないです。
であればULタグにコメント入れたら概要でわかりませんかね。

4:ID:aOQwcA · 2017-09-08

コードのまとまりを把握したいだけなら、インデントをちゃんと取るだけで十分だと思います。

5:ID:5zmIll · 2017-09-08

自己開発用のコードとしては、自分にとって書きやすければなんだっていいよ。
ただ、チームで開発する場合は、そのチームのコーディングルールがあるだろうし、それとは別に、公開用のコード(html/css/js)と開発用のコードは基本的に分けるべき。すでに例が出てるけど、たとえば、例のhtmlだと、おそらくインデントも入ってコメントも入ってくるんだろうけど、わかりやすいところで、ホワイトテキストノードの問題が出てくる。公開用のコード(html/css/js)は最低限、コメント外してminifyした方がよいよ。バックエンドの人にはなかなか理解できない話だろうけど。

ところでなんでノードがNGワードなんだろうか。

6:ID:wCxuBQ · 2017-09-08

自分はこの方がわかりやすいですね。
センテンスというか構成ブロックで繰り返しなどがある場合、区切りがわかるし。

ただ、チームや他の人とやる場合は、ぱっと見て理解できる人と、なんで空白空いてるの? と思う人がいるだろうなぁとは思います。

あとはシステムで吐き出す場合は空白が入っていたりするし、twitterとかのソースを見ると空白がボコボコ空いてるでしょ。

ユーザーにはどうでもいいところだし、ルールがないならそれを自分ルールにすれば良い。

インデントだけで良いという人もいるけど、インデントプラス空白のほうがもっと視認性があると思う。

どちらかというと、目で把握する、デザイナー兼コーダーの場合ですが。

使えるものは使う、便利になるのなら、便利にする。
本来インターネットの世界ってそういうものですよ。オープンな。

今までのルールはこれだから、これじゃないといけない。
というお役所的というか、保守的プログラマー的な考え方だと新しいものは生まれないし、
何も変わらない。

こうやったほうが良いというのはやっていったほうが良いですよ。

雑誌なんかで有名プログラマーが「このやり方が便利」と一言言えば、それが「正しい」という流れになったりもしますしね。

JSとかも改行消して、数バイトを軽くする&見えづらくする(暗号化っぽく) とか流行っていますが。
オープンソースの意味ないよなぁと。

本場(アメリカ)の書き方ややり方でかっこつけたいだけの流れとか。
今のトレンドはこういう書き方。とか、あまりこだわらずに、自分がわかりやすく、他の人にもこのほうがわかりやすいかなというやり方でやるのも進化だと思いますけど。

7:ID:gxl0vg · 2017-09-08

人に見せる前に整形ツール実行すりゃー、なんでもええんやで。

8:ID:aHUt4I · 2017-09-09

私も時々それやります。
が、改行は少ない方がファイルが軽くなるのでサイトスピード的にはアレですよね。
DW CCなら閉じタグを視覚的に教えてくれるし、インデントを一瞬で整えてくれたりする機能があるので、改行することは減りました

9:ID:gxl0vg · 2017-09-09

Re:6
JSとかも改行消して、数バイトを軽くする&見えづらくする(暗号化っぽく) とか流行っていますが。
オープンソースの意味ないよなぁと。

それ、ビルド用のコードな。

10:ID:4NqUBS · 2017-09-09

プログラマーに渡す時は、インデントや改行多用して、かつコメント入れてる。
プログラム入らない時やメンテが起こりそうもないページだと最小限にするけど、プログラマーが作業しやすいようにループするカードの時は見易さ優先で色々してる。

11:ID:gvAddH · 2017-09-11

Re:5
それ思ってたけど、半角カナならいけるんだね

12:ID:pBJ/tk · 2017-09-11

それで構わないと思う。ただ一般的かどうかといわれたら一概には言えないので、私だったらこのコード渡されたらなんで改行されてんのか解らないから消しちゃうね。一画面で全部のソース見たいので。
コーディング規約に書いててほしい。

13:ID:5zmIll · 2017-09-11

Re:8
minifyは表示パフォーマンスにほとんど寄与してないんだけどね。

コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る