0%

Programmingプログラミングナレッジ

Posted:2019.10.04

javascriptで配列を扱う時によく使うメソッド#2【配列の値に対して繰り返し処理を行う】

Vue.jsなどフロントエンドのフレームワークを使って、バックエンドから送られてきたデータを処理する際には、配列データを取り扱うケースが多いかと思います。前回記事「javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】」に引き続き、今回もjavascriptで配列データを扱うときによく使う例をまとめていきたいと思います。

 

今回は、配列データに対して、個別の値に繰り返し処理を行う場合に使うメソッドになります。主に配列データを操作してHTML上に出力するケースが多いのではないでしょうか。それでは、早速みていきたいと思います。

 

Array.forEach()

配列のデータに対してそれぞれ処理を加えていくときに、よく使われるのは「Array.forEach()」です。対象となる配列に対して指定します。引数には配列内のデータの他にインデックス番号も取得できます。コールバック関数で、配列データに行う処理を記述します。

// HTML
<ul class="target">
</ul>


// javascript(ES6)
const targetElement = document.querySelector('.target');
const arrayObject = [
 { name: 'りんご', price: '100円' },
 { name: 'みかん', price: '80円' },
 { name: 'ぶどう', price: '500円' }
];
arrayObject.forEach((item, index) => {
 const insertElement = `
  <li>
   No.${ index + 1 } ${ item.name } ${ item.price }
  </li>
 ` 
 targetElement.innerHTML += insertElement;
});

 

上記のコードを実行すると下記のような結果を得ることができます。ここでは配列のデータを全てHTMLとして出力した例になります。

【HTML】

<ul class="target">
 <li>No.1 りんご 100円</li>
 <li>No.2 みかん 80円</li>
 <li>No.3 ぶどう 500円</li>
</ul>

 

過去記事「javascriptで順番に並んだ要素を連続して動かすシーケンシャルなアニメーション実装する」「javascriptで複数要素の値をそれぞれ取得して配列で扱う」などでも、このArray.forEach()を使ったサンプルを紹介していますのでご参考に。

 

Array.forEach() は「querySelectorAll()」などで取得してきた特定の複数要素に対して、処理を行うケースなどでよく使いますが、その際にIE11で次のようなエラーが表示される場合があります。

 

このエラーですが、NodeListオブジェクトに対してforEach()を実行するのが、IE11ではサポートされていないことが原因のようです。querySelectorAll()の返り値がNodeListオブジェクトになりますね。そんな場合には、下記のように「Array.prototype.slice.call()」を使って、NodeListオブジェクトを配列に変換し、その配列に対してforEach()を実行させるような形に修正します。

const nodeListObject = document.querySelector('.target');
const arrayObject = Array.prototype.slice.call( nodeListObject );
arrayObject.forEach((item, index) => {
 // 配列データに対しての処理
});

 

このようにすることで、IE11でもforEach()が自由に使えるようになります。

 

for ( …. of Array )

また、上記のArray.forEach()以外にも「for ( …. of Array )」も使われることがあります。引数として配列内のデータを変数や定数などで指定する形になります。基本的には同じように配列の個別の値に対して繰り返し処理を行いますが、for ( …. of Array )では「break文」が使えるので、繰り返し処理を抜けることができます。

【javascript(ES6)】

const arrayObject = [
 { name: 'りんご', price: '100円' },
 { name: 'みかん', price: '80円' },
 { name: 'ぶどう', price: '500円' }
];
for ( const item of arrayObject ) {
 console.log(item);
 if ( item.name === 'みかん' ) {
  break;
 }
}

 

break文でループを途中で抜ける場合には、条件を指定します。ここではキーの値を基準に条件分岐してみました。コンソールで出力結果を見ると、繰り返し処理は指定した条件までで止まっているのが確認できます。

【console.log】

Object { name: "りんご", price: "100円" }
Object { name: "みかん", price: "80円" }

 

それ以外にも、「for ( …. in Array )」や「for ( …. < Array.length ….++)」などの方法で配列データを展開することも可能ですが、概ね上記2つのどちらかが使われるケースが多いようですね。

 

まとめ

【配列のすべての値に対して処理を繰り返す】

Array.forEach(( value, index ) => { callback });

 

【配列の値に対して条件付きの処理を繰り返す】

for ( const value of array ) { callback };

 


 

今回はjavascriptで配列を扱う例として、配列データに対して繰り返し処理を行うケースについてまとめてみました。本文中でもある通り、HTMLとして配列データを展開するといった表示や出力に関係する処理や、それらのデータをもとに処理を行うケースなどが挙げられます。また、別記事でその他のユースケースについてもまとめていきたいと思います。

 

(こちらの記事もどうぞ)
javascriptで配列を扱う時によく使うメソッド#1【配列の作成・値や総数の取得・空判定など】

author
この記事を書いた人オガワ シンヤ
FacebookTwitter

DesignSupply.代表 / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

制作のご依頼やお問い合わせ・パートナー業務提携のご相談はこちら

デザインやウェブ制作についてのご依頼やご相談、その他お問い合わせなどもお気軽にご連絡ください。フットワークの軽さやレスポンスの早さ、また豊富な経験や知識、技術を活かした対応力といったフリーランスクリエイターの強みでクライアント様、パートナー企業様のお力になります。デザインからコーディングやWordPress実装といったウェブサイト構築はもちろん、写真撮影や動画編集、コンテンツ制作からサイト運用サポートまで一括してお任せください。

ホームページ制作のご検討やウェブ運用でお悩みの経営者様や企業のウェブ担当者様をはじめ、個人で店舗を営んでいらっしゃるオーナー様、フリーで活動されているビジネスオーナー様はもちろんのこと、リソース不足でお困りの制作会社様、またクリエイターをお探しの代理店様も大歓迎です。

コンタクトをご希望の方はお手数ですが、下記よりお問い合わせフォームのページへアクセスしていただき、必要事項を入力の上メッセージを送信してください。確認でき次第すぐに折り返しご連絡致します。

こんな記事も読まれています

コメントもお気軽にどうぞ

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。また、* が付いている欄は必須項目となります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


ページトップへ
大阪市天王寺区のホームページ制作デザイン事務所(SOHO)DesignSupply.【デザインサプライ】