第 3 章：実際にコードを読んでみる

公開日: 2025-06-21著者: Yov in YovStudio

コードを読んでみよう：FizzBuzz Plus 編

ここからは、実際にコードを読んでみましょう。

とはいえ、いきなり難しいコードに挑戦するのではなく、まずは短くてシンプルなものを題材にして、「どう読めばよいか」という感覚を一緒につかんでみたいと思います。

今回は、次のような JavaScript のコードを読んでみます。
実はこのコード、AI に「読者の方と一緒に読むのにちょうどいいサンプルコードをください」と頼んで提案してもらったものなんです。

function fizzBuzzPlus(n) {
  for (let i = 1; i <= n; i++) {
    let output = '';
    if (i % 3 === 0) output += 'Fizz';
    if (i % 5 === 0) output += 'Buzz';
    if (i % 7 === 0) output += 'Plus';
    console.log(output || i);
  }
}
fizzBuzzPlus(30);

まずは自分で読んでみよう

いきなり解説を読む前に、ぜひ一度ご自身でこのコードをざっと眺めてみてください。
もちろん現時点であまり読めなくても焦ったり落ち込んだりすることはありません。ちょっとした腕試しくらいの気持ちで大丈夫です。

「これはどんな動きをしていそうか？」
「どこがポイントになりそうか？」
そんなことを考えながら、頭の中でシミュレーションしてみましょう。

もしイメージがつかない場合、実際に動かしてみても OK です。以下のようなオンライン環境を使ってみると良いでしょう（JavaScript が実行できます）：

コードの読み方の一例（私の場合）

では、ここからは私がこのコードを初めて読むと仮定したときの流れを紹介します。
ポイントは、最初から細かく見すぎずに、まず全体をざっくりと把握することです。

① 全体の構造をざっくりつかむ

まず「何行くらいあるかな」「どんなかたまりがあるかな」と目を通します。

このコードはおおよそ 10 行で、大きく 2 つのパートで構成されているようですね。

パート 1：fizzBuzzPlus という関数の定義（ほとんどがこれ）

function fizzBuzzPlus(n) {
  for (let i = 1; i <= n; i++) {
    let output = '';
    if (i % 3 === 0) output += 'Fizz';
    if (i % 5 === 0) output += 'Buzz';
    if (i % 7 === 0) output += 'Plus';
    console.log(output || i);
  }
}

パート 2：最後にその関数を 30 という引数で呼び出している

fizzBuzzPlus(30);

② 関数名からイメージしてみる

続けて関数の中を読んでいきますが、まず関数名でどんな処理をしているかイメージします。
命名ルールがしっかりしているプロジェクトのコードであれば、関数名だけでどんな処理をしているか、ある程度把握できたりします。

// 関数名は fizzBuzzPlus
function fizzBuzzPlus(n) {

fizzBuzz (フィズ・バズ)という名前、見覚えのある人もいるかもしれません。
これはプログラミングの入門課題でよく登場するのですが、3 の倍数なら “Fizz”、5 の倍数なら “Buzz” を出力する、というものです。

ここではさらに "Plus" という文字列も加わっているため、何かしらの処理が加えられた拡張版の FizzBuzz（FizzBuzzPlus）のようだとあたりをつけます。

③ for 文の中身を眺める

for (let i = 1; i <= n; i++) {
  let output = '';
  if (i % 3 === 0) output += 'Fizz';
  if (i % 5 === 0) output += 'Buzz';
  if (i % 7 === 0) output += 'Plus';
  console.log(output || i);
}

1 から n まで for ループしていますね。
n には関数呼び出し時の引数が入るので、今回は n = 30 になりますよ。

関数呼び出し箇所（再掲）

fizzBuzzPlus(30); // n = 30 になるので、関数内のループは 1 ～ 30 まで

また、ループごとに output という変数を空文字で初期化し、以下の条件をチェックして output を作っているようです。

3 の倍数 → "Fizz"
5 の倍数 → "Buzz"
7 の倍数 → "Plus"

なるほど、fizzBuzz に 7 の倍数の処理が加わっているから fizzBuzzPlus なわけですね。

入門課題によく使われるというだけあって、「繰り返し」「条件分岐」「剰余計算」「文字列操作」という基礎が短いコードにしっかり盛り込まれています。

倍数判定のところで出てきた%は、割った余りを求める「剰余計算」の演算子で、実務でも意外と使います。次見かけたときに「なんか見たことあるぞ」と思えるくらいでいいので、頭の片隅に置いておくとよいでしょう。

if (i % 3 === 0)  // 3で割った余りが0の場合 = 3の倍数の場合

④ `output || i` はちょっとしたトリック

forループの最後の行、console.log(output || i) という書き方は、初学者には少しトリッキーかもしれません。

これは「output に値が入っていればそれを使い、空であれば i（数値）を出力する」という意味になります。 JavaScript の「論理和（||）」を使った書き方ですね。

この書き方を知らなくても、コードを動かしてみたときに「あれ？output が空のときは数字が出てくるな」と気づければ、それも立派な「読む力」だと思います。

⑤ 複数条件に一致することもある

3 の倍数で Fizz、5 の倍数で Buzz、7 の倍数で Plus なら、たとえば 15 は "FizzBuzz"、21 は "FizzPlus"、105 は "FizzBuzzPlus" になります。

このように、複数の条件に同時に当てはまることがあるので、実行結果を考える（または見る）ときも「組み合わせ」に注目してみましょう。

読むときのスタンス：地図を読むように

と、こんな感じで私はコードを読んでいて、まず地図をざっくり見るように全体像をとらえ、そこから徐々にズームインしていくようにしています。

細かい変数名や条件の意味を最初からすべて理解しようとせず、「なんとなくの構造」→「処理の流れ」→「各行の意味」という順で段階的に読んでいきます。

たとえばこの FizzBuzz Plus のコードでいえば、

何かループして出力してるぞ
倍数で文字を出してるっぽい
なるほど、3 と 5 と 7 の倍数で出力が変わるのか
最後の || ってなんだ？ …なるほど、空なら数字を出すのか

というように、少しずつ視野を絞り、フォーカスしていくイメージです。

まとめ

コードを読むときは、まず「構造」をざっくりとつかむのがコツ
見たことがない書き方（今回の output || i など）は、「どう動いてるか」に注目すれば OK
いきなり完璧に理解しなくても、「なんとなくわかる」「動きが読める」だけでも十分

こんな感じで、コードを読む練習を積み重ねていきましょう。

次の章では、「読む力」を深める実験としてのプログラミングというテーマで一緒にコードに手を加えてみましょう。
ちょっとした変更を加えることで、ただ「読む」だけでは見えなかった発見があったり、理解の深まりを実感できるかもしれません。

FizzBuzz を初めて知った方へ（補足）

FizzBuzz（フィズ・バズ）は、「3 の倍数で Fizz、5 の倍数で Buzz、それ以外は数字を出力する」という、プログラミング入門で定番のお題です。今回一緒に読んだコードFizzBuzz Plusは AI がFizzBuzzを独自に拡張して、「7 の倍数は Plus」としたバージョンですね。

「繰り返し」や「条件分岐」など、短いコードに色々な要素が詰まっているため、プログラミングの基礎が身についているかの課題として使われることが多いです。

article 第 3 章：実際にコードを読んでみる