20
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Last updated at Posted at 2022-07-04

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

if文関連

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

条件文が長い時

条件文自体を定数に入れ、コードを読みやすくします。

// 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文を使っていないか再確認します。

// 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)

簡単な実行文なら論理演算子を活用します。

if (foo) {
  doSomething();
}

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

// 論理演算子を活用するとif文を省略できます。
foo && doSomething();

switch文を回避する、無駄なif文を重複を回避する

// 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')); // ケロケロ

変数関連

変数の名前に迷う時

変数や関数の役割、内容を具体的に決めます。
命名についてはとても広い範囲になるのでここでは割愛させていただきますが、英語の微妙なニュアンス違いを確認すると悩む時間を減らしたことはありました。

おすすめリンク

引数

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

// 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 });
};
// bad
const a = foo[0];
const b = foo[1];

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

最後に

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

参考資料

Youtube

ウェブサイト

20
12
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
12

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?