メンテナンス可能なJSコードの書き方を教えます

保守可能なコードとは何ですか?

保守可能なコードは、次の特性に従う必要があります。

1. 理解可能性 - 他の人がコードを理解し、その意図と全体的な流れを理解できます。
2. 直感性 - 操作がどんなに複雑であっても、コードは一目で理解できるものでなければなりません。
3. 適応性 - コードは、データの変更によって完全に書き直す必要がないように記述されます。
4. スケーラビリティ - コード アーキテクチャは、コア機能の将来の拡張を可能にするように設計されています。
5. デバッグ可能性 - 何か問題が発生した場合、コードは問題を迅速かつ直接的に見つけるのに十分な情報を提供します。

コード規約

コードを保守可能にする簡単な方法は、JavaScript コードの一連の記述規則を開発することです。 JavaScript は適応性に優れているため、コーディング規則が重要です。次のサブセクションでは、コーディング規則の概要について説明します。

1. 読みやすさ

コードを保守可能にするには、まず読みやすくする必要があります。読みやすさの大部分はコードのインデントに関係しています。きちんとインデントされたコードでは、コード ブロックがどの関数に属しているかが一目でわかります。非常に一般的なインデントのサイズは 4 スペースです。現在、ほとんどのエディターはコードの 1 行フォーマットもサポートしています。読みやすさのもう 1 つの側面はコメントです。一般的に、コメントが必要な場所がいくつかあります。

• 関数とメソッド - 各メソッドまたは関数には、その目的とタスクを実行するために使用するアルゴリズムを説明するコメントを含める必要があります。
• 大きなコード ブロック - 単一のタスクを実行する複数行のコードの前には、そのタスクを説明するコメントを記述する必要があります。
• 複雑なアルゴリズム - 独自の方法を使用して問題を解決し、その方法を説明する注釈が付けられます。
• ハックブラウザ互換性処理。

2. 変数と関数の命名

日常の開発で最も面倒なのは、クラスの命名であれ、変数やメソッドの命名であれ、命名です。そのため、命名を支援するために、翻訳ソフトウェアに頼らなければならないこともあります。変数と関数に適切な名前を付けることは、コードの理解しやすさと保守性を高めるために非常に重要です。命名規則は一般的に次のようになります。

• 変数名は、車や人などの名詞にする必要があります。
• 関数名は getName() などの動詞で始まる必要があります。
• ブール型を返す関数は通常、isEnable() のように is で始まります。
• 定数は、MAX_LENGTH のようにすべて大文字で記述する必要があります。

3. 透過的な変数型

JavaScript の変数は型指定が緩いため、変数に含まれるデータの型を忘れがちです。適切な名前を付けることで、この問題をある程度軽減できますが、すべての場合に十分というわけではありません。変数データを使用してデータ型を表す方法は他に 3 つあります。

3.3.1 初期化

変数を定義するときは、将来どのように使用されるかを示す値で初期化する必要があります。

//初期化によって変数の型を指定します var found=false; //ブール型 var count=-1; //数値型 var name=""; //文字列 var person=null; //オブジェクト

3.3.2. ハンガリー記法による変数型の指定

ハンガリー記法では、変数名の前に、データ型を示す 1 つ以上の文字が付きます。 JS で最も伝統的なハンガリー記法では、0 はオブジェクト、s は文字列、i は整数、f は浮動小数点数、b はブール型という 1 つの文字を使用して基本型を表します。

// データ型を指定するためのハンガリアン記法 var bFound // ブール値 var iCount; // 数値 var sName; // 文字列 var oPerson; // オブジェクト

ハンガリアン記法の利点は関数パラメータも使用できることですが、欠点はコードが読みにくくなることです。

3.3.3. 型注釈の使用

変数の型を指定する最後の方法は、型注釈を使用することです。型注釈は、変数名の右側、初期化の前に配置されます。

// 型を指定するための型注釈 var found /*Boolean*/ = false;
var count /*int*/ = 10;
var name /*文字列*/ = "Tom";
var person /*オブジェクト*/ = null;

デメリット: 複数行のコメントはコードブロックと競合する

