エディターの若栁です。
前回の「関数(function)の基礎を学ぶ」に続き、実務で学んだことを書いていきます。
今回書いたプログラム
配列の要素をfor文で取り出して、HTML上に出力する処理をJavaScriptで書きました。
具体的には、複数の商品情報の入った配列から順番に商品情報を取り出して、HTMLの文字列として販売ページ上に出力させるコードです。
どんな処理が必要か書き出す
希望どおりに動かすために必要な処理を、こまかく考えてみました。
- 商品情報の入った配列を作る
- 1の配列の長さぶん繰り返して要素を取得したいので、for文を使う
- 変数に1で取得した商品の情報、一緒に表示したい文言、リストタグを入れる
- 変数に入れた値をHTMLに出力する
for文の使い方は、過去記事の『for文と演算子』でも扱っていますので、そちらもご参照ください。
コードを書く
先ほどのリスト1〜4を満たすコードを書きました。
今まで使ったことがないメソッドも多くあるので、続けて説明します。
|
1 2 3 4 5 6 7 8 |
var stockColors = ['黒','金','銀','緑']; var stockList = ''; for (var i=0; i<stockColors.length;i++){ stockList += '<li>'+ stockColors[i] + '色は、在庫があります。</li>'; // = ではなく += を使う } document.getElementById('stock').innerHTML = stockList; |
+=（加算代入演算子）を使う
変数に追加するには、加算代入演算子を使う方法があります。
「=」は変数への代入ですが、「+=」は、どんどん後ろに追加されます。
「+=」を使った式の意味ですが、
|
1 |
x += y |
xとyに挟まれた+=があった場合、
|
1 |
x = x + y |
もとのxにyを足して、xへ代入する、という意味。つまり、追加と同じ役割を果たします。
ここで「=」を使うと、追加ではなく代入になるので、繰り返し処理で毎回上書きされ、1つの商品情報しか取得できなくなります。
配列へpushで追加し、joinで文字列として連結する方法もある
for文で取得した要素を配列へ追加して、最後にjoin()で文字列として表示する方法もあります。
先ほどのコードから、書き換わった部分にコメントを入れます。
|
1 2 3 4 5 6 7 8 |
var stockColors = ['黒','金','銀','緑']; var stockList = []; //ここが配列になる for (var i=0; i<stockColors.length; i++){ stockList.push('<li>'+ stockColors[i]+'色は、在庫があります。</li>'); //ここにpush()がくる } document.getElementById('stock').innerHTML = stockList.join(''); //innerHTMLへ入れる時にjoin()で文字列にする |
代入先の変数を配列にして、push()で追加します。また、文字列化するために最後にjoin()を使っています。
push()は、配列の末尾に要素を追加できるメソッドで、
join()は配列の要素をつなげて、ひとつづきの文字列にしてくれるメソッド。引数で、区切る部分の文字を指定できます。
今回は区切らずに全部をつなげたいので、('')と空文字を指定します。
引数に何も指定しないと、デフォルトでコンマが入りますのでお気をつけください。
上記2つの方法で、次のようにHTML上に表示されます。
まとめ
今回のコードで書いたことをまとめました。
- for文を使い、繰り返しの処理で配列の要素を取得する
- 加算代入演算子で変数へ追加して、innerHTMLで出力する
（pushで配列へ追加して、joinで文字列にしてからinnerHTMLで出力する方法もある）
今回さらっと使っている、innerHTMLやgetElementByIdも、いずれ記事化したいと思います！
お世話になったURL
加算代入演算子-MDN-
Array.prototype.push()-MDN-
Array.prototype.join()-MDN-
