カテゴリー
お問い合わせ

【脱・for文ループ】JavaScriptの便利な配列メソッド4選

JavaScript
目次

JavaScriptで配列のデータを操作して、特定の条件で抽出したり、中身を書き換えたりする処理は、Web制作のあらゆる場面で登場しますよね。

そんな時、for文 や forEach を使ってループを回し、配列を自前で用意して……という複雑なコードを書いていませんか？ 確かにそれでも動きますが、モダンなJavaScriptには、より短く、直感的に配列を操作できる便利なメソッドがたくさん用意されています！

配列メソッドを使うメリット
for文 のような「どうやってループを回すか」という手順を書くのではなく、「データをどう処理したいか」を直接記述できるため、コードの行数が減り、誰が見ても一目で意図が伝わる綺麗なコードになります。

今回は、「厳選配列メソッド4選」を、デモ画面を使って視覚的に分かりやすく解説します！

デモ動作

See the Pen JavaScript 配列メソッド4選 by mikanbako (@mikanbako) on CodePen.

全画面でのデモ動作は以下のリンクからご確認下さい！（別タブで開かれます）

実装コードの紹介

【HTML】

<div class="l-wrap">
  <h2>JS 配列メソッドのデモ</h2>
  
  <div class="p-data-box">
    <h3>元のデータ（タスク一覧）</h3>
    <pre id="js-original-data"></pre>
  </div>

  <div class="p-buttons">
    <button class="p-btn" id="btn-map">map (名前だけ抽出)</button>
    <button class="p-btn" id="btn-filter">filter (作業中のみ抽出)</button>
    <button class="p-btn" id="btn-find">find (IDが3のタスク)</button>
    <button class="p-btn" id="btn-some">some (未着手はある？)</button>
  </div>

  <div class="p-result-box">
    <h3>実行結果</h3>
    <pre id="js-result">ボタンを押してみてね！</pre>
  </div>
</div>

【CSS】

.l-wrap {
  max-width: 600px;
  margin: 0 auto;
}

.p-data-box, .p-result-box {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  text-align: left;
}

pre {
  margin: 0;
  font-family: monospace;
  background-color: #f1f1f1;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}

.p-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.p-btn {
  background-color: #1bb4d4;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 4px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s;
}

.p-btn:hover {
  opacity: 0.8;
}

【JavaScript】

// ベースとなる配列データ
const tasks = [
  { id: 1, name: "HTML/CSSの復習", status: "完了" },
  { id: 2, name: "JSの配列メソッド", status: "作業中" },
  { id: 3, name: "Vue.jsの基礎", status: "未着手" },
  { id: 4, name: "WordPressの基礎", status: "作業中" }
];

// 初期表示：元のデータを画面に出力
document.getElementById('js-original-data').textContent = JSON.stringify(tasks, null, 2);

const resultBox = document.getElementById('js-result');

// ① map() の処理
document.getElementById('btn-map').addEventListener('click', () => {
  const taskNames = tasks.map(task => task.name);
  resultBox.textContent = JSON.stringify(taskNames, null, 2);
});

// ② filter() の処理
document.getElementById('btn-filter').addEventListener('click', () => {
  const activeTasks = tasks.filter(task => task.status === "作業中");
  resultBox.textContent = JSON.stringify(activeTasks, null, 2);
});

// ③ find() の処理
document.getElementById('btn-find').addEventListener('click', () => {
  const targetTask = tasks.find(task => task.id === 3);
  resultBox.textContent = JSON.stringify(targetTask, null, 2);
});

// ④ some() の処理
document.getElementById('btn-some').addEventListener('click', () => {
  const hasTodo = tasks.some(task => task.status === "未着手");
  resultBox.textContent = JSON.stringify(hasTodo, null, 2);
});

コードの解説・こだわったポイント

各配列メソッドの役割と強み

const taskNames = tasks.map(task => task.name);

map() 【加工】: 配列の要素を1つずつ取り出して処理し、新しい配列を作る関数です。デモでは、オブジェクトから name だけを引き抜いた「文字列の配列」に作り替えています。

const activeTasks = tasks.filter(task => task.status === "作業中");

filter() 【抽出】: 条件に合う（条件式が true になる）要素だけをすべて集めて新しい配列を作る関数です。「作業中」のタスクだけを絞り込むような際に最適です。

const targetTask = tasks.find(task => task.id === 3);

find() 【検索】: 条件に合う最初の要素を1つだけ見つけて、オブジェクト（または値）そのものを返す関数です。一意のIDでデータを検索する時に便利です。

const hasTodo = tasks.some(task => task.status === "未着手");

some() 【判定】: 配列の中に、条件に合う要素が1つでもあるかどうかを true / false で返す関数です。「未着手のタスクが残っているか？」といったチェック処理に便利です。

結果を綺麗に整形して表示する

今回のデモでは、JavaScriptの裏側の処理結果を、開発者ツール（コンソール）を開かなくても画面上で確認できるように工夫しました。
そこで大活躍しているのが、以下のコードです。

JSON.stringify(データ, null, 2)

普通、JavaScriptのオブジェクトや配列をそのまま画面に出力しようとすると、[object Object] と表示されて中身が見えなくなってしまいます。

JSON.stringify() は、データ構造を文字列に変換してくれる関数なのですが、後ろに null, 2 というオプションを添えてあげるのが最大のポイントです！これをつけることで、「スペース2つ分のインデントを入れて、改行された見やすい形」に自動で整形してくれます。 HTML側の <pre> タグと組み合わせることで、スマホからでもパソコンからでも、パッと見でコードの実行結果が分かるデモ画面を実現しました！

補足：参考リンク

MDN: 配列の標準組み込みオブジェクト

まとめ

今回は、Web制作で頻出するJavaScriptの便利な配列メソッドと、それを画面上に綺麗に出力して確認するデモの実装をご紹介しました。

配列メソッドを使いこなせるようになると、コードの記述量が減るだけでなく、「このコードはデータの抽出をしているんだな」「要素の加工をしているんだな」という意図が他のエンジニアにも伝わるようになります。

また、ロジック系の解説記事であっても、JSON.stringify などを駆使して「読者がその場で挙動を目で見て確認できる工夫」を取り入れることの大切さも、今回のデモ作成を通して改めて実感しました。

これからも、スマートなロジック設計と、読者に優しい親切なアウトプットを意識して、日々の開発スキルを磨いていきます！

最後まで読んでいただき、ありがとうございました！

Prev
Next

関連記事