Newer
Older
hello-programmer-world / src / pages / tips / naming.mdx
@h.sakamoto h.sakamoto 5 days ago 2 KB tips
---
layout: "@/layouts/MarkdownLayout.astro"
---

export const title = "名前を適切につける";

# {title}

## TOC

## ストーリー

この関数は現実世界のなにかを計算を表していますが、なんだと思いますか?

```js
function doSomething(value) {
  return value * 1.1;
}
```

<br />

正解は・・・

・・・

・・・

タクシー代の深夜料金の計算でした。  
消費税込みの計算ではありません。

```js "1.1"
function doSomething(value) {
  return value * 1.1;
}

console.log(doSomething(1000)); // 1100
```

この`1.1`という数字がなにかを書いていなかったので、このような誤解を与えてしまいました。

<br />

この`1.1`という数字に`深夜料金倍率`という名前をつけてみましょう。

```js "深夜料金倍率" {1}
const 深夜料金倍率 = 1.1;

function doSomething(value) {
  return value * 深夜料金倍率;
}

console.log(doSomething(1000)); // 1100
```

<br />

こうなると、この関数自体がなにをしているのかが明確になります。  
`doSomething`という曖昧な名前も、なにをする関数なのかがわかる名前に変えたくなりますね。  
引数の名前も同様に名前を変えてしまいましょう。

```js "calculateMidnightTaxiFare" {3, 6}
const 深夜料金倍率 = 1.1;

function calculateMidnightTaxiFare(通常料金) {
  return 通常料金 * 深夜料金倍率;
}
console.log(calculateMidnightTaxiFare(1000)); // 1100
```

## まとめ

### マジックナンバーを避ける

マジックナンバーとは、ソースコードの中に直接書かれた数値のことです。  
コメントがない限り、その数値がなにを意味しているのかがわかりません。

こういった数値には意味のある名前をつけて、他の人が見てもわかるようにしましょう。  
ここを怠るとき、最終的に困るのはあなた自身です。

```js "1.1" del={4} add={1,5} showLineNumbers=false
const 深夜料金倍率 = 1.1;

function doSomething(value) {
  return value * 1.1;
  return value * 深夜料金倍率;
}
```

### 曖昧な名前を避ける

変数名や関数名は、その名前から具体的にな意味がわかるようにしましょう。

今回の例では、`doSomething`、すなわち「なにかをする」という名前は曖昧すぎます。  
修正後の`calculateMidnightTaxiFare`、すなわち「深夜のタクシー料金を計算する」という名前は具体的でわかりやすいです。

```js del={3,5} add={4,6} showLineNumbers=false
const 深夜料金倍率 = 1.1;

function doSomething(value) {
function calculateMidnightTaxiFare(通常料金) {
  return value * 深夜料金倍率;
  return 通常料金 * 深夜料金倍率;
}
```