更新日: 2022年05月31日
公開日: 2020年03月11日

Javascriptの「map」「forEach」メソッドで配列から要素を取り出そう

プログラミング初学者の中には、「Javascriptの配列が苦手」や「mapやforEachなどメソッドがたくさんあって分からない」と感じている方もいるのではないでしょうか？

Javascriptに限らず、RubyやPythonでも配列は存在します。Javascriptでしっかりと配列の操作をできるようになると、他の言語であっても応用可能なので、理解が早くなります。

本記事では、コードを書きながら配列を理解できるようになっていますので、ぜひ参考にしてみてください。

HTMLとJavascriptを使う準備をしよう
配列から要素を取り出そう【forEachメソッド編】
配列から要素を取り出そう【mapメソッド編】
mapメソッドを使いHTMLに要素を追加してみよう①
mapメソッドを使いHTMLに要素を追加してみよう②
まとめ

HTMLとJavascriptを使う準備をしよう

まずはHTMLとJavascriptを使う準備をしていきます。好きな場所に「javascript_array」という名前のフォルダ（ディレクトリ）を作成してください。

次に作成したフォルダをコードエディタで開きましょう。本記事では多くの開発現場で使用されている『Visual Studio Code（以下VSCodeと呼ぶ）』を用いて解説していきます。

VSCodeでフォルダを開き、直下に「index.html」と「script.js」を作成してください。ファイルやフォルダの作成はVSCode上でおこなうと作業が楽になります。

次に各ファイルに下記コードを貼り付けてください。