変数のデータ型を指定するためのこれら 3 つの一般的な方法には、それぞれ長所と短所があります。自分のプロジェクトに基づいて評価してから、使用してください。TypeScript の使い方を学ぶこともできます。

疎結合

アプリケーションの一部が他の部分に過度に依存している場合、コードが厳格になりすぎて保守が困難になることがあります。 Web アプリケーション テクノロジでは、コードが密結合になりすぎる状況が多く発生するため、このような状況を避け、可能な限り疎結合のコードを維持する必要があります。

1. HTML/JavaScriptを分離する

HTML 内で直接 JavaScript を使用したり、インライン コードで <script> 要素を使用したり、HTML 属性を使用してイベント処理順序を割り当てたりすることは、すべて密接に結合されすぎています。

次のコードを見てください

<button onclick="doSomeThing()">クリックしてください</button>

この例では、doSomeThing() 関数が使用可能になる前にボタンが押され、ボタンの動作を変更すると HTML と JS の両方に影響し、保守性に影響するため、JS エラーが発生する可能性があります。

同様に、jsには多くのHTMLが含まれています

// HTML と JS を密接に結合する関数 insertMessage(){
  document.getElementById('container').innerHTML='<div>Hello World</div>'
}

このコード メソッドは、コード ブロックを動的に生成し、ページに挿入します。コード内のエラーを見つけるのは困難な場合がよくあります。

HTML と JavaScript を分離すると、デバッグの時間が節約され、エラーの原因を特定しやすくなり、メンテナンスの労力が軽減されます。動作を変更するには JavaScript ファイルを変更するだけで済み、マークアップを変更するにはレンダリングされたファイルを変更するだけで済みます。

2. CSS/JavaScriptを分離する

もう 1 つの Web レイヤーは CSS で、主にページの表示を担当します。 JavaScript と CSS も非常に密接に関連しています。どちらも HTML の上にレイヤー化されているため、一緒に使用されることがよくあります。ただし、HTML と JavaScript と同様に、CSS と JavaScript も密接に結合しすぎる可能性があります。密結合の最も一般的な例は、次のように JavaScript を使用して一部のスタイルを変更することです。

// CSS と JavaScript の密結合 element.style.color = "red"; 
element.style.backgroundColor = "青";

このような CSS スタイルの直接的な変更に遭遇した場合、要素タグのクラス名を直接変更することで、スタイルをより便利に制御できます。

3. アプリケーションロジックとイベントハンドラを分離する

通常、各 Web アプリケーションには多数の異なるイベントをリッスンする多数のイベント ハンドラーがあります。しかし、アプリケーション ロジックをイベント ハンドラーから分離するほど注意深い人はほとんどいません。次の例を考えてみましょう。

関数handleKeyPress(イベント) {
        イベント = EventUtil.getEvent(イベント);
        イベントキーコードが13の場合
            var ターゲット = EventUtil.getTarget(イベント);
            var 値 = 5 * parseInt(target.value);
            （値＞10）の場合{
                document.getElementById("error-msg").style.display = "ブロック";
            }
        }
    }

このイベント ハンドラーには、アプリケーション ロジックだけでなく、イベントの処理も含まれています。このアプローチには2つの問題があります。まず、イベント以外でアプリケーション ロジックを実行する方法がないため、デバッグが困難になります。期待した結果が得られなかった場合はどうなりますか?これは、イベント ハンドラーが呼び出されなかったことを意味しますか、それともアプリケーション ロジックが失敗したことを意味しますか?次に、後続のイベントが同じアプリケーション ロジックをトリガーする場合、機能コードを複製するか、別の関数に抽出する必要があります。いずれにしても、実際に必要な変更よりも多くの変更を加えることになります。

より良いアプローチは、アプリケーション ロジックとイベント ハンドラーを分離して、それぞれが独自の処理を処理するようにすることです。イベント ハンドラーは、イベント オブジェクトから関連情報を抽出し、その情報をアプリケーション ロジックを処理するメソッドに渡す必要があります。たとえば、前のコードは次のように書き直すことができます。

 関数validateValue(値) {
        値 = 5 * parseInt(値);
        （値＞10）の場合{
            document.getElementById("error-msg").style.display = "ブロック";
        }
    }

    関数handleKeyPress(イベント) {
        イベント = EventUtil.getEvent(イベント);
        イベントキーコードが13の場合
            var ターゲット = EventUtil.getTarget(イベント);
            ターゲット値を検証します。
        }
    }

