【JS応用】正しい名前を与える

プログラミングにおける「正しい名前を与える」ことの重要性と実践的アプローチ

ソフトウェア開発において、「名前付け(Naming)」は最も困難で、かつ最も重要な課題の一つです。古くから「コンピュータサイエンスにおける二大難問は、キャッシュの無効化と名前付けである」という格言が語り継がれていますが、これは単なるジョークではありません。コードはコンピュータのために書くものではなく、人間(未来の自分やチームメンバー)が読み、理解し、保守するために書くものだからです。

名前は、コードの意図、振る舞い、そしてドメイン知識を伝えるための最も強力なツールです。本記事では、フロントエンド開発の文脈を中心に、保守性の高いコードを実現するための「正しい名前付け」の技術を深掘りします。

なぜ名前付けがこれほどまでに重要なのか

コードの可読性は、開発者の認知負荷に直結します。適切な名前が付けられたコードは、ドキュメントを読まなくても「何をしているか」が即座に理解できます。逆に、曖昧な名前や誤解を招く名前は、バグの温床となります。

例えば、`data` や `value` といった汎用的な名前は最悪です。これらは「何が入っているか」という情報を持たないため、開発者はコードの他の部分を読み解いて中身を推測しなければなりません。この「推測」の時間こそが、開発効率を下げ、技術的負債を蓄積させる原因となります。

正しい名前を与えることは、単なる命名規則の遵守ではなく、設計そのものに深く関わっています。名前がうまく決まらないときは、多くの場合、その関数の責任範囲(責務)が曖昧であるか、データモデルの設計が不十分であるというサインです。名前付けに悩むプロセスは、設計上の矛盾を浮き彫りにするデバッグのプロセスでもあるのです。

名前付けの基本原則:意図と文脈を伝える

優れた名前には「意図(Why)」と「文脈(Context)」が含まれています。以下の原則を意識することで、名前の質を劇的に向上させることができます。

1. 抽象度を合わせる
変数のスコープや役割に応じて、抽象度を調整します。例えば、イテレータの変数であれば `i` や `j` でも許容されますが、関数の引数やクラスのプロパティでは、具体的なドメイン用語を使用すべきです。

2. 検索可能性を確保する
エディタの検索機能で、一意に特定できる名前を選びます。短すぎる名前や一般的な単語は、意図しない箇所まで検索結果にヒットしてしまい、コードベースの探索を妨げます。

3. 否定形を避ける
`isNotLoading` のような否定形のフラグは、条件分岐の際に二重否定を生み出しやすく、認知的な混乱を招きます。`isLoading` のように肯定形で定義し、必要に応じて `!` 演算子で反転させるのが定石です。

4. 単位や型情報を含める
数値や時間を取り扱う場合、単位を名前に含めることで誤用を防げます。例えば `timeout` ではなく `timeoutMs` とすることで、ミリ秒単位であることを明示できます。

実務で役立つ命名パターンとサンプルコード

フロントエンド開発、特にReactやTypeScriptの環境において、命名の質を上げるための具体的なテクニックを紹介します。

1. 真偽値(Boolean)の命名

真偽値は「状態」を表すため、`is`, `has`, `can`, `should` などの接頭辞を付けるのが一般的です。


// 悪い例: 状態が不明瞭
const open = true;
const visible = false;

// 良い例: 何の状態かが明確
const isModalOpen = true;
const hasUserPermission = true;
const canEditProfile = true;
const shouldShowNotification = false;

2. イベントハンドラの命名

イベントハンドラは「何が起きたか」という事実を記述します。`handle` を接頭辞として使うのが一般的ですが、propsとして渡す場合は `on` を使うのがReactコミュニティの標準です。


// コンポーネント内のメソッド
const handleSaveClick = () => { ... };

// コンポーネントのprops
interface Props {
  onSave: () => void;
  onClose: () => void;
}

3. 配列やコレクションの命名

配列には複数形や、データ構造を想起させる名前を付けます。


// 悪い例: 単数形と複数形が混在して混乱を招く
const user = [ { id: 1 }, { id: 2 } ];

// 良い例: 複数形またはリストであることを明示
const users = [ { id: 1 }, { id: 2 } ];
const userList = [ { id: 1 }, { id: 2 } ];

4. 責務を明確にする関数名

関数は「何をするか(動詞)」を名前に含める必要があります。また、関数が「戻り値を返すのか」「副作用を伴うのか」を名前から判断できるようにします。


// 悪い例: 曖昧
const data = process(user);

// 良い例: 変換処理であることが明確
const getFormattedUserName = (user: User) => `${user.firstName} ${user.lastName}`;

// 良い例: 副作用を伴うことが明確
const updateUserData = async (id: string, payload: Partial) => { ... };

ドメイン駆動設計(DDD)の視点を取り入れる

大規模なフロントエンドアプリケーションでは、ビジネスドメインの用語をコードに持ち込むことが非常に重要です。例えば、ECサイトにおいて「商品」を指す際に、ある画面では `item`、別の画面では `product` と呼称が揺れると、エンジニアは「これらは同じものを指しているのか?」という無駄な推測を強いられます。

ユビキタス言語(チーム全体で共通の用語)を定義し、それをそのまま変数名や型名に反映させることで、コードベースの一貫性が保たれます。フロントエンドのコードもバックエンドのAPI仕様と用語を一致させることで、コミュニケーションコストを大幅に削減できます。

コードレビューにおける命名の指摘方法

名前付けは主観が入りやすいため、レビューでの指摘には注意が必要です。単に「この名前は悪い」と断じるのではなく、「なぜその名前が分かりにくいのか」という背景を共有することが重要です。

– 「この変数は、どのような値が入ることを期待していますか?」
– 「この関数の命名から、副作用があるかどうかを判断するのは少し難しいかもしれません」
– 「ドメイン用語として、ここでの呼称を統一しませんか?」

このような建設的な問いかけを通じて、チーム全体の「命名に対する感度」を高めていくことが、長期的なプロダクトの品質向上に繋がります。

まとめ

「正しい名前を与える」ことは、単なる字面の問題ではなく、コードを通じて「意図」を伝え、「設計」を洗練させるための極めて高度なエンジニアリング行為です。

1. 名前は読み手のためのインターフェースである。
2. 曖昧さを排除し、意図と文脈を名前に埋め込む。
3. 否定形や汎用的な名前を避け、具体的で検索可能な名称を選ぶ。
4. チーム内でユビキタス言語を共有し、一貫性を保つ。

今日書く一行の変数名が、半年後のあなたやチームメイトの時間をどれだけ節約できるかを想像してみてください。名前付けに妥協せず、常に「より良い名前はないか?」と自問自答し続けること。その姿勢こそが、優れたフロントエンド・スペシャリストへの第一歩です。優れたコードは、説明を必要としません。適切な名前が付けられていれば、コードそのものが自らの物語を語ってくれるのです。

コメント

タイトルとURLをコピーしました