JavaScript中級

中級 JavaScriptで学ぶWebアプリ設計｜アンチパターン編

 

導入

Webアプリケーションの設計において、開発者はしばしばアンチパターンに陥ることがあります。特に中級レベルのエンジニアは、効率的なコードを書こうとするあまり、後々のメンテナンス性や拡張性を無視した設計を選んでしまうことがあります。ここでは、具体的なシチュエーションを通じて、アンチパターンを理解し、改善策を考えていきます。

教科書レベルの解説（Webアプリ設計）

重要な概念の整理

Webアプリ設計では、コードの可読性や再利用性が重要です。特に、チームでの開発や長期的なプロジェクトにおいては、他の開発者がコードを理解しやすい形に保つことが求められます。これにより、バグの発生を抑え、修正や機能追加がスムーズに行えるようになります。

コード例（JavaScript）


function fetchData(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, false); // 同期リクエスト
    xhr.send();
    return xhr.responseText;
}

コードの行ごとの解説

  1. function fetchData(url): データを取得する関数を定義しています。
  2. const xhr = new XMLHttpRequest(); XMLHttpRequestオブジェクトを作成し、APIへのリクエストを準備します。
  3. xhr.open(‘GET’, url, false); リクエストを初期化しますが、ここで同期リクエストを使用しています。
  4. xhr.send(); リクエストを送信します。
  5. return xhr.responseText; レスポンスを返しますが、リクエストが完了するまで処理がブロックされます。

アンチパターン編

上記のコード例では、XMLHttpRequestを使用した同期リクエストが行われています。このアプローチにはいくつかの問題があります。まず、同期リクエストはユーザーインターフェースをブロックし、アプリケーションの応答性を低下させる原因になります。特に、リクエストが長時間かかる場合、ユーザーはアプリケーションがフリーズしたと感じてしまいます。

改善策としては、非同期リクエストを使用することが挙げられます。以下に、非同期リクエストを使用した改善例を示します。


function fetchDataAsync(url) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true); // 非同期リクエスト
        xhr.onload = () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText);
            } else {
                reject(new Error('Request failed with status ' + xhr.status));
            }
        };
        xhr.onerror = () => reject(new Error('Network error'));
        xhr.send();
    });
}

この改善されたコードでは、Promiseを使用して非同期処理を行い、リクエストの成功または失敗に応じて適切な処理を行います。これにより、ユーザーインターフェースがブロックされることなく、アプリケーションの応答性が向上します。

まとめ

  • 同期リクエストはUIをブロックし、ユーザー体験を損なう可能性がある。
  • 非同期リクエストを使用することで、アプリケーションの応答性を高めることができる。
  • 可読性やメンテナンス性を考慮した設計が、長期的なプロジェクトにおいては特に重要である。
RELATED POST