【TypeScript】map 実行前に filter(Boolean) を入れる理由と注意点

はじめに

こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。

JavaScript や TypeScript で配列の要素を変換する際に .map() を使うことはよくあります。しかし、配列内に null や undefined が混ざっていると、map() の中でプロパティにアクセスした瞬間に実行時エラーが発生します。

今回は、filter(Boolean) を挟むことでなぜそれを回避できるのか、そして注意すべき点について解説します。

---

配列の中に null がある場合

type Teacher = { id: number; name: string };
const teachersData: (Teacher | null)[] = [
  { id: 1, name: '山田' },
  null,
  { id: 2, name: '田中' },
];

const toTeacherRow = (teacher: Teacher) => ({
  id: teacher.id, // null の場合ここでエラー
  name: teacher.name,
});

teachersData.map(toTeacherRow); // ❌ 実行時エラー

このコードは null.id にアクセスするため、次のようなエラーが出ます。

Uncaught TypeError: Cannot read properties of null (reading 'id')

React で実装している際に、たとえ null の値を意図的に入れていなかった場合でも API によるデータ取得が間に合わなくて null になる場合もあります。

---

3. filter(Boolean) で解決する

const teacherRows = teachersData
  .filter(Boolean) // falsy な値を除外
  .map(toTeacherRow);

console.log(teacherRows);
// [
//   { id: 1, name: '山田' },
//   { id: 2, name: '田中' }
// ]

.filter(Boolean) は falsy な値（null、undefined、0、'' など）を除外します。
これにより、map() の対象から null や undefined が消え、実行時エラーを防げます。

---

4. filter(Boolean) の注意点

filter(Boolean) は便利ですが、0 や空文字も除外してしまう ことに注意しましょう。

[0, 1, 2].filter(Boolean); // [1, 2]
['', 'a', 'b'].filter(Boolean); // ['a', 'b']

もし「null と undefined だけを除外したい」なら、型ガードを使うのが安全です。

teachersData
  .filter((t): t is Teacher => t != null) // null と undefined だけを除外
  .map(toTeacherRow);

---

5. まとめ

• 配列が null や undefined を含む可能性があるなら、map() の前に除外処理を入れるべき
• filter(Boolean) は短く書けるが、0 や空文字も除外するので用途によっては型ガードの方が安全
• 「配列全体が null じゃなくても、中の要素が null になるケースがある」 ことを意識すると、非同期処理や外部データ取り込みでのエラーを防げる