JavaScript勉強会

JavaScriptの学習日記

3.10 項目をリスト表示する　《配列》　【JavaScript超入門】

JavaScript 読書メモ

JavaScriptの学習メモ。

今日は『確かな力が身につくJavaScript「超」入門』の第３章を読んでみます。

 

jsstudy.hatenablog.com

 

 

3.10　配列

(p.124)

変数に代入する「データ」として、いままで文字列、数値、ブール値などを使ってきましたが、今回は新しいデータの種類として「配列」を紹介します。

これまで使用してきた各種データは、変数１つにつき１つのデータを保存できるだけでした。

配列を使うと、複数のデータを１つにまとめてグループ化することができます。

 

サンプルコード

「index.html」というファイルを作り、以下の内容を書きます。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3-10_array</title>
</head>
<body>
    <h1>やることリスト</h1>
    <ul id="list">
    </ul>
    <script>
        var todo = ['デザインカンプ作成', 'データ整理', '勉強会申し込み', '牛乳買う'];
        todo.push('歯医者に行く');
        for (var i = 0; i < todo.length; i++) {
            var li = document.createElement('li');
            li.textContent = todo[i];
            document.getElementById('list').appendChild(li);
        }
    </script>
</body>
</html>

 

実行結果

「index.html」をChromeで開きます。

以下のような実行結果になりました。

f:id:jsstudy:20170423182912p:plain

 

配列「todo」が、HTMLの<li>～</li>の中に入って、表示されていることが確認できました。

 

配列

配列（Array）は、変数が束になったもので、複数のデータが入る箱ですね。

現実世界にあるものだと、レターケースに似ています。

 

コクヨ レターケーススチール引き出しタイプＡ４縦　片引７段

コクヨ レターケーススチール引き出しタイプＡ４縦　片引７段

 

 

  • レターケース全体が配列
  • レターケースの引き出しが変数

 

配列 - Wikipedia

複数の値を格納するのに用いられるのが配列である。

 

JavaScriptの配列

developer.mozilla.org

 

developer.mozilla.org

JavaScript の Array オブジェクトは、配列を構築するためのグローバルオブジェクトです。

配列とは、高レベルのリスト構造のようなオブジェクトです。

 

JavaScriptの配列の実体は、オブジェクトです。

つまり、JavaScriptの配列は、オブジェクトとして扱うことができます。

オブジェクトということは、プロパティとメソッドを持たせることができます。

JavaScriptの配列は、Arrayオブジェクトであり、データを操作するためのメソッドが最初からいろいろ用意されています。

 

配列の作り方

配列を作成するには角カッコ [] を使います。

 

書式：項目数が0個の配列を作成して変数に保存する

var 変数名 = [];

 

書式：1個以上のデータを持つ配列を作成する

var 変数名 = [データ0, データ1, データ2, ..., データn ];

 

配列からデータを読み取る

書式：配列のデータをインデックス番号を指定して読み取る

var 変数 = 配列[インデックス番号];
  • インデックス番号は、配列の引き出しに付けた番号です。
  • インデックス番号は、1からではなく、0から始まります。

 

var todo = ['買い物', '調理', '後片付け'];
var task = todo[0]; // 買い物
window.alert(task);

↓

f:id:jsstudy:20170423185209p:plain

  • 配列todoを作成
  • todoの中身は、「買い物」「調理」「後片付け」の３個のデータ
  • 配列の中から「買い物」を読み取るには、todo[0]とインデックス番号を指定
  • 配列の中から「調理」を読み取るには、todo[1]とインデックス番号を指定
  • 配列の中から「後片付け」を読み取るには、todo[2]とインデックス番号を指定

 

配列のメソッド

JavaScriptの配列（Arrayオブジェクト）には、データを操作するためのメソッドが、最初からいろいろ用意されています。

（例）配列のpushメソッドは、配列の一番後ろにデータを追加します。

 

書式：配列の最後にデータを追加する

配列の変数名.push(追加したいデータ)

 

他の配列メソッドについては、MDNのリファレンスをご参照ください。

Array - JavaScript | MDN

→ Arrayインスタンスのメソッドという項目に、配列メソッドが列挙されています。

 

DOM操作

配列の話とは別に、HTMLの操作もちょっと練習しています。

リストタグ「<li>～</li>」を追加する方法を見てみましょう。

 

DOMとは？

DOMとは - JavaScript超初心者によるJavaScript入門講座

DOM（Document Object Model）とは、xmlやhtmlの各要素、たとえば<p>とか<img>とかそういった類の要素にアクセスする仕組みのことです。

このDOMを操作することによって、要素の値をダイレクトに操作できます。

 

ブラウザーは、HTML文書をDOMとして扱い、JavaScriptでDOMを操作することで、HTMLを書き換えることができます。

 

document.createElementメソッド

DOMのdocumentオブジェクトに、createElementメソッドが用意されており、これは何もないところからタグを生成します。

 

developer.mozilla.org

指定の要素名の要素を生成します。

 

var li = document.createElement('li');

このように書くと、リストタグ<li>のオブジェクト（Elementオブジェクト）が生成されて、変数「li」に格納されます。

 

textContent プロパティ

 

li.textContent = todo[i];

リストタグ<li>のオブジェクトのテキスト内容に、配列todoのデータを入れます。

 

Node.textContent - Web API インターフェイス | MDN

textContent プロパティは、ノードおよびその子孫のテキスト内容を表します。

 

appendChild()メソッド

document.getElementById('list').appendChild(li);

 

id属性が「list」の要素、つまり<ul id="list">を取得して、appendChild()メソッドで子要素を挿入します。

appendChild()メソッドは、すでにある子要素の下に挿入します。

appendChild()メソッドを繰り返し使うと、todoのデータを次々と挿入できます。

 

Node.appendChild - Web API インターフェイス | MDN

Node.appendChild() メソッドは、特定の親ノードの子ノードリストの末尾にノードを追加します。

 

書式：取得した要素に子要素を挿入する

取得した要素.appendChild(挿入したい子要素)

 

まとめ

  • 複数のデータを扱うときは、「変数」ではなく、「配列」というデータ構造を利用する
  • JavaScriptの配列リテラル（書式）は、いろいろ用意されていて、いろんな配列の作り方がある
  • JavaScriptの配列は、Arrayオブジェクトであり、さまざまなプロパティやメソッドが最初から用意されているので、データ操作が便利

 

JavaScriptの配列を活用して、複数のデータをまとめて扱えるようにしたいです。

 

 

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)

確かな力が身につくJavaScript「超」入門 (確かな力が身につく「超」入門シリーズ)