【書評】プログラミング初心者が「リーダブルコード」を実践してコード品質が劇的に改善した話

「コードは動くけど、後から見ると何をしているかわからない」「変数名が適当すぎて、自分でも理解できない」こんな悩みを抱えていませんか？私も同じでした。動くコードは書けるようになったものの、品質に自信が持てず、3ヶ月後の自分が理解できるか不安でした。

そんな時に出会ったのが「リーダブルコード」です。この本を読みながら自作のタスク管理アプリをリファクタリングした結果、コードの可読性が劇的に向上しました。この記事では、プログラミング初心者の視点から、本の構成、実際に学んだこと、そして率直な評価をお伝えします。

「リーダブルコード」の構成
プログラミング初心者が実践して学んだこと
率直な評価：良い点と悪い点
まとめ

「リーダブルコード」の構成

出典：https://www.oreilly.co.jp/books/9784873115658/

リーダブルコードは、Googleのエンジニアが書いた「読みやすいコード」の実践書です。全15章、230ページで構成されており、理論だけでなく具体的なコード例が豊富に含まれています。

基本情報

著者: Dustin Boswell, Trevor Foucher
ページ数: 230ページ
価格: 定価2,640円
難易度: 初心者〜中級者向け

本の構成（全15章）

本書は大きく4つのパートに分かれています。

Part 1: 表面上の改善（第1-6章）

このパートでは、コードの「見た目」を改善する方法を学びます。第2章「名前に情報を詰め込む」では、変数名や関数名の付け方について具体的に解説されています。第3章「誤解されない名前」では、読み手が誤解しない名前の付け方を学びます。第4章「美しさ」では、改行やインデントの使い方、コードの整列方法について説明されています。第5-6章では、効果的なコメントの書き方と、書くべきでないコメントについて学べます。

Part 2: ループとロジックの単純化（第7-9章）

第7章「巨大な式を分割する」では、複雑な条件式や計算式を読みやすく分割する方法を解説しています。第8-9章では、変数のスコープや使い方、ループの読みやすさについて学びます。

Part 3: コードの再構成（第10-13章）

このパートは、コードの構造そのものを改善する方法を扱います。第10章「無関係の下位問題を抽出する」では、汎用的な処理を別関数に切り出す方法を学びます。第11章「一度に一つのことを」では、関数を小さく保ち、単一責任の原則を守る重要性が説明されています。第12章「コードに思いを込める」では、自分の意図をコードで明確に表現する方法を学べます。第13章では、さらに高度なコード再構成のテクニックが紹介されています。

Part 4: 選抜テーマ（第14-15章）

最後のパートでは、テストコードの書き方や、短時間でコードを改善する方法について解説されています。

本の特徴

リーダブルコードの大きな特徴は、図とコード例が豊富に使われている点です。各章には必ずBefore/Afterのコード例があり、改善のポイントが視覚的に理解できます。また、特定のプログラミング言語に依存しない普遍的な原則が書かれているため、JavaScript、Python、Java、C++など、どの言語を使っている人でも学べる内容になっています。

1章あたり15-20ページと短く、図とコード例が半分以上を占めるため、専門用語が苦手な初心者でも読みやすい構成です。翻訳も自然で、技術書にありがちな「直訳調」ではなく、スムーズに読み進められます。また、各章が独立しているため、必ずしも最初から順番に読む必要はなく、自分の課題に合わせて読む章を選べます。

プログラミング初心者が実践して学んだこと

私はプログラミング初心者ですが、この本から学んだことは数多くありました。特に効果があった3つのポイントを、実践例とともに紹介します。

1. 変数や関数などの名前に意味を込める

変数を設定する際、私は意味もなく a や b などの単語、num や tmp などの略語を使っていました。これでは変数にどのような値が入っているのか分からず、後から読み返した時に何のために宣言されているのか理解するのに時間がかかりました。

改善前の例:

let a = new Date();
let b = 0;
let num = 31;

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 7; j++) {
    // ...
  }
}

このコードでは、a が何を表すのか、num が何の数値なのか、i と j が何のループなのか、すぐには理解できません。

