基礎から学ぶJavaScript入門 90日コース | JavaScriptでデータを扱う－ Day 29：自力コーディング練習

90日で身につけるJavaScript

2026.08.26

Day 29：自力コーディング練習（前半）
最大値を求める：配列の中で一番大きい数を見つける
1. ステップ1：考え方を言葉で整理する
2. ステップ2：コードにする
配列を検索：条件に合う要素を探す
1. ステップ1：考え方を言葉で整理する
2. ステップ2：コードにする
データをフィルター：条件に合うものだけを集める
1. ステップ1：考え方を言葉で整理する
2. ステップ2：コードにする（例：100以上の数だけを集める）
合計を計算：配列の値を足し合わせる
1. ステップ1：考え方を言葉で整理する
2. ステップ2：コードにする
4つの課題をまとめて動かす練習テンプレート（ブラウザで実行可能）
Day 29 前半のまとめと“自力コーディング”への一歩
Day 29：自力コーディング練習（後半）
自力コーディングの基本方針
1. ステップ1：紙やメモに“日本語で”手順を書く
2. ステップ2：日本語の手順を“コードの骨組み”に変える
課題①：最大値を求める（自力コーディング用テンプレート）
1. 思考ステップをコメントにしてから埋める
課題②：配列を検索（自力コーディング用テンプレート）
1. 「最初に見つかった1件」を返す検索
課題③：データをフィルター（自力コーディング用テンプレート）
1. 条件に合うものだけを新しい配列に集める
課題④：合計を計算（自力コーディング用テンプレート）
1. 「蓄積」の基本パターンを体に染み込ませる
自力コーディング用ミニチェックリスト
自力コーディング練習用テンプレート（ブラウザで実行しながら確認）
Day 29 後半のまとめ

Day 29：自力コーディング練習（前半）

「見本なしで“自分の手で”コードを書くためのウォームアップ」

Day 29では、これまで学んできた

配列
オブジェクト
条件分岐
ループ
データ処理（検索・フィルター・合計など）

を使って、「見本を見ずにコードを書く練習」 をしていきます。

ここでは、いきなり全部を自力で書くのではなく、

考え方のステップを言葉で整理する
それをコードに落とし込む
最後にテンプレートで動きを確認する

という流れで、「自力コーディング」に向けたウォームアップをしていきます。

最大値を求める：配列の中で一番大きい数を見つける

ステップ1：考え方を言葉で整理する

「最大値を求める」処理は、次のように考えます。

配列の最初の要素を「仮の最大値」とする
配列を先頭から順番に見ていく
今見ている値が「仮の最大値」より大きければ、最大値を更新する
最後まで見終わったときの値が「最大値」になる

この「仮の最大値を更新していく」という考え方は、合計や最小値などにも応用できる基本パターンです。

ステップ2：コードにする

// 数値配列の最大値を求める関数
function findMax(numbers) {
  // 配列が空の場合の安全策
  if (numbers.length === 0) {
    return null; // 最大値が存在しないのでnullを返します
  }

  // 最初の要素を仮の最大値とします
  let max = numbers[0];

  // 2番目以降の要素を順番にチェックします
  for (let i = 1; i < numbers.length; i++) {
    const value = numbers[i];

    // 今の値が仮の最大値より大きければ更新します
    if (value > max) {
      max = value;
    }
  }

  // 最終的なmaxが最大値です
  return max;
}

// 実行例
const nums = [3, 10, 5, 8, 2];
const maxValue = findMax(nums);
console.log('最大値は', maxValue, 'です。'); // 最大値は 10 です。

// 数値配列の最大値を求める関数
function findMax(numbers) {
  // 配列が空の場合の安全策
  if (numbers.length === 0) {
    return null; // 最大値が存在しないのでnullを返します
  }

  // 最初の要素を仮の最大値とします
  let max = numbers[0];

  // 2番目以降の要素を順番にチェックします
  for (let i = 1; i < numbers.length; i++) {
    const value = numbers[i];

    // 今の値が仮の最大値より大きければ更新します
    if (value > max) {
      max = value;
    }
  }

  // 最終的なmaxが最大値です
  return max;
}

