AppGram 
こんにちは！ヒロケイです。
今回は、見やすいコードを書くための方法を紹介します。
- 他人が書いたコードをレビューするとき、毎回approveだけで終わってしまう
- 自分のコードをレビューしてもらう時、細かい箇所で指摘されてしまい病む
エンジニアになって間もない方、こんな悩みを持つ方も多いのではないでしょうか？
この記事を書いている時点の筆者もエンジニアになってから10ヶ月が経ちましたが、おんなじ悩みを持っています。
明確な正解例がないから、命名が適切かもわからないよ💦
これから紹介することを意識し、コードに少しづつ反映することができれば、間違いなくあなたのコードのレベルは上がっていきます。
今回は、そんな見やすいコードを書く方法の中でも命名に焦点を当ててみていきましょう！
まず一つ目のポイントとして、やりたいことが明確に伝わるような名前をつけましょう！
コードの内容が具体的な名前を考えてみると良いかもしれません。
ユーザーを認証する場合を例に見ていきましょう。
const authUser = () => {
const { authorization, origin } = props.request.headers
if (!jwt.verify(authorization)) {
throw new Error('User not authorized')
}
}この場合、確かにユーザーの認証情報が正しいかどうかを検証していますが、もっと具体的な名前に変えることができるでしょう。
authUserという名前をもっと具体的にしていきましょう！
実際のコードの内容としては、jwtの検証をしていますね。
なので、verifyJwtという名前の方がコードの内容が具体的です。
- 名前に必要な情報は、処理内容
- コードを要約して命名する必要はない
- 処理内容をそのまま正直に命名してあげよう
次に、省略しても良い単語が含まれていないか確認していきましょう！
クライアント側でユーザー情報を取得するリクエストを送信したいとしましょう。
const getUserInfo = async () => {
await fetch("/user/:id", {
method: "GET"
....ここでは、getUserInfoという名前がつけられていますね。
名前に含まれているgetやinfoは、無くても名前に必要な情報は失われていないですね。
- 削ぎ落としても名前に詰め込みたい情報が損なわれないならば、削ぎ落とす
変数が数値だった場合、単位をつけるのも良いでしょう。
名前の情報が明確になります。
const Modal = (delay_ms: number) => {
setTimeout(() => {
return <Modal/>
}, delay)
} 引数のdelayに_msをつけることで、ミリ秒単位で設定するという情報を付け加えることができました。
renderThumbs={() =>
itemImages.map((image, index) => (
<li key={index}>
<ThumbnailImage
url={image.url}
itemName={itemName}
id={image.id}
/>
</li>
))
}mapメソッドを使って配列データをレンダリングする例では、imageという簡潔な名前が使われています。
itemImageの方が適切そうですが、map内でしか使わないという特徴があります。
このようなスコープの短い変数の名前は、最低限のシンプルな名前で良いでしょう！
const itemToManyLimit = 10一度に購入することができるアイテムに限界値を設定することがありますが、そんなとき、maxを使うと情報が明確になります。maxItemとすることで、明確かつ簡潔になりました。
const setRentalPeriod = (first, last) => {
.....
}アイテムを借りる期間を設定する関数を設定するとして、引数にレンタル期間を設定するとしましょう。
こんな時、firstや lastを使うと期間を直感的に把握できて便利です。
命名について少し意識するだけで、コードの質は大幅に良くなります。
ぜひ、今回紹介したポイントを押さえてコードを書いてみましょう。
