何をしたいユーティリティか：「null 削除」
ここでの「null 削除」は、配列の中から null（と必要なら undefined）を取り除いて、扱いやすい配列に整える処理です。
さっきの「空要素削除」の中でも、もっとピンポイントに「null だけ」を対象にしたバージョンだと思ってください。
業務では、例えばこんな場面でよく出てきます。
- DB や API からのレスポンスに
nullが混ざっていて、集計や表示の邪魔になる - 「選択された ID の配列」を作るときに、未選択のものが
nullで入ってしまう - 「途中でまだ決まっていない値」を
nullで埋めておいた配列から、決まったものだけを取り出したい
こういうときに「null 削除ユーティリティ」があると、毎回同じルールでクリーンアップできて、コードがすっきりします。
一番基本：null だけを削除する
シンプルな null 削除ユーティリティ
まずは、「null だけを削除する」一番シンプルなユーティリティを書いてみます。
function removeNull(array) {
if (!Array.isArray(array)) {
return [];
}
return array.filter((item) => item !== null);
}
ここでやっていることをかみ砕きます。
Array.isArrayで「本当に配列か」を確認し、違ったら空配列を返すfilterで「item !== nullなものだけ」を残すundefinedや空文字、0、falseはそのまま残る
つまり、「null だけを消して、それ以外は全部残す」動きになります。
実際の動き
const data = [1, null, 2, undefined, 3, 0, "", false];
const cleaned = removeNull(data);
// [1, 2, undefined, 3, 0, "", false]
null だけが消え、undefined や他の値は残っています。
「とりあえず null だけ邪魔だから消したい」という場面では、この removeNull で十分です。
null と undefined をまとめて削除する
「値なし」を全部消したいとき
現実のコードでは、「値なし」を null と undefined の両方で表現していることがよくあります。
その場合、「どっちもまとめて消したい」ことが多いです。
そのときは、次のようなユーティリティにします。
function removeNullable(array) {
if (!Array.isArray(array)) {
return [];
}
return array.filter((item) => item != null);
}
ここが重要ポイントです。
item != nullは、「item !== null && item !== undefined」と同じ意味- ゆるい等価
!=を、あえて「null/undefined 両方にマッチさせるため」に使っている
これで、「null と undefined を両方削除する」動きになります。
実際の動き
const data = [1, null, 2, undefined, 3, 0, "", false];
const cleaned = removeNullable(data);
// [1, 2, 3, 0, "", false]
null と undefined が両方消え、他の値は残っています。
「値なしは全部消したい」というときは、この removeNullable が素直です。
業務での具体的な使い方
例1：ID 配列から「未選択」を取り除く
例えば、「チェックボックスで選択された ID の配列」を作るときに、
未選択のものが null で入ってしまうケースを考えます。
const rawIds = [1, null, 2, null, 3];
const ids = removeNullable(rawIds);
// [1, 2, 3]
これで、「有効な ID だけ」の配列になります。
この配列をそのまま API に渡したり、DB に保存したりできます。
例2：API レスポンスから「値なし」を取り除いて集計する
API が「値なし」を null で返してくるとします。
const scores = [10, null, 20, null, 30];
平均値を計算したいとき、「null を 0 とみなす」のか「そもそも除外する」のかで結果が変わります。
「除外する」場合は、まず null を削除します。
const validScores = removeNullable(scores);
// [10, 20, 30]
const avg =
validScores.reduce((sum, s) => sum + s, 0) / validScores.length;
// 20
ここでのポイントは、「集計前に“有効な値だけ”の配列にしておく」ことです。
そうすると、集計ロジックがシンプルになり、null チェックをあちこちに書かずに済みます。
例3：フォーム入力の「空行」を判定する前段階として使う
さっきの「空要素削除」で、行が空かどうかを判定するとき、
まず「セル配列から null を削除しておく」と、判定が楽になります。
function isEmptyRow(row) {
if (!Array.isArray(row)) return true;
const cleaned = removeNullable(row);
return cleaned.length === 0;
}
「全部 null なら空行」とみなすようなケースでは、removeNullable を前段階として使うと、ロジックがきれいになります。
「null 削除」ユーティリティ設計で意識してほしいポイント
1. 「null だけ」か「null/undefined 両方」かを分けておく
removeNull と removeNullable を分けておくのは、とても大事です。
removeNull… 本当にnullだけを消すremoveNullable…nullとundefinedを両方消す
プロジェクトによっては、「undefined は“まだ値が決まっていない”意味で残したい」こともあります。
逆に、「どっちも“値なし”だからまとめて消したい」こともあります。
ここをユーティリティのレベルで分けておくと、
「この処理はどこまで消しているのか」がコードから読み取れるようになります。
2. 「0 や空文字を消さない」ことを意識する
0 や空文字 ""、false は、業務上「有効な値」であることが多いです。
- 数量 0
- 空文字も意味を持つフィールド
- フラグの
false
これらを「null 削除」で一緒に消してしまうと、バグになります。
なので、「null 削除ユーティリティは、あくまで null/undefined だけを対象にする」と決めておくのが安全です。
もし「空文字も消したい」なら、それは別のユーティリティ（さっきの compactEmpty など）でやる、という分離が大事です。
3. 「非破壊的」にする（新しい配列を返す）
filter を使っているので、元の配列は変更されません。
これは意図的です。
元の配列を直接書き換えると、「どこで null が消えたのか」が追いにくくなります。
業務コードでは、「元データはそのまま」「クリーンな配列を別で持つ」というスタイルのほうが、
デバッグしやすく、バグも減ります。
少し手を動かして感覚をつかむ
コンソールで、次のようなコードを実際に打ってみてください。
const data = [1, null, 2, undefined, 3, 0, "", false];
removeNull(data);
removeNullable(data);
const rawIds = [1, null, 2, null, 3];
const ids = removeNullable(rawIds);
const scores = [10, null, 20, null, 30];
const validScores = removeNullable(scores);
const avg =
validScores.reduce((sum, s) => sum + s, 0) / validScores.length;
「どの値が残って、どの値が消えるか」「null だけ消す場合と、null/undefined 両方消す場合で結果がどう変わるか」を、自分の目で確認してみてください。
そのうえで、自分のプロジェクトに
export function removeNull(...) { ... }
export function removeNullable(...) { ... }
のような関数を置き、「配列から null を消したくなったら、必ずこの“null 削除ユーティリティ”を通す」というルールを作ってみてください。
そうすると、「場当たり的な item != null の乱立」から、「意図と一貫性を持った null クレンジング」に一段ステップアップしていきます。