ホームページ >ウェブフロントエンド >jsチュートリアル >クリーンなコードを理解する: 関数 ⚡
クリーンなコードを理解する: 関数 ⚡
- WBOYオリジナル
- 2024-08-16 06:11:36658ブラウズ
ソフトウェア開発では、関数はアプリケーションの構成要素です。これらは、ロジックを構造化し、動作をカプセル化し、複雑なタスクを管理可能な部分に分割する主な方法です。
ただし、すべての機能が同じように作成されるわけではありません。 Clean Code の第 3 章では、小規模で焦点を絞った、1 つのことをうまく実行するタスクを書くことに焦点を当てています。
この記事では、これらの原則を詳しく説明し、それを JavaScript に適用する方法を検討します。
?1．小さな機能: 少ないほど良い
クリーン コードの核となる原則の 1 つは、関数は小さくあるべきだということです。
しかし、この文脈での「小さい」とは何を意味するのでしょうか?著者は、通常はわずか数行の長さの関数を推奨しています。
小さな関数のほうが理解しやすく、テストし、保守しやすいという考えです。
JavaScript の例を見てみましょう:
// Bad Example: A large, unfocused function
function processOrder(order) {
applyDiscount(order);
calculateShipping(order);
calculateTax(order);
generateInvoice(order);
sendConfirmationEmail(order);
updateInventory(order);
}
この関数は簡単そうに見えますが、やりすぎです。これらの各タスクは、独自の機能に分割できますし、分割する必要があります。
// Good Example: Small, focused functions
function processOrder(order) {
applyDiscount(order);
calculateShipping(order);
calculateTax(order);
generateInvoice(order);
sendConfirmationEmail(order);
updateInventory(order);
}
function applyDiscount(order) {
// Discount logic
}
function calculateShipping(order) {
// Shipping calculation logic
}
function calculateTax(order) {
// Tax calculation logic
}
function generateInvoice(order) {
// Invoice generation logic
}
function sendConfirmationEmail(order) {
// Email sending logic
}
function updateInventory(order) {
// Inventory update logic
}
改訂された例では、各関数が 1 つのことを実行するため、コードが読みやすく、保守しやすくなります。
processOrder 関数は高レベルのオーケストレーターとして機能するようになり、より小規模でより焦点を絞った関数が詳細を処理します。
?2．一つのことをする
関数は 1 つのことを実行し、それを適切に実行する必要があります。複数のタスクを実行する関数を作成している場合は、それをより小さな関数にリファクタリングする必要があることを示しています。
これが例です:
// Bad Example: A function doing multiple things
function formatAndSendEmail(email, subject, message) {
const formattedMessage = `<html><body>${message}</body></html>`;
sendEmail(email, subject, formattedMessage);
}
この関数は簡潔に見えますが、メッセージのフォーマットと電子メールの送信という 2 つのことを実行します。代わりに、それを分解してみましょう:
// Good Example: Functions doing one thing
function formatMessage(message) {
return `<html><body>${message}</body></html>`;
}
function sendFormattedEmail(email, subject, message) {
const formattedMessage = formatMessage(message);
sendEmail(email, subject, formattedMessage);
}
各関数が単一の責任を持つようになり、コードのテストと再利用が容易になります。
formatMessage 関数は、電子メール送信ロジックとは独立してテストできます。
?3．副作用を避ける
関数は副作用を最小限に抑える必要があります。つまり、関数はシステムの状態を予期しない方法で変更してはなりません。副作用のある関数は、デバッグや推論が難しくなる可能性があります。
これが例です:
// Bad Example: A function with a side effect
let globalCounter = 0;
function incrementCounter() {
globalCounter++;
}
incrementCounter 関数はグローバル状態を変更するため、注意深く管理しないとバグが発生する可能性があります。
より良いアプローチは、新しい値を返し、それをどうするか呼び出し元に決定させることです。
// Good Example: Avoiding side effects
function incrementCounter(counter) {
return counter + 1;
}
globalCounter = incrementCounter(globalCounter);
副作用を回避することで、関数がより予測可能になり、操作が容易になります。
?4．単一レベルの抽象化
関数は単一の抽象レベルで動作する必要があります。同じ関数内にさまざまな詳細レベルを混在させると、理解が難しくなる可能性があります。
例:
// Bad Example: Mixed levels of abstraction
function getUserData(userId) {
const user = database.fetchUserById(userId); // Low-level
return `${user.firstName} ${user.lastName} (${user.email})`; // High-level
}
ここで、関数は低レベルのデータベースの取得とユーザー データの高レベルのフォーマットを組み合わせています。
これらの懸念事項を分離することをお勧めします:
// Good Example: Single level of abstraction
function getUser(userId) {
return database.fetchUserById(userId);
}
function formatUserData(user) {
return `${user.firstName} ${user.lastName} (${user.email})`;
}
const user = getUser(userId);
const formattedUserData = formatUserData(user);
各関数は単一の抽象レベルで動作するため、コードがより明確になり、保守が容易になります。
結論 ⚡
クリーンな関数を書くことは、保守可能なコードを書くための基礎です。
関数を小さく保ち、関数が 1 つのことを実行するようにし、副作用を回避し、単一レベルの抽象化を維持することにより、読みやすく、理解し、保守しやすいコードを作成できます。
JavaScript のスキルを磨き続けるときは、クリーン コードのこれらの原則を念頭に置いて、単純さと明確さの芸術を真に体現する関数を作成してください。
以上がクリーンなコードを理解する: 関数 ⚡の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。