// 実行例
const nums = [3, 10, 5, 8, 2];
const maxValue = findMax(nums);
console.log('最大値は', maxValue, 'です。'); // 最大値は 10 です。

JavaScript

max を「仮の最大値」として更新していくのがポイントです。
配列が空の場合に null を返すことで、「最大値が存在しない」という状態を表現しています。

配列を検索：条件に合う要素を探す

ステップ1：考え方を言葉で整理する

「配列を検索する」ときの基本的な考え方は次の通りです。

配列を先頭から順番に見ていく
各要素が「条件に合うかどうか」を判定する
条件に合うものが見つかったら、それを返す（または集める）

ここでは、「最初に見つかった1件だけを返す検索」 を作ります。

例：

配列 ['apple', 'banana', 'orange'] から 'banana' を探す

ステップ2：コードにする

// 配列から特定の値を検索する関数（最初に見つかった1件を返す）
function findValueInArray(array, target) {
  // 配列を先頭から順番にチェックします
  for (let i = 0; i < array.length; i++) {
    const value = array[i];

    // 値がターゲットと一致するかどうかを判定します
    if (value === target) {
      return value; // 見つかったらその値を返します
    }
  }

  // 最後まで見ても見つからなかった場合はnullを返します
  return null;
}

// 実行例
const fruits = ['apple', 'banana', 'orange'];
const result1 = findValueInArray(fruits, 'banana');
const result2 = findValueInArray(fruits, 'grape');

console.log('検索結果1:', result1); // banana
console.log('検索結果2:', result2); // null（見つからない）

// 配列から特定の値を検索する関数（最初に見つかった1件を返す）
function findValueInArray(array, target) {
  // 配列を先頭から順番にチェックします
  for (let i = 0; i < array.length; i++) {
    const value = array[i];

    // 値がターゲットと一致するかどうかを判定します
    if (value === target) {
      return value; // 見つかったらその値を返します
    }
  }

  // 最後まで見ても見つからなかった場合はnullを返します
  return null;
}

// 実行例
const fruits = ['apple', 'banana', 'orange'];
const result1 = findValueInArray(fruits, 'banana');
const result2 = findValueInArray(fruits, 'grape');

console.log('検索結果1:', result1); // banana
console.log('検索結果2:', result2); // null（見つからない）

JavaScript

=== で「完全一致」を判定しています。
見つからなかった場合に null を返すことで、「検索失敗」を表現しています。

データをフィルター：条件に合うものだけを集める

ステップ1：考え方を言葉で整理する

「フィルター」は、検索とよく似ていますが、

検索：条件に合うものを「1件だけ」返すことが多い
フィルター：条件に合うものを「すべて集めて新しい配列」にする

という違いがあります。

考え方は次の通りです。

結果を入れるための空の配列を用意する
元の配列を先頭から順番に見ていく
条件に合うものだけを結果配列に push() する
最後に結果配列を返す

ステップ2：コードにする（例：100以上の数だけを集める）

// 数値配列から、指定した値以上のものだけを集める関数
function filterGreaterOrEqual(numbers, threshold) {
  const result = []; // 条件に合う値を入れる配列

  for (let i = 0; i < numbers.length; i++) {
    const value = numbers[i];

    // 条件：valueがthreshold以上かどうか
    if (value >= threshold) {
      result.push(value); // 条件に合う値を結果配列に追加
    }
  }

  return result;
}

// 実行例
const nums2 = [50, 120, 80, 200, 150];
const filtered = filterGreaterOrEqual(nums2, 100);

console.log('100以上の値だけを集めた結果:', filtered); // [120, 200, 150]

// 数値配列から、指定した値以上のものだけを集める関数
function filterGreaterOrEqual(numbers, threshold) {
  const result = []; // 条件に合う値を入れる配列

  for (let i = 0; i < numbers.length; i++) {
    const value = numbers[i];

    // 条件：valueがthreshold以上かどうか
    if (value >= threshold) {
      result.push(value); // 条件に合う値を結果配列に追加
    }
  }

  return result;
}

