フロントエンド開発の現場で、ふと遭遇する「SyntaxError: getter functions must have no arguments」。このエラーメッセージは、直訳すれば「ゲッター関数は引数を持ってはならない」という意味ですが、なぜこの制約があるのか、そしてこのエラーに直面したとき、どのように設計を見直すべきかについて、実務的な視点から解説します。
なぜゲッターには引数が許されないのか
JavaScriptのゲッター（getter）は、プロパティのように振る舞うための仕組みです。例えば、obj.valueのように記述した際、内部で関数が実行され、その戻り値を返します。ここで重要なのは、ゲッターは「メソッドを呼び出す」というよりは「プロパティにアクセスする」という構文であるという点です。
もし引数が取れてしまうと、obj.value(10)のような記述が可能になりますが、これはプロパティアクセスなのか、それとも関数実行なのか、コードの可読性を著しく損ないます。言語仕様として「プロパティアクセスは副作用を伴わず、引数も取らない」という一貫性を保つために、このエラーは存在しています。
現場でよくある「やってしまいがちな」事例
実務でこのエラーに遭遇するケースの多くは、クラスやオブジェクトの定義中に「メソッド」と「ゲッター」を混同しているときです。
例えば、あるユーザーの情報を取得するクラスを作成している際、特定の引数でフィルタリングした値を返そうとして以下のようなコードを書いてしまうことがあります。
get filteredList(status) {
return this.items.filter(item => item.status === status);
}
このコードは、一見便利そうに見えますが、ゲッターとして定義してしまっているため、冒頭のエラーを引き起こします。これを解決するには、ゲッターではなく通常のメソッドとして定義し直す必要があります。
設計判断：ゲッターか、メソッドか
このエラーを回避する際は、単にメソッド名を変えるだけでなく、設計意図を再確認する良い機会です。
もし、その処理が「単に内部状態を計算して返すだけ（計算プロパティ）」であれば、ゲッターが適しています。しかし、外部からのパラメータによって結果が変化するようなロジックであれば、それはプロパティではなく「アクション（メソッド）」であると解釈すべきです。
どうしても引数が必要な場合は、以下のどちらかのアプローチを検討してください。
1. そのままメソッドとして定義する（例: getFilteredList(status)）
2. ゲッターで「関数を返す関数」を返す（例: get getFilteredList() { return (status) => … }）※ただし、これはコードの複雑性を高めるため、特別な理由がない限り推奨しません。
まとめ：保守性の高いコードを書くために
エラーが出たからといって、無理やり回避策を探すのではなく、「これは外部からパラメータを受け取るべき処理なのか？」という問いを立ててください。ゲッターは「状態を覗く窓」であり、メソッドは「処理を実行する装置」です。この役割分担を意識するだけで、エラーは減り、チームメンバーにとっても直感的に理解しやすいコードになります。
プロフェッショナルなフロントエンドエンジニアとして、言語の制約を「制限」と捉えず、「設計の指針」として活用していきましょう。
コメント