ホームページ ウェブフロントエンド jsチュートリアル SOLID をシンプルにする: クリーンなコード原則のための JavaScript ガイド

SOLID をシンプルにする: クリーンなコード原則のための JavaScript ガイド

Aug 26, 2024 pm 09:31 PM

Making SOLID Simple: A JavaScript Guide to Clean Code Principles

私が初めてソフトウェア開発の世界に飛び込み始めたとき、飛び交うあらゆる流行語や概念に圧倒されることがよくありました。特に困難に思えた概念の 1 つは、SOLID 原則でした。それは「真剣な」開発者だけが心配する必要があることのように感じました。しかし、コーディングに慣れてくると、これらの原則は派手なことではなく、数カ月後に髪の毛を抜きたくなくなるようなコードを書くことであることがわかりました。

それでは、JavaScript の SOLID 原則についての私の見解をここに示します。これは、JavaScript を始めるときにあればよかったと思う、実用的で実用的なガイドです。

1. 単一責任原則 (SRP): 1 つの仕事をうまくやり遂げる

それは何ですか?

単一責任の原則は、クラスが変更する理由は 1 つだけであるべきであり、つまり、クラスの仕事または責任は 1 つだけであるべきであると述べています。

現実のアナロジー

お気に入りのコーヒーショップのバリスタを思い浮かべてください。彼らの仕事はコーヒーを作ることです。突然、エスプレッソマシンを修理したり、ペストリーを提供したり、ゴミを出したりしなければならなくなったら、物事は混乱するでしょう。バリスタがコーヒーを作ることに集中するのと同じように、クラスでも 1 つのことをうまくこなすことに集中する必要があります。

JavaScript の例:

ユーザー認証、データ検証、データベース ストレージを処理する User クラスがあると想像してください。やりすぎだよ!これらの責任を個別のクラスに分割することで、コードの管理と保守が容易になります。

class UserAuthenticator {
  login(user) {
    // handle login
  }
}

class UserDataValidator {
  validate(user) {
    // validate user data
  }
}

class UserDatabase {
  save(user) {
    // save user to the database
  }
}
ログイン後にコピー

2. オープン/クローズド原則 (OCP): 拡張し、変更しない

それは何ですか?

オープン/クローズの原則では、ソフトウェア エンティティは拡張に対してはオープンであるが、変更に対してはクローズされるべきであると規定されています。言い換えれば、既存のコードを変更せずに新しい機能を追加できる必要があります。

現実のたとえ:

お気に入りのゲーム機を想像してみてください。新しいゲーム、コントローラー、アクセサリを追加できますが、そのために開いて再配線する必要はありません。同様に、コードのコア構造を変更せずに、コードに新しい機能を追加できる必要があります。

JavaScript の例:

面積を計算するメソッドを備えた Shape クラスがあるとします。三角形などの新しい形状を追加する必要がある場合、既存のクラスを変更する必要はありません。代わりに、拡張してください。

class Shape {
  area() {
    throw "Area method not implemented";
  }
}