// 実行例
const nums2 = [50, 120, 80, 200, 150];
const filtered = filterGreaterOrEqual(nums2, 100);

console.log('100以上の値だけを集めた結果:', filtered); // [120, 200, 150]

JavaScript

「条件に合うものだけを新しい配列に集める」というのがフィルターの基本パターンです。
元の配列 nums2 は書き換えず、新しい配列 filtered に結果を入れています。

合計を計算：配列の値を足し合わせる

ステップ1：考え方を言葉で整理する

「合計を計算する」処理は、次のように考えます。

合計を入れる変数を0で初期化する
配列を先頭から順番に見ていく
各要素の値を合計変数に足していく
最後に合計変数を返す

これは、最大値のときと同じく「1つの変数に値を蓄積していく」パターンです。

ステップ2：コードにする

// 数値配列の合計を計算する関数
function calculateSum(numbers) {
  let sum = 0; // 合計を入れる変数（最初は0）

  for (let i = 0; i < numbers.length; i++) {
    const value = numbers[i];
    sum += value; // 合計に値を足していきます
  }

  return sum;
}

// 実行例
const nums3 = [100, 200, 50];
const total = calculateSum(nums3);

console.log('合計は', total, 'です。'); // 合計は 350 です。

// 数値配列の合計を計算する関数
function calculateSum(numbers) {
  let sum = 0; // 合計を入れる変数（最初は0）

  for (let i = 0; i < numbers.length; i++) {
    const value = numbers[i];
    sum += value; // 合計に値を足していきます
  }

  return sum;
}

// 実行例
const nums3 = [100, 200, 50];
const total = calculateSum(nums3);

console.log('合計は', total, 'です。'); // 合計は 350 です。

JavaScript

sum += value; は sum = sum + value; の短縮形です。
合計は「蓄積」の典型的な例で、平均値などにも応用できます。

4つの課題をまとめて動かす練習テンプレート（ブラウザで実行可能）

以下のテンプレートをブラウザで開き、コンソールで「最大値」「検索」「フィルター」「合計」の動きを確認してください。

このテンプレートは「見本」として用意していますが、 Day 29の本番練習では、これを見ずに自分で書いてみる ことが目標になります。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 29 前半：自力コーディング練習 テンプレート</title>
</head>
<body>
  <h1>Day 29 前半：自力コーディング練習（最大値・検索・フィルター・合計）</h1>
  <p>ブラウザのコンソールを開いて、ログを確認してください。</p>

  <script>
    console.log('--- 最大値を求める ---');

    function findMax(numbers) {
      if (numbers.length === 0) {
        return null;
      }

      let max = numbers[0];

      for (let i = 1; i < numbers.length; i++) {
        const value = numbers[i];
        if (value > max) {
          max = value;
        }
      }

      return max;
    }

    const nums = [3, 10, 5, 8, 2];
    console.log('配列:', nums);
    console.log('最大値:', findMax(nums));

    console.log('--- 配列を検索（最初に見つかった値） ---');

    function findValueInArray(array, target) {
      for (let i = 0; i < array.length; i++) {
        const value = array[i];
        if (value === target) {
          return value;
        }
      }
      return null;
    }

    const fruits = ['apple', 'banana', 'orange'];
    console.log('配列:', fruits);
    console.log('検索 "banana":', findValueInArray(fruits, 'banana'));
    console.log('検索 "grape":', findValueInArray(fruits, 'grape'));

    console.log('--- データをフィルター（指定値以上） ---');

    function filterGreaterOrEqual(numbers, threshold) {
      const result = [];

      for (let i = 0; i < numbers.length; i++) {
        const value = numbers[i];
        if (value >= threshold) {
          result.push(value);
        }
      }

      return result;
    }

    const nums2 = [50, 120, 80, 200, 150];
    console.log('配列:', nums2);
    console.log('100以上の値:', filterGreaterOrEqual(nums2, 100));

    console.log('--- 合計を計算 ---');

    function calculateSum(numbers) {
      let sum = 0;

      for (let i = 0; i < numbers.length; i++) {
        const value = numbers[i];
        sum += value;
      }

      return sum;
    }

    const nums3 = [100, 200, 50];
    console.log('配列:', nums3);
    console.log('合計:', calculateSum(nums3));

    console.log('--- Day 29 前半：自力コーディング練習のテンプレート実行完了 ---');
  </script>
