なぜ JavaScript は混乱しないのでしょうか?

それはいつも私を落胆させます...

フロントエンド開発がめちゃくちゃだという話を聞くと、特に JavaScript は「何でも受け入れられ」、最終結果に影響を与えることなくどのような方法でも記述できるという意見を聞くと腹が立ちます。

実際、これは完全に誤りではありません。 JavaScript では同じ目標を達成するために複数のアプローチが可能であることは事実です。

問題は、バックエンドと同様に明確に定義されたデザインパターンが欠如していることにあります。 フロントエンドでは、ベスト プラクティスが分散しており、意見の多様性と統一性の欠如が生じています。 この分散により、特に初心者にとって開発と理解が困難になります。 これを書いた人にも自分の意見があります。

---

重要なポイント…

不満を超えて、良い実践の証拠がないからといって、それが存在しないという意味ではないことを強調したいと思います。 知識を求め、少なくともデザインパターンの基本を適用することが重要です。 JavaScript には、確立された実装とパターンを持つリソースが多数あります。その目的と適切な使用方法を読んで理解するには時間がかかります。 例: JavaScript 用の Mozilla ドキュメント

---

実際的な例…

次のコードは、運用中の実際のプロジェクトからのものです。正しく動作しますが、実装すると読みやすさとパフォーマンスが向上する可能性があります。

より効率的なメソッドと関数を使用して、JavaScript ドキュメントの推奨事項に合わせて一部の部分を調整します。 基本的な概念である配列とオブジェクトの操作に焦点を当てます。コードは教育目的のために簡略化されています。

バックエンド API から受信したデータを表すオブジェクトから始めましょう:

const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]

「Opened」というプレフィックスの後にストア名が続く「ラベル」フィールドを追加する必要があります。

まず、最高の JavaScript ツールを使用しない「あまり理想的ではない」実装を見てみましょう。

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// resultado:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

リストを再構成するために、.reduce、.forEach、および .push を調べます。 .flatMap と .map が使用されていないことは明らかです。 構文は混乱しており、冗長です。

改善された実装を見てみましょう:

storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})

もっと簡単ですよね?

.flatMap オブジェクトの配列を単一レベルに「平坦化」します:

[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]

次に、.map 配列を「再マップ」し、「label」プロパティを追加します。

[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

---

結論…

JavaScript は、高品質のコードを作成するためのツールを提供します。 重要なのは、プログラミングのためのプログラムではなく、それを学び、概念を正しく適用することです。

---

推奨事項を読む:

• [PT-BR] - https://www.php.cn/link/729404b28f3bd32761c667a668453f4c
• [EN] - https://www.php.cn/link/f5c80b20fdee4e645ff315a56f12a716

以上がなぜ JavaScript は混乱しないのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。