【ポイント5選!】高品質なコードを書く〜JavaScript・TypeScript〜
どうも、ちゃんなるです🐻 最近は社内のレガシーフロントエンドを刷新する活動に精を出しています🔥
今回は「品質の高いTypeScriptコード」というテーマです✨ 実例とともに品質の良い書き方を紹介します。
※TypeScript以外の言語でも使える、一般的な知識です👍
- 不要なコンテキストを与えないこと
- 否定条件は避けること(肯定にすること)
- 関数名には「何をするか」を付けること
- 命令的よりも宣言的に記述すること
- typeとinterfaceの使い分け
- まとめと課題
- 関連資料
不要なコンテキストを与えないこと
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
ざっくり言うと、再代入できる変数宣言(var
やlet
)をしない、つまり再代入させないことです。上記例ではまとまった計算処理をベタがきしているので、関数としてまとめた方がより良いですね👀
いい例⭕️
const totalPayment = participants.reduce((total, participant) => total + participant.payment, 0) // reduce関数は分かりづらいという意見もあるのでこれが正解ではないでしょう。下のように関数化してもいいですね。 const averageAge = calculateAverageAge(participants) // 平均年齢の計算処理は関数としてどこかにまとめておく想定です。
ポイントはconst
で変数宣言することです。これにより宣言的に記述できます👍
typeとinterfaceの使い分け
まとめと課題
今回は5つに絞って紹介しましたが、他にも数えきれないほどたくさんのポイントがあります(筆者自身、分かってないことだらけです💦)
今後も高品質なコードを書く方法を学び続けるので、皆さんにもシェアします〜