【初心者向け】今すぐ使えるJavascript クリーンコード簡単TIP

この記事では、文法自体よりもコード作成中によく出会う状況にごとにペストプラクティスをまとめています。

## if文関連
個人的な意見ですが、if文の周りで迷う時は大体ロジック自体を見直すことでリファクタリングができました。
不要なif文を使ってないか、いらないロジックを追加してないか、などを検討します。

### 条件文が長い時
条件文自体を定数に入れ、コードを読みやすくします。
```jsx
// bad
const a = 'dog'
if (a === 'dog' || a === 'cat' || a === 'fish' ) {
	doSomething()
}


// better
const isPet = a === 'dog' || a === 'cat' || a === 'fish';
                      
if (isPet){
   doSomething()
}

```
### if分文が多い、二重、三重if文を使っている時
不要なif文を使っていないか再確認します。
```jsx
// bad
function canDrink(person) {
  if (person?.age != null) {
    if (person.age < 18) {
    console.log("飲めません！");
    } else if (person.age < 21) {
    console.log("アメリカでは飲めません!");
    } else {
      console.log("かんぱーい！🍻");
    }
  } else {
    console.log("人ではありません🙅‍♀️")
  }
}

  
// better
function canDrink(age) {
  if (age < 18) return "飲めません！"
  if (age < 21) return "アメリカでは飲めません！"
  return "かんぱーい！🍻"
}


const result = canDrink(person.age)
console.log(result)
```

簡単な実行文なら論理演算子を活用します。
```jsx
if (foo) {
  doSomething();
}

// {}を省略できます。
if (foo) doSomethig();

// 論理演算子を活用するとif文を省略できます。
foo && doSomething();
```
### switch文を回避する、無駄なif文を重複を回避する
```jsx
// bad
function getSound(animal) {
  if (animal === 'dog') return 'わんわん';
  if (animal === 'cat') return 'にゃん';
  if (animal === 'frog') return 'ケロケロ';
  return '配列にない動物だよ！';
}

console.log(getSound('dog')); // わんわん
console.log(getSound('frog')); // ケロケロ


// better
function getSound(animal) {
  const sounds = {
    dog: 'わんわん',
    cat: 'にゃん',
    frog: 'ケロケロ',
  };
  return sounds[animal] || '配列にない動物だよ！';
}

console.log(getSound('dog')); // わんわん
console.log(getSound('frog')); // ケロケロ
```
## 変数関連
### 変数の名前に迷う時
変数や関数の役割、内容を具体的に決めます。
命名についてはとても広い範囲になるのでここでは割愛させていただきますが、英語の微妙なニュアンス違いを確認すると悩む時間を減らしたことはありました。

**おすすめリンク**
- [プログラミングでよく使う英単語のまとめ【随時更新】
](https://qiita.com/Ted-HM/items/7dde25dcffae4cdc7923)
- [メソッド名、迷った時に参考にできる単語一覧](https://blog.77jp.net/guidelines-for-variables-and-method-names-summary)
- [メソッド名・変数名などに使用する英語の使い分けついてのガイドライン](https://qiita.com/uenosy/items/fd905d674324b8bc5517)

### 引数
二つ以上の変数を入れないことをおすすめします。
引数が二つ以上になる場合、変数たちを合わせるか関数を分けます。
オブジェクトを変数に指定する時、分割代入を活用もできます。

```jsx
// bad
const tooMuchParams = (foo, bar, zoo, hoge) => {
  console.log(foo, bar, zoo, hoge);
};

// better
const options = { foo, bar, zoo, hoge };
const oneParams = ({ options }) => {
  console.log({ options });
};
```

```jsx
// bad
const a = foo[0];
const b = foo[1];

// better
const [a, b] = foo;
```

## 最後に
クリーンコードの本ではクリーンコードを書くことがとても難しいと何回も強調しています。実際、本を読んでいても「これをどうやって私のコードに適用できるんだ？」と思うことが多かったです。関数は一つの役割を行うこと、変数名は正確に決めること...などなど、理論的には分かっていても、それを適用できることはまた別の話になりますね。
そこで、全体的なガイドラインよりも、業務で先輩たちや上司からいただいたフィードバックと自分がぶつけながら得た今すぐ使える内容をまとめました。
基礎的な内容ではありますが、この内容を整理して振り返ってみると新人の頃もっと早く分かっていればよかったな...と思ったので、Qiitaに共有します。
今後学びが増えたら内容が追加されるかも...


## 参考資料
### Youtube
- [Why I Don't Use Else When Programming](https://www.youtube.com/watch?v=EumXak7TyQ0)
- [10 JavaScript Clean Code Examples](https://www.youtube.com/watch?v=-d-jrxy6YbE)

### ウェブサイト
- [Is it safe to split long JavaScript if conditions into multiple lines?](https://stackoverflow.com/questions/29154339/is-it-safe-to-split-long-javascript-if-conditions-into-multiple-lines)
- https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
- https://github.com/ryanmcdermott/clean-code-javascript