しかし、変数に意味を込めるようになってからは、不要な変数の宣言を減らせたり、読み返した時にどんな値が入っているかすぐに理解できるようになりました。

改善後の例:

const nowDate = new Date();
let dayCount = 0;
const lastMonthEndDate = 31;

for (let weekIndex = 0; weekIndex < 6; weekIndex++) {
  for (let dayIndex = 0; dayIndex < 7; dayIndex++) {
    // ...
  }
}

改善後は、nowDate が現在の日付、dayCount が日数のカウント、lastMonthEndDate が前月の最終日、weekIndex が週のインデックスだと一目でわかります。

また、名前から簡単に推測できるようになったため、不要なコメントを削除できるようになり、コードが読みやすくきれいになりました。以前は「現在の日付を取得」「ループ処理」といったコメントを付けていましたが、変数名・関数名が明確になれば、こうしたコメントは不要です。

具体的な改善例:

Before	After	理由
`i`	`weekIndex`	週のインデックスだと明確
`tasks`	`arrayTasks`	配列だとわかる
`num`	`lastMonthDays`	前月の日数だと明確
`tmp`	`tempTaskList`	一時的なタスクリストだとわかる

変数名を改善しただけで、コードが自己説明的になりました。3ヶ月後に見ても、すぐに理解できるコードになったと実感しています。

2. 改行の位置などを一貫性のある形にして読みやすくする

改行の位置など、あまり意識せずにVSCode上でただ改行するだけでした。しかし、読みやすさを意識した改行を心がけたことにより、全体として綺麗で読みやすいコードになりました。

改善前の例:

for (let i = 0; i < weeks.length; i++) {
  calendarHtml += `<th>${weeks[i]}</th>`;
} 
calendarHtml += '</tr><tr>';
for (let iDays = 0; iDays < WeeksInCalendar; iDays++) {
  for (let jWeek = 0; jWeek < DaysInWeek; jWeek++) {
    if (iDays === 0 && jWeek < startDayOfWeek) {
      let lastMonthDays = lastMonthEndDayCont - startDayOfWeek + jWeek + 1;
      calendarHtml += `<td class="is-disabled">${lastMonthDays}</td>`;
    } else if (dayCount > endDate) {
      let nextMonthDays = dayCount - endDate;
      calendarHtml += `<td class="is-disabled">${nextMonthDays}</td>`;
      dayCount++;
    }
  }
}

このコードは、すべてが詰まっていて、どこからどこまでが1つのまとまりなのか分かりにくい状態でした。

改善後の例:

// 曜日ヘッダーの生成
for (let i = 0; i < weeks.length; i++) {
  calendarHtml += `<th>${weeks[i]}</th>`;
} 

calendarHtml += '</tr><tr>';

// カレンダーの日付セル生成
for (let iDays = 0; iDays < WeeksInCalendar; iDays++) {
  for (let jWeek = 0; jWeek < DaysInWeek; jWeek++) {
    
    // 前月の余白
    if (iDays === 0 && jWeek < startDayOfWeek) {
      let lastMonthDays = lastMonthEndDayCont - startDayOfWeek + jWeek + 1;
      calendarHtml += `<td class="is-disabled">${lastMonthDays}</td>`;
    } 
    // 次月の余白
    else if (dayCount > endDate) {
      let nextMonthDays = dayCount - endDate;
      calendarHtml += `<td class="is-disabled">${nextMonthDays}</td>`;
      dayCount++;
    }
  }
}

改善後は、論理的なまとまりごとに空行を入れることで、コードの「段落」が見えるようになりました。どこからどこまでが曜日ヘッダーの生成で、どこからが日付セルの生成なのか、一目で理解できます。

また、if-else文も、条件ごとに空行を入れることで、前月の余白処理と次月の余白処理が別の処理だと明確になりました。

改行で意識したポイント:

論理的なまとまりごとに空行を入れる
関数と関数の間は2行空ける
コメントの前は1行空ける
if-else の各ブロックの前に空行

