コードを読みやすく整理しよう | JavaScript応用

動くだけでなく、後から目的と変更箇所を判断できるコードを目指します。

今回は、長くなったフォーム処理を、動作を変えずに少しずつ整理します。このように外から見た動作を保ちながら内部構造を改善することをリファクタリングと呼びます。

今回使用するファイル構成

javascript-practice/
├── index.html
└── js/
    └── script.js

変更しやすいコードへ整理する

役割が分かる名前を付ける

const publishedArticles = articles.filter((article) => article.isPublished);

dataやresultだけでなく、何を表す値か名前で伝えます。真偽値にはisやhasを使うと条件として読みやすくなります。

関数を一つの目的へ分ける

function validateArticle(article) {
  return article.title.trim() !== '';
}

function createArticleElement(article) {
  const item = document.createElement('li');
  item.textContent = article.title;
  return item;
}

検証とDOM生成を分けると、それぞれを個別に確認できます。

早期リターンで入れ子を減らす

function renderArticle(article) {
  if (!article) {
    return;
  }

  if (!article.isPublished) {
    return;
  }

  articleList.append(createArticleElement(article));
}

処理できない条件を先に終了させると、主要な処理が深い波括弧の中へ入りません。

重複を整理する

同じ処理が複数ある場合は共通関数を検討します。ただし、見た目が似ているだけで変更理由が異なる処理を無理に共通化しません。

長い処理を段階的に整理する

改善前のコードを読む

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const a = titleInput.value.trim();

  if (a !== '') {
    if (a.length <= 50) {
      const li = document.createElement('li');
      li.textContent = a;
      articleList.append(li);
      titleInput.value = '';
      message.textContent = '追加しました';
    } else {
      message.textContent = '50文字以内にしてください';
    }
  } else {
    message.textContent = '入力してください';
  }
});

動作はしますが、aの意味が分からず、検証、DOM生成、表示更新が一つのイベント内に混在しています。

名前で役割を伝える

const articleTitle = titleInput.value.trim();

短さより、検索したときに意味が分かる名前を優先します。関数は動詞から始め、真偽値にはis、has、canなどを使います。

const hasTitle = articleTitle !== '';
const isWithinLimit = articleTitle.length <= 50;

検証を関数へ分ける

function validateArticleTitle(title) {
  if (title === '') {
    return 'タイトルを入力してください。';
  }

  if (title.length > 50) {
    return 'タイトルは50文字以内で入力してください。';
  }

  return '';
}

この関数はDOMを操作せず、同じ入力なら同じ結果を返します。Consoleから単独で確認できます。

console.assert(validateArticleTitle('') !== '');
console.assert(validateArticleTitle('JavaScript') === '');

DOM生成を関数へ分ける

function createArticleItem(title) {
  const item = document.createElement('li');
  item.textContent = title;
  return item;
}

イベント処理を完成させる

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const articleTitle = titleInput.value.trim();
  const errorMessage = validateArticleTitle(articleTitle);

  if (errorMessage !== '') {
    message.textContent = errorMessage;
    titleInput.focus();
    return;
  }

  articleList.append(createArticleItem(articleTitle));
  form.reset();
  titleInput.focus();
  message.textContent = '記事を追加しました。';
});

イベント処理には「値を取得する」「検証する」「問題がなければ追加する」という流れだけが残りました。

コメントと関数名を使い分ける

コードをそのまま日本語にしたコメントは、変更時に古くなることがあります。

// タイトルを検証する
const message = validateArticleTitle(title);

関数名から分かる説明は不要です。業務上の理由や一見不自然な制約など、「なぜそうするか」をコメントへ残します。

// 外部システムの制限に合わせ、タイトルは50文字までとする
const maxTitleLength = 50;

リファクタリングの進め方

改善前の動作を確認する
一度に一種類だけ変更する
変更するたびに同じ操作を確認する
Consoleのエラーも確認する
名前や分割によって本当に読みやすくなったか見直す

整理と機能追加を同時に大量に行うと、不具合の原因を特定しづらくなります。

まとめ

命名、役割分担、早期リターンによって意図を読み取りやすくします。次の記事では、キーボードと支援技術でも使えるUIを作ります。