</body>
</html>

Day 29 前半のまとめと“自力コーディング”への一歩

Day 29前半では、

最大値を求める
配列を検索する
データをフィルターする
合計を計算する

という4つの課題について、

まず「考え方」を言葉で整理し
それを「コード」に落とし込む

という流れを確認しました。

ここからが本番で、

「見本を閉じて、同じ機能を自分の手だけで書いてみる」

という練習に進んでいくことになります。

最初はうまく書けなくても大丈夫です。 「どう書けばよかったっけ？」と悩む時間そのものが、実力になる時間 です。

Day 29後半では、この自力コーディングをもう少し発展させて、自分なりの書き方・関数名・コメントの付け方を模索していく練習へと進んでいきます。

Day 29：自力コーディング練習（後半）

「“見本なし”で書けるようになるための、実戦トレーニング」

Day 29後半では、前半で確認した

最大値を求める
配列を検索
データをフィルター
合計を計算

という4つの課題を、本当に見本なしで書けるようになるための練習方法 を整理していきます。

ここでの主役は「コード」ではなく、 “どうやって自分の頭の中で組み立てるか” という思考プロセスです。

自力コーディングの基本方針

「いきなり書かない。まず“言葉”で組み立てる」

ステップ1：紙やメモに“日本語で”手順を書く

いきなりコードを書こうとすると、文法やスペルに意識が取られて、肝心の「処理の流れ」がぼやけてしまいます。

そこで、まずは 日本語で手順を書く ことをおすすめします。

例：最大値を求める場合

配列が空なら「最大値なし」とする
最初の要素を「仮の最大値」とする
2番目以降の要素を順番に見ていく
今の値が仮の最大値より大きければ、仮の最大値を更新する
最後まで見終わったときの仮の最大値が答え

この「日本語の手順」が、そのまま for文・if文・変数更新 に変換されていきます。

ステップ2：日本語の手順を“コードの骨組み”に変える

次に、その手順をコードの骨組みにします。

例：最大値の骨組み

function findMax(numbers) {
  // 1. 配列が空なら「最大値なし」
  // 2. 最初の要素を仮の最大値
  // 3. 2番目以降を順番に見る
  // 4. 大きければ更新
  // 5. 最後に仮の最大値を返す
}

function findMax(numbers) {
  // 1. 配列が空なら「最大値なし」
  // 2. 最初の要素を仮の最大値
  // 3. 2番目以降を順番に見る
  // 4. 大きければ更新
  // 5. 最後に仮の最大値を返す
}

JavaScript

このように、コメントだけ先に書いておく と、「何を書くべきか」がはっきりした状態でコードを書けます。

課題①：最大値を求める（自力コーディング用テンプレート）

思考ステップをコメントにしてから埋める

// 数値配列の最大値を求める関数（自力コーディング練習用）
function findMax(numbers) {
  // 1. 配列が空かどうかをチェックする
  //    → 空ならnullを返す

  // 2. 最初の要素を「仮の最大値」として変数に入れる

  // 3. 2番目以降の要素をfor文で順番に見る

  // 4. 今の値が仮の最大値より大きければ、仮の最大値を更新する

  // 5. 最後に仮の最大値を返す
}

// 数値配列の最大値を求める関数（自力コーディング練習用）
function findMax(numbers) {
  // 1. 配列が空かどうかをチェックする
  //    → 空ならnullを返す

  // 2. 最初の要素を「仮の最大値」として変数に入れる

  // 3. 2番目以降の要素をfor文で順番に見る

  // 4. 今の値が仮の最大値より大きければ、仮の最大値を更新する

  // 5. 最後に仮の最大値を返す
}

JavaScript

