なぜ JavaScript は面倒ではないのでしょうか?

フロントエンド開発が面倒だという話を聞くと、特に JavaScript は「何でも受け入れ」、複数のアプローチが同じ結果につながるため、まとまりのないコードが許容されるという主張を聞くと、非常に腹が立ちます。

実際、この批判には十分な根拠があります。 同じ目的を達成するために、さまざまな方法で JavaScript を記述することは可能です。

フロントエンド (JavaScript) とバックエンドの主な違いは、デザイン パターンの定義にあります。 バックエンドでは、フレームワークと規約が広く採用されています。フロントエンドでは、優れたプラクティスと標準が分散されているため、相違が生じ、特に初心者にとっては理解を困難にしています。 著者である私にも独自の意見があります。

---

核心

このように明らかに構造が欠如しているにもかかわらず、これはパターンが存在しない、あるいはパターンを探すべきではないという意味ではありません。 JavaScript には、明確に定義されたリソースと標準が多数あり、さまざまな Web サイトやドキュメント (Mozilla Docs JS など) で入手できます。 重要なのは、これらの概念を学び、正しく適用することに時間を費やすことです。

---

実践例

実稼働プロジェクトから抜粋した以下のコードは機能しますが、そのアプローチを最適化して読みやすさとパフォーマンスを向上させることができます。 基本的な JavaScript 機能 (配列とオブジェクト) を使用してこれをリファクタリングして、改善を説明しましょう。

API から受信したデータを表す以下のオブジェクトには、新しい「ラベル」フィールド (プレフィックス「Opened」ストア名) が必要です。

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

reduce、forEach、push を使用するこの最初の実装は、効率が低くなります。

<code>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"
    }
]</code>

不必要な複雑さに注意してください。 flatMap と map を使用した以下の解決策は、より簡潔で効率的です。

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

flatMap は配列を「平坦化」し、map は各項目に「ラベル」フィールドを追加します。

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

---

結論

JavaScript は、高品質のコードのための強力なツールを提供します。 その秘訣は、これらのリソースを研究して正しく適用し、性急で計画外の開発を回避することです。

---

読書提案:

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

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