ちゃんなるぶろぐ

エンジニア5年生🧑‍💻 オライリーとにらめっこする毎日。

【ポイント5選!】高品質なコードを書く〜JavaScript・TypeScript〜

どうも、ちゃんなるです🐻 最近は社内のレガシーフロントエンドを刷新する活動に精を出しています🔥

おそうじ業者TypeScript

今回は「品質の高いTypeScriptコード」というテーマです✨ 実例とともに品質の良い書き方を紹介します。

※TypeScript以外の言語でも使える、一般的な知識です👍

不要なコンテキストを与えないこと

object、class、typeのオブジェクトの名前で伝わる情報は、そのオブジェクト内のプロパティには持たせないこと。

悪い例❌

type Cake = {
  cakeMake: string
  cakeFlavor: string
  cakeTopping: string
}

いい例⭕️

type Cake = {
  make: string
  flavor: string
  topping: string
}

cakeはtypeの名前からわかるので冗長なのです。

否定条件は避けること(肯定にすること)

悪い例❌

if (isUserNotActive(user)) {
  ...
}

いい例⭕️

if (!isUserActive(user)) {
  ...
}

関数名には「何をするか」を付けること

悪い例❌

function addToDate(date: Date, month: number): Date {
  ...
}

const nowDate = new Date()
addToDate(nowDate, 1)

addToDateの呼び出し箇所だけ見ると「1って何だろう。日?週?月?」となりそうです💦

いい例⭕️

function addMonthToDate(date: Date, month: number): Date {
  ...
}

const nowDate = new Date()
addMonthToDate(nowDate, 1)

きちんと月であることを明示してあげましょう👍

命令的よりも宣言的に記述すること

参加者participants支払い総額平均年齢を集計しましょう。

const participants = [
  {
    name: 'Ace',
    payment: 500,
    age: 10
  },
  {
    name: 'Bob',
    payment: 1000,
    age: 20
  },
  {
    name: 'Chris',
    payment: 10000,
    age: 30
  },
  ...
]

悪い例❌

const participantsCount = participants.length
let totalPayment = 0
for (let i = 0; i < participantsCount; i++) {
  totalPayment += participants[i].payment
}

let averageAge = 0
for (let i = 0; i < participantsCount; i++) {
  averageAge += participants[i].age
}
averageAge /= participantsCount

ざっくり言うと、再代入できる変数宣言(varlet)をしない、つまり再代入させないことです。上記例ではまとまった計算処理をベタがきしているので、関数としてまとめた方がより良いですね👀

いい例⭕️

const totalPayment = participants.reduce((total, participant) => total + participant.payment, 0)
// reduce関数は分かりづらいという意見もあるのでこれが正解ではないでしょう。下のように関数化してもいいですね。

const averageAge = calculateAverageAge(participants)
// 平均年齢の計算処理は関数としてどこかにまとめておく想定です。

ポイントはconstで変数宣言することです。これにより宣言的に記述できます👍

typeとinterfaceの使い分け

chan-naru.hatenablog.com

まとめと課題

今回は5つに絞って紹介しましたが、他にも数えきれないほどたくさんのポイントがあります(筆者自身、分かってないことだらけです💦)

今後も高品質なコードを書く方法を学び続けるので、皆さんにもシェアします〜

関連資料

javascript.plainenglish.io

angularexperts.io