[index.html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascriptの配列</title>
  </head>
  <body>
    <h1>Javascriptの配列</h1>
    <script src="script.js"></script>
  </body>
</html>

[script.js]

const data = [2, 3, 4, 5];
console.log(data);

コードを貼り付けたら、Google Chrome（以下Chromeと呼ぶ）でindex.htmlを開きましょう。ブラウザとしてChromeを使用するのが一般的であるため、使用したことがない方はこの機会にインストールしておきましょう。

ブラウザでindex.htmlを開けたら、右クリックで「検証」ボタンを押してください。そうすると、別タブが開きます。

別タブの「コンソール画面」に[2, 3, 4, 5]の表記があれば、正しくJavascriptのフォルダを読み込めている証拠です。この表記はscript.jsで定義した変数dataの値で、『配列』と呼ばれるデータ型です。

本記事ではChromeの検証画面で、Javascriptの変数を頻繁に使用していきます。

現役エンジニアからデザインツールの使い方やWeb制作を学ぶならCodeCampのWebデザインマスターコースがおすすめ！

➡️未経験からWebデザインをオンラインプログラミングスクールで習得

配列から要素を取り出そう【forEachメソッド編】

本章ではJavascriptで配列から要素を取り出す方法について解説していきます。要素を取り出す方法はいくつかありますが、まずは「forEach」メソッドをみていきましょう。

「script.js」を開き下記コードを貼り付けてください。コードの貼り付けが終わったら、ブラウザのコンソール部分を確認してみましょう。（注：必ずChromeの検証機能を使用してください。）

const data = [2, 3, 4, 5];

data.forEach((value) => {
  console.log(value);
});

コンソール部分に配列の要素が表示されていれば成功です。このようにforEarchメソッドを使うと、配列の中から要素を1つずつ取り出せます。

forEachメソッドの引数（value）は、取り出された要素が代入されます。またforEachメソッドの引数は下記のように3つまで持つことが可能です。

data.forEach((value, index, array) => {
  処理の内容
});

//コメント
value：配列の中の要素
index：要素のインデックス番号（0から始まる）
array：元の配列

それではこれらの引数を使用してみましょう。「script.js」を開き、下記コードを貼り付けてください。

const data = [2, 3, 4, 5];

data.forEach((value, index) => {
  console.log(`配列の${index + 1}番目の要素は${value}です。`);
});

コンソールに表示される内容が下画像のようになれば成功です。ちなみにiindex + 1としているのは、インデックス番号と要素の順番が異なるためです。

配列の中の2は1番目ですが、インデックス番号でいうと0となります。実際の要素の順番を知りたければ、インデックス番号に1を足す必要があります。

次は配列の中身が少し複雑なパターンでforEachメソッドを使用してみましょう。「script.js」を開き、下記コードを貼り付けてください。


const data2 = [
  { id: 1, name: "John", age: 28 },
  { id: 2, name: "Ami", age: 22 },
  { id: 3, name: "Mike", age: 25 },
];
data2.forEach((value2) => {
  console.log(`${value2.name}は${value2.age}歳です。`);
});

ブラウザを開きコンソール画面が下画像のようになれば成功です。配列の中身が、オブジェクト（{....}の形のもの）になったとしてもforEachメソッドを使用できます。


const data2 = [
  { id: 1, name: "John", age: 28 },
  { id: 2, name: "Ami", age: 22 },
  { id: 3, name: "Mike", age: 25 },
];
data2.forEach((value2) => {
  console.log(`${value2.name}は${value2.age}歳です。`);
});

//コメント
//配列の中身が1つずつ取り出される。
value2 =  { id: 1, name: "John", age: 28 }
value2 =  { id: 2, name: "Ami", age: 22 }
value2 =  { id: 3, name: "Mike", age: 25 }

//value2のnameの値を取り出すにはvalue2.nameと書く

配列から要素を取り出そう【mapメソッド編】

次に「map」メソッドについて見ていきましょう。mapメソッドは、要素を取り出すだけ出なく、要素に何らかの処理を加えて結果をかえす場合に使用されます。

「script.js」を開き下記コードを貼り付けてください。

const data3 = [1, 2, 3, 4, 5];

data3.map((value) => {
  console.log(value * value);
});

ブラウザのコンソール画面が下画像のようになれば成功です。forEachメソッド同様に、配列の要素を取り出せているのが分かります。

上記コードでは、取り出した要素同士をかけ合わせる処理を行っています。（1 x 1, 2 x 2….）

mapメソッドを使えば、要素を配列から取り出し、処理を加えて新しい配列をつくることも可能です。それではscript.jsに下記コードを貼り付けてみましょう。

const data3 = [1, 2, 3, 4, 5];
data4 = [];
data3.map((value, index, array) => {
  data4.push(value * value);
});

console.log(data4);

pushは配列に要素を追加できるJavascriptのメソッドです。

mapメソッドを使いHTMLに要素を追加してみよう①

ここまでmapメソッドの使い方を解説してきましたが、実際にどのように使うのかイメージがわかない方もいるかもしれません。本章では、もう少し実務に近いかたちでmapメソッドを使っていきましょう。

「index.html」と「script.js」を開き、書くファイルに下記コードを貼り付けてください。

[index.html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascriptの配列</title>
  </head>
  <body>
    <h1>Javascriptの配列</h1>
   <h2>記事の内容</h2>
    <div class="post-content">
      <ul id="post-content-list"></ul>
    </div>
    <script src="script.js"></script>
  </body>
</html>

[script.js]

const posts = [
  { id: 1, content: "Rubyは楽しいよ！" },
  { id: 2, content: "Pythonで自動化しよう！" },
  { id: 3, content: "JavascriptでWebサイトに動きをつけよう！" },
  { id: 4, content: "PHPでWebアプリを作ろう！" },
];

document.addEventListener("DOMContentLoaded", function () {
  let contentList = document.getElementById("post-content-list");
  posts.map((post) => {
    postContent = post.content;
    let li = document.createElement("li");
    let contentText = document.createTextNode(postContent);
    li.appendChild(contentText);
    contentList.appendChild(li);
  });
});

ブラウザをリロードすると下画像のようになっているかと思います。index.htmlに「Rubyは楽しいよ！」などの表記はしていないにも関わらず、表示されています。

これはscript.jsに貼り付けたコードのおかげです。コードの内容を詳しく見ていきましょう。

中にオブジェクトが入った配列を用意しました。今回はcontentの中身をHTMLに反映させています。



const posts = [
  { id: 1, content: "Rubyは楽しいよ！" },
  { id: 2, content: "Pythonで自動化しよう！" },
  { id: 3, content: "JavascriptでWebサイトに動きをつけよう！" },
  { id: 4, content: "PHPでWebアプリを作ろう！" },
];



document.addEventListener("DOMContentLoaded", function () {
//index.htmlのul要素を取得
  let contentList = document.getElementById("post-content-list");

//配列から要素を1つずつ取り出す
  posts.map((post) => {

//取り出した要素はからcontentの要素を取り出す
    postContent = post.content;

//<li>要素を作成
    let li = document.createElement("li");
//contentの文字を作成
    let contentText = document.createTextNode(postContent);
//<li>の子要素にcontentの文字を挿入
    li.appendChild(contentText);
//<ul>の配下に上で作成した<li>を挿入
    contentList.appendChild(li);
  });
});

このようにJavascriptで定義した配列から要素を取り出して、HTMLに描画するケースは頻繁に見られます。

mapメソッドを使いHTMLに要素を追加してみよう②

もう１つmapメソッドの応用的な使い方を見ていきましょう。今回はHTMLのaタグのリンク先をJavascriptで取得し、それらを配列に格納していきます。

それでは、「index.html」と「script.js」を開き、書くファイルに下記コードを貼り付けてください。

[index.html]

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Javascript Array</title>
  </head>
  <body>
    <h1>Javascriptの配列</h1>
    <h2>リンク一覧</h2>
    <ul>
      <li><a href="https://www.ruby-lang.org/ja/" class="language">Ruby</a></li>
      <li><a href="https://www.python.jp/" class="language">Python</a></li>
      <li>
        <a
          href="https://developer.mozilla.org/ja/docs/Learn/JavaScript"
          class="language"
          >Javascript</a
        >
      </li>
      <li>
        <a href="https://www.php.net/manual/ja/index.php" class="language"
          >PHP</a
        >
      </li>
    </ul>
    <script src="script.js"></script>
  </body>
</html>

[script.js]

//空の配列を用意する
urlList = [];

document.addEventListener("DOMContentLoaded", function () {
//<a>の要素を取得
  lists = document.getElementsByClassName("language");

//取得したHTMLCollectionを配列に変換
  lists = Array.from(lists);
配列から要素を1つずつ取り出す  
lists.map((list) => {
    urlList.push(list.href);
  });
  console.log(urlList);
});

コンソールで下画面のように表示されれば成功です。