JavaScriptで配列の要素を取り出して出力する方法

エディターの若栁です。
前回の「関数(function)の基礎を学ぶ」に続き、実務で学んだことを書いていきます。

今回書いたプログラム

配列の要素をfor文で取り出して、HTML上に出力する処理をJavaScriptで書きました。
具体的には、複数の商品情報の入った配列から順番に商品情報を取り出して、HTMLの文字列として販売ページ上に出力させるコードです。

どんな処理が必要か書き出す

希望どおりに動かすために必要な処理を、こまかく考えてみました。

  1. 商品情報の入った配列を作る
  2. 1の配列の長さぶん繰り返して要素を取得したいので、for文を使う
  3. 変数に1で取得した商品の情報、一緒に表示したい文言、リストタグを入れる
  4. 変数に入れた値をHTMLに出力する

for文の使い方は、過去記事の『for文と演算子』でも扱っていますので、そちらもご参照ください。

コードを書く

先ほどのリスト1〜4を満たすコードを書きました。
今まで使ったことがないメソッドも多くあるので、続けて説明します。

+=(加算代入演算子)を使う

変数に追加するには、加算代入演算子を使う方法があります。
「=」は変数への代入ですが、「+=」は、どんどん後ろに追加されます。

「+=」を使った式の意味ですが、

xとyに挟まれた+=があった場合、

もとのxにyを足して、xへ代入する、という意味。つまり、追加と同じ役割を果たします。
ここで「=」を使うと、追加ではなく代入になるので、繰り返し処理で毎回上書きされ、1つの商品情報しか取得できなくなります。

配列へpushで追加し、joinで文字列として連結する方法もある

for文で取得した要素を配列へ追加して、最後にjoin()で文字列として表示する方法もあります。
先ほどのコードから、書き換わった部分にコメントを入れます。

代入先の変数を配列にして、push()で追加します。また、文字列化するために最後にjoin()を使っています。

push()は、配列の末尾に要素を追加できるメソッドで、
join()は配列の要素をつなげて、ひとつづきの文字列にしてくれるメソッド。引数で、区切る部分の文字を指定できます。
今回は区切らずに全部をつなげたいので、('')と空文字を指定します。
引数に何も指定しないと、デフォルトでコンマが入りますのでお気をつけください。

上記2つの方法で、次のようにHTML上に表示されます。

まとめ

今回のコードで書いたことをまとめました。

  • for文を使い、繰り返しの処理で配列の要素を取得する
  • 加算代入演算子で変数へ追加して、innerHTMLで出力する
    (pushで配列へ追加して、joinで文字列にしてからinnerHTMLで出力する方法もある)

今回さらっと使っている、innerHTMLやgetElementByIdも、いずれ記事化したいと思います!

お世話になったURL
加算代入演算子-MDN-
Array.prototype.push()-MDN-
Array.prototype.join()-MDN-