【リーダブルコード】読みやすくフォーマットする

最近はやる気がとんでもない岩崎真也です。

とりあえず動きますけど…

「取りあえず動くコード」が「読みやすいコード」とは限りません。

function getSum ( first:number,last:number ):number{
  let sum=0;

  for( let i=first;i<=last;i++ ){
  sum+=i;
  }

    return sum
}



const sum=getSum(1,10)
console.log(sum)

大学生や専門学校生、一人プロジェクト開発者に多いのが上記のようなコードです。弊社では、VS Code で「Prettier Now」プラグインを使って以下のようにフォーマットしています。

function getSum(first: number, last: number): number {
  let sum = 0

  for (let i = first; i <= last; i++) {
    sum += i
  }

  return sum
}

const sum = getSum(1, 10)
console.log(sum)

さて、何が変わったでしょうか?下に答えを掲載していますが、まずは考えてみましょう。

  • インデントを揃える。(line 5, 8)
  • 関数名の後に半角スペースを入れない。(line 1)
  • 文中のコロン、セミコロンの後に半角スペースを入れる。(line 1, 4)
  • for のあとに半角スペースを入れる。(line 4)
  • 丸括弧の内側に半角スペースを入れない。(line 4)
  • カンマの後に半角スペースを付ける。(line 4, 13)
  • 演算子(= など)の両端に半角スペースを入れる。(line 2, 4, 5)
  • 波括弧の前に半角スペースを入れる。(line 1, 4)
  • 複数行の空行は1行に詰める。(line 10-12)
  • 行末のセミコロンを除く。(または、必ずつけるというルールにする)

さいごに

このような一般的なフォーマットに揃えることは、チーム開発ではとても大切です。一人ひとりに調整をお願いしたり、レビューアーが指摘するのも面倒なので、「コードフォーマッター」ツールを活用するようにしましょう。興味がある人は「【VS Code】TypeScript / JavaScript コードを自動フォーマットする」を参考にしてみてください。

Leave a comment

メールアドレスが公開されることはありません。

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)