JavaScriptで配列から特定の要素を削除したいとき、filterメソッドは非常に強力なツールです。
しかし、初心者向けのチュートリアルで見る書き方と、実際のプロジェクトで見かける短い書き方にはギャップがあり、戸惑うこともあるかもしれません。
今回は、特定のタスクを配列から削除するremove(task)という処理を例に、基礎的な書き方からモダンで簡潔な書き方へと、4つのステップでリファクタリング（コードの改善）していく過程を解説します。
お題：特定のタスクを配列から取り除く
以下のように、this.tasksという配列から、引数で渡されたtaskと一致するものを除外したい、という状況を想定します。
ステップ1：最も基礎的な書き方（if文の使用）
まずは、プログラミングの基礎的なロジックに忠実に書いたコードです。
remove(task) {
this.tasks = this.tasks.filter(function(t) {
if (t === task) {
return false; // 一致したら配列から除外する
}
return true; // 一致しなければ配列に残す
});
}【解説】
filterメソッドは、配列の要素を1つずつ順番に取り出し（ここではt）、関数の中で処理を行います。
return trueを返した要素だけが新しい配列に残り、return falseを返した要素は取り除かれます。
ここではif文を使って、削除したいtaskと一致した場合に意図的にfalseを返しています。
ステップ2：条件式を直接returnする
ステップ1のコードは正しく動きますが、少し冗長です。if文をなくしてみましょう。
remove(task) {
this.tasks = this.tasks.filter(function(t) {
return t !== task;
});
}【解説】
t !== task（tとtaskが等しくない）という条件式自体が、結果としてtrueかfalseのどちらかになります。
- 等しくない場合 ＝
true（残す） - 等しい場合 ＝
false（除外する）
そのため、わざわざif文で分岐させなくても、条件式の評価結果をそのままreturnするだけで同じ動きになります。
ステップ3：アロー関数の導入
ここからモダンなJavaScript（ES6以降）の機能を取り入れます。functionというキーワードを省略できる「アロー関数」の出番です。
remove(task) {
this.tasks = this.tasks.filter((t) => {
return t !== task;
});
}【解説】 function(t) の部分が (t) => に変わりました。矢印（アロー）のような記号を使うため、アロー関数と呼ばれます。動きはステップ2と全く同じですが、少しだけ見た目がスッキリしました。
ステップ4：不要な括弧とreturnの省略（完成形）
アロー関数には、特定の条件下で記述をさらに省略できる強力なルールがあります。
- 引数が1つだけの場合は、引数を囲む
()を省略できる。 - 処理が1行だけ（returnするだけ）の場合は、波括弧
{}とreturnという文字自体を省略できる。
このルールを適用すると、最終的に以下のようになります。
remove(task) {
this.tasks = this.tasks.filter(t => t !== task);
}【解説】 たった1行に収まりました。 「this.tasksの中から、tがtaskと等しくないものだけを抽出（フィルター）する」という意図が、英語の文章を読むように直感的に伝わる美しいコードです。
まとめ
一見すると呪文のように見える短いコードも、分解していくと「無駄を省いていった結果」であることが分かります。
- if文で真偽値を返す
- 条件式そのものを返す
- アロー関数を使う
- 省略ルールを適用する
この過程を理解しておくと、他のメソッド（mapやfindなど）を使う際にも応用が利きます。ぜひ、ご自身のコードでも試してみてください！
ポチップ
コメント