JavaScriptのコードを綺麗に見せるたった2つのポイント

(この記事はQiitaで僕が書いたものを移行した記事です。記事中のコメントはQiitaの該当記事を参照ください)

記事書く時にのせるJavaScriptコードはなるべく綺麗な方いいです。綺麗だと読む人も疲れません。

他にも常日頃からJavaScriptコードを綺麗に書くようにするとモチベーションが保てたり管理もしやすかったりと便利です。

たった2つのポイントですし、慣れるとそこまで手間じゃなくなります。むしろきたないコードを書くのが我慢できなくなります。

インデントする

基本中の基本、インデントです。私はスペースでインデントしてます。理由としては

• Qiitaの記事など、Webで書く時にタブだと入力できない(フォーカスが移動するから)
• 4つのスペースはインデント以外ではほぼ使わない(まあコード中でタブはだいたい\tと書くのでそこまで変わりませんが)
• 以前なんかのアンケートでJavaScriptエンジニアはスペース派が多いと見かけた

からです。

ちょっと話がずれました。インデントはブロックに入った時、varで変数を並べて宣言する時、その他見やすいように入れるという具合です。vim使ってるならオートインデントかけるだけでも十分だと思います。

function sum(a, b) {
    // ここでインデント
    return a + b;
}

if (sum(3, 4) === 7) {
    // ここでも
    alert('test passed.');
}

// 自分的に複数行に渡る変数宣言はインデントすると見やすいと思う
const a = 3,
    b = 4,
    obj = {
        hoge: 'fuga'
    };
const arr = ['a', 'b', 'c'];

スペース

スペースの使い方一つでだいぶ綺麗になります。私が入れるポイントは以下のポイントです。

• 演算子の前後 (a + bみたいに)
• 関数宣言時のブロック前 (function() {のスペース)
• ifやforの後ろ (if ()という具合)
• for文中の;の後ろ
• コンマの後ろ ([1, 2, 3]こういう具合)
• オブジェクトのコロン後ろ({hoge: 3}のように)

上の項目をまとめたコードがこちら

function hoge() {
    if (a + b === 7) {
        for (let i = 0, res = [{id: -2}, {id: -1}]; i < 7; i = 0|i+1) {
            res.push({id: i});
        }
    }
}

for中の i = 0|i+1はあえてスペース入れてません。入れると余計に見づらくなりますし、このコードはJavaScriptのループはどれが一番高速なのかをベースにしていて、 i++と同じ動作をするだけですから、別にさして重要なコードではありません。見づらくても自分がわかればいいので(会社のプロジェクトとかとなると話は変わってくるかもしれませんが)。

入れてないとこんな感じです

function hoge(){
    if(a+b===7){
        for(let i=0,res=[{id:-2},{id:-1}];i<7;i=0|i+1){
            res.push({id:i});
        }
    }
}

同じコードなら上の方が見ていて疲れませんよね。

gjslint使うと簡単に綺麗にできます

Google製のJavaScript用lint、gjslint使うとかなり簡単に上記2つを修正できます。インストールも簡単なので是非入れてみてください。