これらを意識するだけで、コードの構造が見やすくなり、読むストレスが大幅に減りました。

3. 関数を分割する

基本的に一つの関数に一つの処理を意識して書くことにより、長々しい関数を削減でき、他の関数との連携も一目で把握できるようになりました。

改善前の例:

function showTaskDetail(date) {
  // タスク取得
  let userTasks = localStorage.getItem('tasks');
  const arrayTasks = userTasks ? JSON.parse(userTasks) : [];
  const tasks = arrayTasks.filter(task => task.date === date);
  
  // モーダル表示
  const modal = document.getElementById('taskModal');
  modal.style.display = 'block';
  
  // HTML生成
  let contentHtml = `<div class="task-item"><h2>${date}のタスク</h2><ul>`;
  tasks.forEach(task => {
    contentHtml += `<li>
                     <strong>
                      <div class="task-name">${task.name}</div>
                     </strong>
                     <div class="task-desc">メモ：${task.desc || '説明なし'}</div>
                    </li>
                    <button onclick="deleteUserTask(${task.id})">削除</button>`;
  });
  contentHtml += '</ul><button id="close">閉じる</button></div>';
  
  const modalTaskList = document.getElementById('modalContent');
  modalTaskList.innerHTML = contentHtml;
  
  // イベントリスナー設定
  window.addEventListener('click', (e) => {
    if (e.target == modal || e.target.id === 'close') {
      modal.style.display = 'none';
    }
  });
}

この関数は50行以上あり、タスク取得、HTML生成、モーダル表示、イベントリスナー設定と、4つの異なる処理を1つの関数で行っていました。

改善後の例:

// メイン関数：処理の流れが一目でわかる
function showTaskDetail(date) {
  const tasks = getTasksByDate(date);
  const modal = document.getElementById('taskModal');
  modal.style.display = 'block';
  modalCalendar(tasks, date);
  closeModal(modal);
}

// タスク取得処理
function getTasksByDate(date) {
  let userTasks = localStorage.getItem('tasks');
  const arrayTasks = userTasks ? JSON.parse(userTasks) : [];
  return arrayTasks.filter(task => task.date === date);
}

// HTML生成処理
function modalCalendar(tasks, date) {
  let contentHtml = `<div class="task-item"><h2>${date}のタスク</h2><ul>`;
  tasks.forEach(task => {
    contentHtml += `<li>
                     <strong>
                      <div class="task-name">${task.name}</div>
                     </strong>
                     <div class="task-desc">メモ：${task.desc || '説明なし'}</div>
                    </li>
                    <button onclick="deleteUserTask(${task.id})">削除</button>`;
  });
  contentHtml += '</ul><button id="close">閉じる</button></div>';

  const modalTaskList = document.getElementById('modalContent');
  modalTaskList.innerHTML = contentHtml; 
}

// モーダルを閉じる処理
function closeModal(modal) {
  window.addEventListener('click', (e) => {
    if (e.target == modal || e.target.id === 'close') {
      modal.style.display = 'none';
    }
  });
}

改善後は、メイン関数の showTaskDetail を見るだけで、「タスクを取得して、モーダルを表示して、HTMLを生成して、閉じる処理を設定する」という処理の流れが一目でわかるようになりました。

各関数が1つの責任だけを持つようになったことで、以下のメリットがありました：

理解しやすい: 各関数が短く、何をしているか明確
テストしやすい: 個別に動作確認できる
再利用しやすい: getTasksByDate は他の場所でも使える
修正しやすい: バグがあってもどの関数を見ればいいか明確

また、ファイルの分割にも応用できました。1つのファイルに全ての関数を書くのではなく、役割ごとにファイルを分けることで、さらに保守性が向上しました：

Before:
└── Calendar.js（200行、全機能）

After:
├── Calendar.js（カレンダー生成）
├── Form.js（フォーム処理）
├── localStorage.js（データ管理）
└── modal.js（モーダル操作）

この「一つの関数に一つの処理」という原則は、リーダブルコードで最も実践的で効果があった学びの1つでした。

