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~ 関数が定義されています。

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

読んでいただきありがとうございます。