JavaScript コードの 7 つの悪い習慣を共有してください。あなたも同じかどうか確認してください。

英文 | https://javascript.plainenglish.io/say-goodbye-to-7-bad-javascript-practices-1de41ca57f0a

私はこれまで働いてきた中で、ひどいコードをたくさん書いてきたので、それをよく知っています。

私の同僚はいつも私のコードを臭いコードだと思っていますが、彼らは私の芸術性を評価していないと思います。そこで今日は私が以前に踏んだ落とし穴を要約し、皆さんがこうした悪い操作を避ける手助けになれば幸いです。

1. コードを 1 行で書いてみます

あら！あなたの同僚になっていただけませんか？

たった 1 行のコードで Web ページのすべての Cookie をクリアしました。すごいと思いませんか?

document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`))

おお！私を許してください！読みやすさはまったくありません。頭が痛くなってきました。おそらくこのようにしたほうがよいでしょう。

const cookies = document.cookie.split(';')
cookies.forEach(cookie => {
  cookie = cookie.replace(/^ +/, '') // 
  cookie = cookie.replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`)
  document.cookie = cookie
})

2. コンソールにエラーを表示する

このコーディングの習慣はありますか? リクエストの成功ステータスのみに注意を払い、失敗したリクエストは無視してください。

デバッグの目的で、私は常にコンソールにエラーメッセージを出力します。

try {
  fetch(url, {
    method: 'post',
    ...
  })
} catch (err) {
  // When the request goes wrong, we don't have any perception
  console.log(err)
}

おそらく、エラーが発生したというわかりやすい警告メッセージをユーザーに提供する必要があるでしょう。

try {
  fetch(url, {
    method: 'post',
    ...
  })
} catch (err) {
  Toast(err.message)
}

3. マジックナンバーを使用する

この魔法の数字を何度も見たことがあると思いますが、実際には何を意味するのでしょうか?

おそらく彼の最初の著者だけがそれを理解できるでしょう！

// index1.js
if (status === 1 || status === 2) {
  // ...
} else if (status === 3) {
  // ...
}


// index2.js
if (status === 1 || status === 2) {
  // ...
}

定数を定義してその意味を表すことができ、明確で簡潔なコメントを追加できれば便利です。

const STATUS = {
  // It is an adult and has real-name authentication
  adultRealName: 1,
  // It is a minor and has real-name authentication
  minorRealName: 2,
  // Not real-name authentication
  notRealName: 3,
  // ...
}


// index1.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
} else if (status === STATUS.notRealName) {
  // ...
}
// index2.js
if ([ STATUS.adultRealName, STATUS.minorRealName ].includes(status)) {
  // ...
}

4. コールバック関数の悪用

今は 2023 年です。これ以上コールバックを乱用すべきではありません。これは恐ろしいことです。

私たちは非常に若いフロントエンド開発エンジニアのようです。

fetch('/a')
  .then((a) => {
    fetch('/b', { a })
      .then((b) => {
        fetch('/c', { b })
          .then((c) => {
            console.log(c)
          })
      })
  })

JavaScript には await キーワードが用意されているので、上記のコードを簡略化してみましょう。

const a = await fetch('/a')
const b = await fetch('/b', { a })
const c = await fetch('/c', { b })


console.log(c)

すごい、これによりコードがよりシンプルになり、読みやすく、保守しやすくなります。

5. 10個のパラメータを関数に設定します

ちょっと大袈裟かもしれませんが、まあ、何が言いたいかというと、多くの引数を渡すように関数を設計すると可読性が悪く、使い方もわかりにくくなるということです。

たとえば、この例では、めまいがして、正しい値を渡す方法がわかりません。

const getUser = (name, weight, mobile, gender, address, hobby, ...) => {
  // ...
  return ...
}


getUser('fatfish', 100, 183, ....)

getUser を再発明する必要があります。そうです、オブジェクトを使用して必要な情報を渡すと、専門家のように見えます。

const getUser = (options) => {
  const { name, weight, mobile, gender, address, hobby, ... } = options
  // ...
  return ...
}


getUser({
  name: 'fatfish',
  weight: 100,
  mobile: 183
  ...
})

6. + 記号を使用して文字列を数値に変換します

+ 記号のみを使用して文字列を数値に変換するのは、非常に簡単に見えます。

const str = '123456'
const num = +str


console.log(num) // 123456

ただし、Number または parseInt を使用する方が、よりセマンティックで明確な選択となるはずです。なぜなら、数値化することが目的であることが分かるからです。

const str = '123456'
const num1 = Number(str)
const num3 = parseInt(str)


console.log({ num1, num2 }) // { "num1": 123456, "num2": 123456 }

7.node_modulesのコードを直接変更します。

おお！これはとんでもないことでしょう。node_modules のコードを直接変更して 3 番目の npm パッケージを解決します。これは git によって無視されているため、コンピューター上にはその部分だけが残っています。

その後、プロジェクトが他の部門に引き継がれた後、私が修正した問題が再び発生しました...

// .gitignore
node_modules/
dist/
// ...

最後に書きます

皆さん、これらの悪い操作がまだ残っている場合は、時間内に調整してください。その他の JavaScript の悪い習慣が残っている場合は、忘れずに時間内に修正してください。同時に、自分が踏んだ穴を踏んでも構いません。オンにして、メッセージエリアでお知らせください。より多くの人がこれらの落とし穴を回避できるように、みんなで共有して、一緒に学び、進歩しましょう。

もっとスキルを学ぶ

以下の公開番号をクリックしてください

JavaScript コードの 7 つの悪い習慣を共有してください。あなたも同じかどうか確認してください。

おすすめ