[TS] Lazy関数を使った重複ロジックの最適化

公開日 2024年12月9日
更新日 2025年1月5日
7 分で読める
TypeScriptJavaScript

Lazy関数とは?

Lazy関数(Lazy Function)とは、初回呼び出し時に必要な初期化を行い、その実行環境に応じて動的に自身の実装を変更する関数のことです。この最適化により、以降の呼び出しでのパフォーマンスを向上させることができます。

Lazy関数の目的

Lazy関数を使用することで、不要な繰り返しチェックや初期化ロジックを避け、コードの効率を向上させることができます。例えば、ある条件が一度だけ判断されれば十分な場合、それ以降の呼び出しではその処理を直接再利用できます。これがLazy関数の主な目的です。


使用例

例えば、JavaScript(またはTypeScript)で文字列をクリップボードにコピーする必要があるとします。その基本的な実装は以下のようになります。

const copyTextToClipboard = (text: string) => {
  if (navigator.clipboard) {
    // クリップボードAPIを使用
    navigator.clipboard.writeText(text);
  } else {
    // 古いブラウザ用のフォールバック
    const textarea = document.createElement('textarea');
    textarea.value = text;
    textarea.style.position = 'fixed'; // テキストエリアが画面に表示されないようにする
    textarea.style.top = '-9999px';
    document.body.appendChild(textarea);
    textarea.focus();
    textarea.select();
    try {
      document.execCommand('copy');
      console.log('テキストがクリップボードにコピーされました(フォールバック)!');
    } catch (err) {
      console.error('フォールバック:テキストのコピーに失敗しました: ', err);
    }
    document.body.removeChild(textarea);
  }
};

// 関数の呼び出し
copyTextToClipboard('コピーする文字列');

このコードでは、navigator.clipboard APIが利用可能かどうかを毎回チェックしています。しかし、このチェックはブラウザの機能が変わらない限り一度だけ行えば十分です。毎回の呼び出しで同じチェックを繰り返すのは非効率です。

このような場合にLazy関数が役立ちます。


Lazy関数でコードを最適化する

関数の動的な書き換えにより、初回のみチェックが実行されるようにできます。以下がその最適化例です:

let copyToClipboard = (text: string) => {
  if (navigator.clipboard) {
    // 関数の書き換え
    copyToClipboard = (text: string) => {
      navigator.clipboard.writeText(text);
    };
  } else {
    // 関数の書き換え
    copyToClipboard = (text: string) => {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed'; // テキストエリアが画面に表示されないようにする
      textarea.style.top = '-9999px';
      document.body.appendChild(textarea);
      textarea.focus();
      textarea.select();
      try {
        document.execCommand('copy');
        console.log('テキストがクリップボードにコピーされました(フォールバック)!');
      } catch (err) {
        console.error('フォールバック:テキストのコピーに失敗しました: ', err);
      }
      document.body.removeChild(textarea);
    };
  }
  // 初回呼び出しのロジック
  copyToClipboard(text);
};

最適化されたコードの動作仕組み

  1. 初回呼び出し時:
  • ブラウザがnavigator.clipboardをサポートしているかを判断します。
  • 結果に応じてcopyToClipboard関数を動的に書き換えます。
  • 初回のロジックを実行します。
  1. 以降の呼び出し時:
  • 書き換え済みの関数を直接実行し、再チェックを行いません。

メリット

  1. パフォーマンスの向上: 繰り返しチェックを回避し、実行効率を向上させます。
  2. コードの簡潔化: 初回以降、関数は特定の状況に最適化され、不要な分岐ロジックが削減されます。
  3. 保守性の向上: ロジックが明確で拡張性が高いです。将来的に追加の分岐が必要になった場合でも、初回の判断と書き換えの部分を調整するだけで対応可能です。

結論

Lazy関数は、特に一度きりの初期化チェックが必要な場面において、エレガントで効率的なプログラミングパターンです。この方法を採用することで、コードをより効率的かつ簡潔にし、保守性も向上させることができます。プロジェクト内で同様の繰り返しロジックを見つけた場合は、ぜひLazy関数の導入を検討してみてください!

概要

技術的洞察、経験、思考を共有する個人ブログ

クイックリンク

お問い合わせ

  • Email: hushukang_blog@proton.me
  • GitHub

© 2025 CODE赤兎. 無断転載禁止