class Rectangle extends Shape {
  constructor(width, height) {
    super();
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

class Circle extends Shape {
  constructor(radius) {
    super();
    this.radius = radius;
  }

  area() {
    return Math.PI * this.radius * this.radius;
  }
}
ログイン後にコピー

3. リスコフ置換原則 (LSP): 置換可能にしておく

それは何ですか?

リスコフ置換原則では、プログラムの正確さに影響を与えることなく、スーパークラスのオブジェクトをサブクラスのオブジェクトに置き換えることができる必要があると述べています。

現実のたとえ:

レンタカーを借りることを想像してみてください。セダンでも SUV でも、運転し、操縦し、停止するという車の基本的な機能を備えていることを期待します。レンタカーにまったく異なる制御セットが必要な場合は、大変なことになるでしょう。同様に、サブクラスは、親クラスによって設定された期待を裏切らない方法で動作する必要があります。

JavaScript の例:

Bird クラスとそれを拡張した Penguin クラスがある場合、ペンギンはたとえ飛べなくても Bird のように動作するはずです。まだ歩き、食事をし、おそらく泳ぐこともできるはずです。

class Bird {
  move() {
    console.log("Flies in the sky");
  }
}

class Penguin extends Bird {
  move() {
    console.log("Swims in the water");
  }
}

const myBird = new Bird();
const myPenguin = new Penguin();

myBird.move(); // Flies in the sky
myPenguin.move(); // Swims in the water
ログイン後にコピー

4. インターフェース分離原則 (ISP): オーダーメイドのインターフェース

それは何ですか?

インターフェイス分離原則は、クライアントが使用しないインターフェイスの実装を強制されるべきではないことを示唆しています。大きなインターフェイスを 1 つ持つ代わりに、より小さく、より具体的なインターフェイスを作成する必要があります。

現実のたとえ:

シェフがウェイター、バーテンダー、食器洗い機を兼任するレストランを想像してみてください。それは圧倒的で非効率的です!代わりに、各役割に固有のタスクを持たせる必要があります。同様に、インターフェースも特化され、焦点が絞られている必要があります。

JavaScript の例:

buildHouse、paintHouse、designHouse などのメソッドを含む Worker インターフェイスがある場合、家をペイントするだけの Worker は他のすべてのメソッドを実装する必要はありません。それをより小さなインターフェースに分割します。

class Builder {
  build() {
    console.log("Building house...");
  }
}

class Painter {
  paint() {
    console.log("Painting house...");
  }
}

class Designer {
  design() {
    console.log("Designing house...");
  }
}
ログイン後にコピー

5. 依存性反転原則 (DIP): 抽象化に依存する

それは何ですか?

依存関係逆転の原則では、高レベルのモジュールが低レベルのモジュールに依存すべきではないと述べています。どちらも抽象化に依存する必要があります。

Real-Life Analogy:

Think about how you plug your phone charger into a wall socket. You don’t need to know the details of the electrical wiring inside the walls—all you need is the interface (the socket) to power your device. Similarly, your code should depend on abstractions (interfaces), not concrete implementations.

Example in JavaScript:

If you have a LightBulb class that directly controls a Switch class, you’re creating a tight coupling. Instead, both should depend on an interface like PowerSource.

class LightBulb {
  turnOn(powerSource) {
    powerSource.provideElectricity();
    console.log("Light is on");
  }
}

class Switch {
  constructor(powerSource) {
    this.powerSource = powerSource;
  }

  operate() {
    this.powerSource.togglePower();
  }
}

class PowerSource {
  provideElectricity() {
    console.log("Providing electricity");
  }

  togglePower() {
    console.log("Toggling power");
  }
}
ログイン後にコピー

Conclusion

Mastering the SOLID principles is like learning to cook with a set of proven recipes. Once you understand them, you can whip up code that’s not just functional but elegant and easy to maintain. So next time you find yourself in a coding conundrum, remember: there’s a principle for that!

Happy coding! ?

以上がSOLID をシンプルにする: クリーンなコード原則のための JavaScript ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptエンジン:実装の比較 JavaScriptエンジン:実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptとWeb:コア機能とユースケース JavaScriptとWeb:コア機能とユースケース Apr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1)DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2)ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3)サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScript in Action:実際の例とプロジェクト JavaScript in Action:実際の例とプロジェクト Apr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1)DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2)node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptエンジンの理解:実装の詳細 JavaScriptエンジンの理解:実装の詳細 Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1)エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2)実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3)ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript:コミュニティ、ライブラリ、リソース Python vs. JavaScript:コミュニティ、ライブラリ、リソース Apr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1)Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2)Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3)どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

Python vs. JavaScript:開発環境とツール Python vs. JavaScript:開発環境とツール Apr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1)Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2)JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

See all articles