このテンプレートを使って、 コメントをヒントにしながら、自分で中身を埋める 練習をすると効果的です。

課題②：配列を検索（自力コーディング用テンプレート）

「最初に見つかった1件」を返す検索

// 配列から特定の値を検索する関数（自力コーディング練習用）
function findValueInArray(array, target) {
  // 1. 配列を先頭から順番にfor文で回す

  // 2. 各要素がtargetと一致するかどうかをif文で判定する

  // 3. 一致したら、その値をreturnで返す

  // 4. 最後まで見ても見つからなかった場合はnullを返す
}

// 配列から特定の値を検索する関数（自力コーディング練習用）
function findValueInArray(array, target) {
  // 1. 配列を先頭から順番にfor文で回す

  // 2. 各要素がtargetと一致するかどうかをif文で判定する

  // 3. 一致したら、その値をreturnで返す

  // 4. 最後まで見ても見つからなかった場合はnullを返す
}

JavaScript

ここでも、 「for → if → return → 最後にnull」 という流れを、頭の中でなぞりながら書いていきます。

課題③：データをフィルター（自力コーディング用テンプレート）

条件に合うものだけを新しい配列に集める

// 数値配列から、指定した値以上のものだけを集める関数（自力コーディング練習用）
function filterGreaterOrEqual(numbers, threshold) {
  // 1. 結果を入れるための空の配列resultを用意する

  // 2. 元の配列numbersをfor文で先頭から順番に回す

  // 3. 各要素valueがthreshold以上かどうかをif文で判定する

  // 4. 条件に合う場合はresultにpushする

  // 5. ループが終わったらresultを返す
}

// 数値配列から、指定した値以上のものだけを集める関数（自力コーディング練習用）
function filterGreaterOrEqual(numbers, threshold) {
  // 1. 結果を入れるための空の配列resultを用意する

  // 2. 元の配列numbersをfor文で先頭から順番に回す

  // 3. 各要素valueがthreshold以上かどうかをif文で判定する

  // 4. 条件に合う場合はresultにpushする

  // 5. ループが終わったらresultを返す
}

JavaScript

フィルターは、

「空の配列を用意する」
「条件に合うものだけpushする」

という2点をセットで覚えておくと、どんな条件にも応用しやすくなります。

課題④：合計を計算（自力コーディング用テンプレート）

「蓄積」の基本パターンを体に染み込ませる

// 数値配列の合計を計算する関数（自力コーディング練習用）
function calculateSum(numbers) {
  // 1. 合計を入れる変数sumを0で初期化する

  // 2. 配列numbersをfor文で先頭から順番に回す

  // 3. 各要素valueをsumに足していく（sum += value）

  // 4. ループが終わったらsumを返す
}

// 数値配列の合計を計算する関数（自力コーディング練習用）
function calculateSum(numbers) {
  // 1. 合計を入れる変数sumを0で初期化する

  // 2. 配列numbersをfor文で先頭から順番に回す

  // 3. 各要素valueをsumに足していく（sum += value）

  // 4. ループが終わったらsumを返す
}

JavaScript

この「sumを0からスタートして足し込んでいく」パターンは、平均値・スコア集計・売上合計など、あらゆる場面で使われる重要な型です。

自力コーディング用ミニチェックリスト

「書き終わったあとに、自分で見直すポイント」

チェック1：関数の“入り口”と“出口”がはっきりしているか

引数は何を受け取る前提になっているか
戻り値は何を返す前提になっているか
「見つからない」「空配列」のときの扱いを決めているか

チェック2：ループの範囲が正しいか

for (let i = 0; i < array.length; i++) の i の初期値と条件は正しいか
1番目から回すのか、2番目から回すのかを意識できているか

チェック3：条件式が意図通りか

>= と > を間違えていないか
=== と == を意図して使っているか

チェック4：元の配列を壊していないか

フィルターや合計では、元の配列を書き換えていないか
新しい配列や変数に結果を入れているか

自力コーディング練習用テンプレート（ブラウザで実行しながら確認）

