クリーンな JS コードを記述するにはどうすればよいですか?共有すべき 5 つの書き方のヒント

きれいな JS コードを記述するにはどうすればよいですか?この記事では、きれいな JavaScript を書くための 5 つのヒントを紹介します。

読書の負担を軽減し、創造力を刺激し、JavaScript スキルを簡単に学び、ジム、ラッシュ~

1. 定義されている数値を変更します。定数

次のコードのような数字をよく使います:

const isOldEnough = (person) => {
  return person.getAge() >= 100;
}

この 100 が具体的に何を指すのか誰が知っていますか?通常、この 100 が具体的にどのような値を表すかを推測して判断するには、関数コンテキストを組み合わせる必要があります。

そのような番号が複数ある場合、より大きな混乱を引き起こしやすくなります。

きれいな JavaScript を書く: 数値を定数として定義する

この問題は明確に解決できます:

const AGE_REQUIREMENT = 100;
const isOldEnough = (person) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

さて、定数名を宣言します。 100 が「年齢要件」を意味することがすぐにわかります。変更する場合、すぐに見つけて 1 か所で変更し、複数の場所で反映させることができます。

2. ブール値を関数のパラメーターとして使用しないでください

ブール値をパラメーターとして関数に渡すことは、コードの混乱を引き起こしやすい一般的な記述方法です。

const validateCreature = (creature, isHuman) => {
  if (isHuman) {
    // ...
  } else {
    // ...
  }
}

関数にパラメータとして渡されるブール値は、明確な意味を表現できません。この関数が判断を行って 2 つ以上の状況を生成することを読者に伝えることしかできません。

ただし、私たちは関数に対して単一責任の原則を提唱しているため、次のようにします。

クリーンな JavaScript を作成する: 関数パラメーターとしてブール値を使用しないでください

const validatePerson = (person) => {
  // ...
}
const validateCreature = (creature) => {
  // ...
}

3. 複数の条件をカプセル化する

私たちはよく次のようなコードを書きます:

if (
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden"
) {
  // ...
}

不可能ではありませんが、時間が経つとこれらの判断が理解できなくなります。正確には何を行うので、これらの条件を変数または関数でカプセル化することをお勧めします。

きれいな JavaScript を書く: 複数の条件をカプセル化する

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "simon" &&
  person.getOrigin() === "sweden";
if (isSimon) {
  // ...
}

または

const isSimon = (person) => {
  return (
    person.getAge() > 30 &&
    person.getName() === "simon" &&
    person.getOrigin() === "sweden"
  );
};
if (isSimon(person)) {
  // ...
}

ああ、これらの条件は、この人が Simon であるかどうかを判断するためのものであることがわかりました。 ~

この種のコードは宣言型コードであり、より読みやすくなっています。

4. 否定的な判断条件を避ける

条件付き判断において、否定的な判断を使用すると、思考の負担がさらに大きくなります。

たとえば、次のコードでは、条件 !isCreatureNotHuman(creature)

が二重否定になっているため、少し読みにくくなっています。

const isCreatureNotHuman = (creature) => {
  // ...
}

if (!isCreatureNotHuman(creature)) {
  // ...
}

きれいなJavaScriptを書く：否定的な判定条件を避ける

以下のような書き方ルールに書き換えると読みやすくなります。大量のコード ロジックでは、多くの場所でこの原則に従うことが間違いなく役立ちます。

コードを読むとき、何度もただ読んで読んでいます。「悪い」書き方を見ると、もう我慢できなくなります。詳細が重ね合わされ、千マイルの堤防が崩壊します。アリの巣。

const isCreatureHuman = (creature) => {
  // ...
}
if (isCreatureHuman(creature)) {
  // ...
}

5. if...else...

この点は常に強調されてきました:

たとえば、次のコード:

if(x===a){
   res=A
}else if(x===b){
   res=B
}else if(x===c){
   res=C
}else if(x===d){
    //...
}

マップとして書き換え:

let mapRes={
    a:A,
    b:B,
    c:C,
    //...
}
res=mapRes[x]

別の例は次のコードです:

const isMammal = (creature) => {
  if (creature === "human") {
    return true;
  } else if (creature === "dog") {
    return true;
  } else if (creature === "cat") {
    return true;
  }
  // ...
return false;
}

配列として書き換え:

const isMammal = (creature) => {
  const mammals = ["human", "dog", "cat", /* ... */];
  return mammals.includes(creature);
}

JavaScript をきれいに書く: 大量の if...else...

コード内に if...else... が大量にある場合は、もう 1 ステップ考えて、コードを少し変更できるかどうかを確認してください。「よりクリーン」に見えます。

---

まとめ: 上記のテクニックは、例で言及する価値がないように思えるかもしれませんが、実際のプロジェクトでは、ビジネス ロジックが複雑になり、コード量が多くなった場合、これらのヒントは確実にプラスの効果をもたらします。そして想像を超えて助けてください。

[関連する推奨事項: JavaScript 学習チュートリアル]

###

以上がクリーンな JS コードを記述するにはどうすればよいですか?共有すべき 5 つの書き方のヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。