JavaScriptに要素を追加する方法

TOP
コラム
JavaScriptに要素を追加する

JavaScriptとは

まず初めに、名前が似ていますが、JavaとJavaScriptは全くの別物です。
Javaの利用分野はさまざまな大規模システムです。例えば、SNSなどのWeb関連サービスやAndroidのスマホ向けアプリなどがあります。
一方JavaScriptの利用分野は、Webブラウザ上で動くシステムやサービスなど、Webサイトのページ制作です。また、ページの再読み込みなしで新しいコンテンツを読み込んでくれたり、Twitterなどでは再読み込みなしでサーバーに投稿することができます。簡単に書くと、WEBページの動作、WEBアプリ開発、スマホアプリ開発、ゲーム開発などが基本となります。

JavaScriptの配列

今回の内容に入る前に、配列について少し学びましょう。
配列を活用すると、複数の値を1つのデータのように扱うことができます。 10個や20個なら気合でどうにかできるかもしれませんが、200個、300個…もっとたくさんの値を扱う場合に、いちいち変数を1つずつ作っていては時間の無駄、またはミスに繋がります。

なので、大量の値を1つのデータとして扱う場合は配列データを作成するようにしましょう。配列型を扱うための「Arrayオブジェクト」を活用することにより、配列の作成から初期化や削除、追加、検索…などが簡単に行えるようになります。

配列の宣言には①「Array」を使う方法と、②配列リテラル「[ ]」を使う方法の2種類があります。

① var animal = new Array('キリン', 'ゾウ', 'パンダ');　(⇦「new」を使ってArray()の引数へ文字列を設定)

② var animal = ['キリン', 'ゾウ', 'パンダ'];　(⇦ [ ]を使ってそのまま文字列を設定)

配列は「0」から始まります。
animal = [
'キリン',　(⇦ 0番目)
'ゾウ', 　(⇦ 1番目)
'パンダ' 　(⇦ 2番目)
];

console.log(animal[2]);　(⇦ パンダが欲しい時は[2]を指定)

要素を追加する方法

では、要素を追加したいと思った時はどのようにすればいいでしょうか。
まず一つ目の方法は、追加したい配列の一番後ろの要素番号に1足した要素番号を指定して代入する方法です。

var animal = ['キリン', 'ゾウ', 'パンダ'];
animal [3] = 'シマウマ';
console.log(animal);

実行結果　…　キリン,ゾウ,パンダ,シマウマ

次に、「push」メソッドです。Arrayオブジェクトにある、要素を配列データの末尾に追加するために使われるメソッドです。
構文は　配列.push(要素);です。

var animal = ['キリン', 'ゾウ', 'パンダ'];
animal.push('アライグマ');
console.log(animals);

実行結果　…　キリン, ゾウ, パンダ , アライグマ

animal.push('アライグマ','ペンギン','シロクマ');
実行結果　…　キリン, ゾウ, パンダ , アライグマ,ペンギン,シロクマ

という風に、数個続けて書くこともできます。
さて、どちらの方が使いやすいか考えると一目瞭然です。初めの方法だと、一番最後の要素を数えなければなりませんが、pushメソッドを使えば一番後ろの要素を指定する必要が無いので、かなり簡単に要素を追加することができます。

また次のようなこともできます。

var example = [ [10 ,20 ,30 ], ['あ','い','う','え'] ];
example[1].push( 'お' );　(⇦ example の1番目の配列内の最後にデータを追加)

console.log( example );

実行結果　…　[ [1 ,2 ,3 ], ['あ','い','う','え','お',] ]　(⇦「お」が入る)

pushの返り値

pushメソッドは「返り値」として、配列の要素数を返してくれます。

var number = [10,20,30,40];
var z = number.push();　(⇦引数のところは何も書かない)

console.log( z );

実行結果　…　4

このように、pushの引数を空にして返り値を変数へ代入すれば、配列numberの要素数を取得することが出来ます。つまり「number.length」と同じ結果になるということです。

エラーになるとき

通常の配列とは別に、複雑な構造をした「連想配列（オブジェクト）」があります。注意すべき点は、pushメソッドは配列には使えますが、連想配列には利用できないということです。

var number = [1,2,3,4];
number.push( [5,6,7,8,9,10] );

console.log( number );

実行結果　…　1,2,3,4, [5,6,7,8,9,10]

配列numberの中に、多次元配列(配列の中にもう1つ別の配列を追加したもの)を作成していますが、pushを使って、配列の中に別の配列を追加するのは特に問題ありません。

var human = { name:'田中さん', age:28 };　(⇦ 連想配列「human」を作成)
human.push( ['鈴木さん', 35] );　(⇦ 「human」中に別の配列を追加しようとしている)

console.log( human );

実行結果　…　Uncaught TypeError: human.push is not a function　(⇦エラー)

pushはあくまでも配列の組み込みメソッドです。連想配列にはpushというメソッドが用意されていないので利用できません。オブジェクトの中にデータや配列などをpushで追加することはできません。

最後に

今回はJavaScriptでの要素の追加について記述しました。ただでさえ時間がかかるプログラミングですので、できるだけ時間をかけずに、またミスを防ぐために便利な「push」をインプットして使いこなせるようにしましょう。