率直な評価：良い点と悪い点

実際に読んで実践した経験から、この本の良い点と悪い点を率直にお伝えします。

良い点

プログラミング初心者の私でも、学べることがたくさんありました。上で紹介した3つのポイント以外にも、マジックナンバーの定数化、コメントの書き方など、すぐに実践できる具体的なテクニックが多数紹介されています。

特に素晴らしいのは、Before/Afterのコード例が必ずある点です。「こう書くと読みにくい」「こう改善すると読みやすくなる」という比較が視覚的に示されているため、初心者でも「なるほど！」と理解できます。

また、言語に依存しない普遍的な原則が書かれているため、JavaScript、Python、Java、どの言語を使っている人でも学べます。私はJavaScriptで実践しましたが、本書のサンプルコードはC++、Python、Javaなど様々な言語で書かれており、それでも理解できました。

薄くて読みやすいのも大きなメリットです。230ページと、技術書としては薄い部類で、図やコード例が多いため、実際の文章量はさらに少なく感じます。1章あたり15-20ページなので、通勤時間や休憩時間にも読み進められます。

そして何より、即効性があるのが最大の良い点です。読んだその日から変数名を改善でき、次の日には関数を分割できます。長期的な学習ではなく、すぐに効果が実感できるため、モチベーションも維持しやすいです。

悪い点

まだ私自身には実力が及ばない箇所もあり、完全に初心者向きの本ではないというのが正直な感想です。初心者でも学べる点は多くありますが、すべての章を完全に理解するのは難しいです。例えば、第14章のテストに関する内容など、初心者には少しハードルが高いと感じる部分もあります。

また、様々な言語でコードが書かれており、なんとなく理解はできるものの、初心者ではコードを読んで「なるほど！」とうなずけるポイントは少ないです。C++やPythonの細かい文法を知らないと、サンプルコードの改善点が理解しにくい場合があります。

さらに、実践するコードがないと意味がないという点も注意が必要です。この本はただ読むだけでは効果が薄く、自分のコードで実際にリファクタリングして初めて価値が出ます。まだ自分でアプリを作ったことがない完全初心者には、少し早いかもしれません。

こんな人におすすめ

以上を踏まえると、この本は以下のような人に特におすすめです：

強くおすすめできる人：

簡単なアプリを自力で作ったことがある
基礎文法（if文、for文、関数）は理解している
自分のコードに自信がない
コードレビューでよく指摘される
これから就活でポートフォリオを作る学生

おすすめしない人：

プログラミング完全初心者（まず入門書で基礎を学ぶべき）
実践するコードがない人（読むだけでは定着しない）
すでに上級者の人（既知の内容が多い可能性）

私の場合、タスク管理アプリのv1.0を作り終えたタイミングで読んだため、すぐに実践できました。「動くコード」は書けるようになったものの、品質に自信がない、というタイミングが最適だと思います。

まとめ

「リーダブルコード」は、完全な初心者には少し早いと思いますが、中級者レベルに差し掛かった（自力で簡単なアプリを作ったことがある）初心者であれば、理解できない箇所もまだ多いものの、すぐに実践できることが多く学べるため大変おすすめです。

実際に私も、変数名の改善、改行位置の工夫、関数の分割という3つのポイントを実践しただけで、コードの可読性が劇的に向上しました。読み返した時の理解スピードが速くなり、機能追加もしやすくなりました。

また、この本は成長と共に何回も読み返していきたい技術書の一つです。初心者のうちは理解できなかった章も、中級者、上級者とステップアップするたびに読み返すことで、新しい気づきが得られるはずです。

2,640円という価格を考えれば、コストパフォーマンスは最高です。ただし、繰り返しになりますが、読むだけでなく実践することが絶対条件です。自分のコードをリファクタリングしながら読むことで、この本の真価が発揮されます。

プログラミング初心者で、次のステップに進みたいと考えている方には、ぜひ手に取ってほしい一冊です。

必須ご相談内容	ご相談仕事依頼お問い合わせその他
必須お名前
必須メールアドレス
必須メッセージ本文