アプリケーションとビジネス ロジック間の疎結合に関するいくつかの原則:

• イベント オブジェクトを他のメソッドに渡さず、イベント オブジェクトから必要なデータのみを渡します。
• アプリケーション レベルで実行できるアクションは、イベント ハンドラーを実行しなくても実行できる必要があります。
• すべてのイベント ハンドラーはイベントを処理し、その処理をアプリケーション ロジックに渡す必要があります。

これらのいくつかの点を念頭に置くことで、あらゆるコードの保守性が大幅に向上し、さらなるテストと開発の可能性が広がります。

プログラミング練習

保守可能な JavaScript を書くには、コードのフォーマット方法だけではなく、コードが何を行うかも考慮する必要があります。エンタープライズ環境で作成される Web アプリケーションは、多くの場合、同時に作業する多数の人々によって作成されます。この場合の目標は、すべてのユーザーがブラウザ環境に対して一貫した不変のルールを持つようにすることです。したがって、次のプログラミング手法のいくつかに従うことをお勧めします。

1. オブジェクトの所有権を尊重する

JavaScript の動的な性質により、ほぼすべてのものをいつでも変更できます。おそらく、エンタープライズ環境における最も重要なプログラミング手法は、オブジェクトの所有権を尊重することです。つまり、所有していないオブジェクトを変更することはできません。簡単に言えば、オブジェクト、そのオブジェクト、またはそのメソッドの作成または保守の責任を負っていない場合は、それらを変更することはできません。具体的には:

• インスタンスやプロトタイプにプロパティを追加しないでください。
• インスタンスやプロトタイプにメソッドを追加しないでください。
• 既存のメソッドを再定義しないでください。

2. グローバル変数を避ける

オブジェクトの所有権を尊重することに密接に関連しているのは、可能な限りグローバル変数と関数を避けることです。また、スクリプト実行のための一貫性があり保守可能な環境を作成することも重要です。せいぜい、他のオブジェクトや関数が存在するためのグローバル変数を作成します。次の例を考えてみましょう。

// 2 つのグローバル - 避けてください。 ！
var name = "ニコラス"; 
関数 sayName(){ 
 アラート(名前); 
}

このコードには、変数名と関数 sayName() という 2 つのグローバル変数が含まれています。実際、次の例に示すように、両方を含むオブジェクトを作成できます。

// グローバル変数 - 推奨 var MyApplication = { 
 名前: 「ニコラス」 
 sayName: 関数(){ 
 アラート(this.name); 
 } 
};

この書き直されたコードは、name と sayName() の両方がアタッチされる単一のグローバル オブジェクト MyApplication を導入します。これにより、以前のコードに存在していた問題の一部が解消されます。まず、変数名は他の関数と競合する可能性のある window.name プロパティをオーバーライドします。次に、関数スコープ間の混乱を排除するのに役立ちます。 MyApplication.sayName() を呼び出すということは、論理的には、MyApplication を定義するコードを調べることによって、コードの問題を特定できることを意味します。

3. 定数を使用する

定数を使用して定義するのに適した値の種類は次のとおりです。

• 繰り返し値 - 複数の場所で使用される値は、定数に抽出する必要があります。これにより、一方の値が変更され、もう一方の値が変更されない場合に発生する可能性のあるエラーの可能性が制限されます。これには CSS クラス名も含まれます。
• ユーザー インターフェイス文字列 - 国際化を容易にするために、ユーザーに表示される文字列をすべて抽出する必要があります。
• URL - Web アプリケーションでは、リソースの場所が簡単に変更される可能性があるため、すべての URL を保存するための共通の場所を用意することをお勧めします。
• 変更される可能性のある値 - リテラル値を使用するときは常に、その値が将来変更される可能性があるかどうかを自問する必要があります。答えが「はい」の場合、値は定数として抽出される必要があります。

上記は、メンテナンス可能な JS コードの書き方を教える詳細な内容です。メンテナンス可能な JS コードの書き方の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。