垂直方向の位置揃え

インデントと垂直方向の位置揃えについて、使い方を誤ると辛いことになるので注意したい。
サンプルはjsだけど言語によって変わるものでもないのでなんのタグつければいいかわからん

要約

垂直方向の位置揃えをするなら半角スペース！！！！

表現の定義

正式な名称がわからないのでここで使う表現について以下のように定義しておく。

インデント

字下げ。{}や()などで囲まれた間の行について空白やタブで1段下げること。

例：インデント

function fnNankaShutokusuruKansu(param) {
    return 'なんか' + param + 'が渡された';
}

垂直方向の位置揃え

The Art of Readable Codeだとcolumn alignmentと呼ばれているやつ。
類似処理が連続するコードにについて、違いのある部分がわかりやすいよう、同じ部分は同じ位置に書くこと。
なんかスマートな呼び方あるんだろうか……
垂直方向の位置揃えを行うかどうかも好みが分かれる。

例：垂直方向の位置揃え

垂直方向の位置揃えなし

const hoge1 = fnNankaShutokusuruKansu('hoge');
const hensu1 = fnNankaShutokusuruKansu('piyo');
const chottonagaihensu1 = fnNankaShutokusuruKansu('chottonagaihensu');
const foo1 = fnNankaShutokusuruKansu('bar');
const bar1 = fnNankaShutokusuruKansu('bar');

垂直方向の位置揃えあり

// "="の位置を揃えることでパラメタ以外同じfnNankaShutokusuruKansuを呼び出していることがわかりやすい
const hoge2             = fnNankaShutokusuruKansu('hoge');
const piyo2             = fnNankaShutokusuruKansu('piyo');
const chottonagaihensu2 = fnNankaShutokusuruKansu('chottonagaihensu');
const foo2              = fnNankaShutokusuruKansu('foo');
const bar2              = fnNankaShutokusuruKansu('bar');

よくある間違い

インデントにタブ文字を使用しているコードで、垂直方向の位置揃えにもタブを使っている。

タブ文字を幅4で表示しながら垂直方向の位置揃えをした

function main() {
	const hoge				= fnNankaShutokusuruKansu('hoge');
	const piyo				= fnNankaShutokusuruKansu('piyo');
	const chottonagaihensu	= fnNankaShutokusuruKansu('chottonagaihensu');
	const foo				= fnNankaShutokusuruKansu('foo');
	const bar				= fnNankaShutokusuruKansu('bar');
}

コードブロック内でタブ文字使ってもスペースに置換されるんですね

垂直方向の位置揃えにもタブを使うと、タブのメリットである「見る人の好みのサイズでインデントできる」というメリットが死ぬ。
垂直方向の位置揃えをした人のダブサイズに合わせないと崩れる。

タブ幅を変えた場合のイメージ

幅2のタブ  幅4のタブ  幅8のタブ 

悩ましいところ

長くなるif文やパラメタの多い関数の途中で改行したくなったときのこれはインデントなのか垂直方向の位置揃えなのか。
1段下げることが目的ではなく垂直方向を揃えることが目的なので、垂直方向の位置揃えだと思っている。

if (hoge === 1 && piyo === 1 ||
    foo  === 2 && bar  === 2) { // ここのfooの位置とか
    fnParametaOoiKansu(param1, param2, param3,
                       param4, param5); // ここのparam4の位置とか
}

結論

インデントに半角スペースを使うかタブを使うかはチームで決めればいいが、どちらをちゅかう場合でも垂直方向の位置揃えをするなら半角スペースを使う。