# 一般的な検証を再利用可能な関数に置き換える

JavaScript および TypeScript の開発者は、同じ条件を繰り返し記述することがよくあります。 Web 開発者であれば、おそらく次のようなコードに遭遇したことがあるでしょう:

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
    //... save text
   }
}

この場合、event.key は文字列型であり、たとえば、'Enter ' に誤ってスペースを含めることにより、簡単にバグが発生します。

この条件を関数にカプセル化してみてはいかがでしょうか?

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (checkIsEnterKey(event.key)) {
    //... save text
   }
}

これにより、Enter キーのすべてのチェックに一貫性と信頼性が確保されます。

次に、次の検証について考えてみましょう。

type Value = null | object;

const value = {} as Value;

if (typeof value === 'object') {
  value; // value type is null | object
}

TypeScript はスマートですが、条件内の値は Value 型のままです。これは、typeof null が 'object' を返すためです。

したがって、次のように書く必要があります。

if (value !== null && typeof value === 'object') {
  value; // value type is object
}

多くの開発者は、これを関数にカプセル化せず、この状況に遭遇するたびに繰り返し記述する可能性があります。

これまでの人生で同じ症状を何回書いたことがありますか?

何回同じ間違いをしましたか?

今後何回同じ条件を書きますか?

私だったら、こうします:

if (checkIsObject(value)) {
  value; // value type is object
}

一般的な条件を関数にカプセル化すると、多くの利点があります。

次の例を考えてみましょう:

const array = [0, 1, 2, 3, 4, 5, null, undefined];

null 値のみを除外する配列を作成してみましょう。

簡潔さを優先して次のように書くとよいでしょう:

const numbers = array.filter(Boolean);

残念ながら、これは理想的ではありません。 0 も false として評価され、除外されます。したがって、次のように書く必要があります:

const numbers = array.filter(item => item !== null && item !== undefined);

これは醜くて再利用できないコードだと思いませんか?

よりエレガントなコードを書くことができます:

const numbers = array.filter(checkIsNullish);

一般的な条件を繰り返し記述するのはやめてください。それは間違いを引き起こすだけであり、コードは読みにくくなります。

私が作成した checker というライブラリを紹介します。

このユーティリティ関数ライブラリは、一般的な Web 開発や低レベル開発でよく使用される条件を関数として表現します。すべての関数は入力を受け取り、ブール値を返します。

この記事の執筆時点では、文字列、数値、ブール値、null 値などのデータ型を処理するための豊富な関数が提供されています。すべての機能はテストされ、文書化されており、簡単に使い始めることができます。

実際の例をいくつか見てみましょう。

このライブラリが提供するパッケージはすべて JSR で公開されています。これらは、NPM、PNPM、Yarn、Bun、および Deno プロジェクトに簡単にインストールできます。

ここでは、NPM を使用した例として @checker/string パッケージを取り上げます。

1. パッケージをインストールします

プロジェクト ディレクトリで次のコマンドを実行します:

  npx jsr add @checker/string

1. 機能の使用

  import { checkIsNotEmptyString, checkIsIndexFound } from "@checker/string";

  const value = "Hello";

  const formatted = value.trim();

  if (checkIsNotEmptyString(formatted)) {
    // formatted !== ''
    // When formatted is not an empty string
  }

  const index = value.indexOf("el");

  if (checkIsIndexFound(index)) {
    // index !== -1
    // When "el" is found in value
  }

私は、!SOME_CONDITION のような論理否定演算子を使用してブール値を反転するのが好きではありません。これは暗黙的であり、ブール値を追加または省略して単純に反転すると、多くの危険な状況が発生する可能性があるためです。

したがって、すべての関数には、対応する checkIsNot~ 関数が定義されています。

一般的な条件を関数にカプセル化します。こうすることで、コードが読みやすくなり、バグを見つけやすくなります。

お読みいただきありがとうございます。

以上が# 一般的な検証を再利用可能な関数に置き換えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。