ウェブ家の備忘録

ウェブデザイナーの備忘録

ブログで使うインデントについて

 昔からインデントは派閥があります。
インデント派閥

打ちやすさ 可読性 容量
半角スペース2回 打ちやすい ネストが見辛い 2文字
半角スペース4回 打ちづらい 誰でも見やすい 4文字
Tab 打ちやすい 見やすいが、環境によって
スペース4回・8回に変わる
1文字
 あくまで私はなのですが、
 Tabは環境によって見栄えが変わるのが致命的。半角スペース4回は打ちづらいのが致命的。
 なので私は半角スペース2回派閥に所属しています。多少見辛いのは慣れの問題だと思い込むことにしてます。

 けれど最近、当ブログでコードハイライトを導入してコードを見やすくするためにCSSいじっているんですけれど、なんか見辛さが取れないという心境になりました。
 何が原因だろう。あ、インデントかも。
 というわけで下記を作って見比べてみました。コードが酷く個性的なのはスルーしてください。

半角スペース2回

<script>
(function(){
  var url=[ ['','']
    ,['検索デスク','http://searchdesk.com']
    ,['google','http://google.com']
    ,['','']
  ];
  
  url.sort(function(a,b){
    if(a[0]>b[0]){return 1;}else{return -1;}
  });
  
  var first=0,output='';
  
  for(var i=0;i<url.length;i++){
    if(url[i][0]!=''){
      if(first==0){first++;}else{output+='<br>';}
      output+='<a href="'+url[i][1]+'" target="_blank" style="text-decoration: none;">'+url[i][0]+'</a>';
    }
  }
  
  document.write(output);
}());
</script>

半角スペース4回

<script>
(function(){
    var url=[ ['','']
        ,['検索デスク','http://searchdesk.com']
        ,['google','http://google.com']
        ,['','']
    ];
    
    url.sort(function(a,b){
        if(a[0]>b[0]){return 1;}else{return -1;}
    });
    
    var first=0,output='';
    
    for(var i=0;i<url.length;i++){
        if(url[i][0]!=''){
            if(first==0){first++;}else{output+='<br>';}
            output+='<a href="'+url[i][1]+'" target="_blank" style="text-decoration: none;">'+url[i][0]+'</a>';
        }
    }
    
    document.write(output);
}());
</script>

Tab

<script>
(function(){
	var url=[ ['','']
		,['検索デスク','http://searchdesk.com']
		,['google','http://google.com']
		,['','']
	];
	
	url.sort(function(a,b){
		if(a[0]>b[0]){return 1;}else{return -1;}
	});
	
	var first=0,output='';
	
	for(var i=0;i<url.length;i++){
		if(url[i][0]!=''){
			if(first==0){first++;}else{output+='<br>';}
			output+='<a href="'+url[i][1]+'" target="_blank" style="text-decoration: none;">'+url[i][0]+'</a>';
		}
	}
	
	document.write(output);
}());
</script>

 今回当ブログの環境でTabはスペース8回になってますね。
 上記を見比べてみてどうでしょう。

留意したい点
1.インデントが幅とってないと見辛い。
2.コードが右に行き過ぎるとコード隠れてめんどくさい。

 1の幅ないと見辛い問題を考えるとスペース4回になります。Tabはやりすぎ。
 2のコードが右に行くとコードが隠れる問題を考えるとTabは致命的、スペース2回・4回がいい感じに。(いや、コードが右行って隠れるのは私のコードがヤベェだけかもなのですが)
 1と2の問題でいい感じに妥協できているのはスペース4回、今後当ブログに載せるコードのインデントはスペース4回にしようかと思います。

 私用ではスペース2回派なのですが、私用でもスペース4回にして頑張ろうかと思います。