最後に、「自分で書いたコードを差し替えて試せる」ためのシンプルなテンプレートを用意しておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Day 29 後半：自力コーディング練習 用テンプレート</title>
</head>
<body>
  <h1>Day 29 後半：自力コーディング練習</h1>
  <p>ブラウザのコンソールを開いて、ログを確認してください。</p>

  <script>
    console.log('--- 自力コーディング練習開始 ---');

    // ここに自分で書いた関数を貼り付けて試していきます。
    // 例：findMax / findValueInArray / filterGreaterOrEqual / calculateSum など

    // サンプルデータ
    const numbers = [3, 10, 5, 8, 2];
    const numbers2 = [50, 120, 80, 200, 150];
    const numbers3 = [100, 200, 50];
    const fruits = ['apple', 'banana', 'orange'];

    // ここから下は、自分で書いた関数を呼び出してテストする場所です。
    // 例：
    // console.log('最大値:', findMax(numbers));
    // console.log('検索結果:', findValueInArray(fruits, 'banana'));
    // console.log('フィルター結果:', filterGreaterOrEqual(numbers2, 100));
    // console.log('合計:', calculateSum(numbers3));

    console.log('--- 自力コーディング練習テンプレートの実行が完了しました ---');
  </script>
</body>
</html>

このテンプレートの中に、 自分で書いた関数をコピペして動かしてみる ことで、

うまく動いたときの「できた！」という感覚
うまく動かなかったときの「どこが違うんだろう？」という気づき

を積み重ねていくことができます。

Day 29 後半のまとめ

Day 29後半では、

いきなりコードを書かず、まず「日本語で手順を書く」こと
コメントを“骨組み”として先に書き、そのあと中身を埋める練習方法
最大値・検索・フィルター・合計という4つの課題を、自力で書くためのテンプレートとチェックポイント

を整理しました。

自力コーディングは、 「悩む時間」そのものが成長の時間 です。

見本を閉じて、少し不安なまま手を動かしてみる—— その一歩を何度も踏むことで、「自分の書き方」「自分の癖」「自分の得意パターン」が少しずつ育っていきます。

Day 30以降も、この「自力で組み立てる感覚」を軸にしながら、より実践的なコードへ進んでいくことになりますので、ぜひ今日の練習を何度か繰り返して、自分の中に“書ける感覚”を定着させていってください。

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。「覚える」ではなく「使える」ようになるプログラミング学習。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

Day 29：自力コーディング練習（前半）

最大値を求める：配列の中で一番大きい数を見つける

ステップ1：考え方を言葉で整理する

ステップ2：コードにする

配列を検索：条件に合う要素を探す

ステップ1：考え方を言葉で整理する

ステップ2：コードにする

データをフィルター：条件に合うものだけを集める

ステップ1：考え方を言葉で整理する

ステップ2：コードにする（例：100以上の数だけを集める）

合計を計算：配列の値を足し合わせる

ステップ1：考え方を言葉で整理する

ステップ2：コードにする

4つの課題をまとめて動かす練習テンプレート（ブラウザで実行可能）

Day 29 前半のまとめと“自力コーディング”への一歩

Day 29：自力コーディング練習（後半）

自力コーディングの基本方針

ステップ1：紙やメモに“日本語で”手順を書く

ステップ2：日本語の手順を“コードの骨組み”に変える

課題①：最大値を求める（自力コーディング用テンプレート）

思考ステップをコメントにしてから埋める

課題②：配列を検索（自力コーディング用テンプレート）

「最初に見つかった1件」を返す検索

課題③：データをフィルター（自力コーディング用テンプレート）

条件に合うものだけを新しい配列に集める

課題④：合計を計算（自力コーディング用テンプレート）

「蓄積」の基本パターンを体に染み込ませる

自力コーディング用ミニチェックリスト

チェック1：関数の“入り口”と“出口”がはっきりしているか

チェック2：ループの範囲が正しいか

チェック3：条件式が意図通りか

チェック4：元の配列を壊していないか

自力コーディング練習用テンプレート（ブラウザで実行しながら確認）

Day 29 後半のまとめ

広告ブロッカーが検出されました