JavaScriptプログラミング入門講座

配列要素の追加

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
配列に要素を追加する方法を解説します。
講師:
09:33

字幕

このレッスンでは JavaScript で配列の要素を 追加する方法について解説していきます まずはダウンロードしてきたファイルの中にある push.html とpush.js を それぞれエディタで開いておいてください このファイルは push.html で 外部化している JavaScript ― push.js をここで読み込んでいる状態です そして push.js には まだ何もコードが書かれていません このファイルを使って配列に要素を追加していく 方法について解説していきます それではレッスンを始めましょう それではまず配列の最後に要素を追加していく 方法について解説していきます それでは push.js をエディタで開いてください 配列の最後に要素を追加していく方法は JavaScript の関数 push を利用します それでは実際にどのように書いていくか 見ていきみたいと思います まずは始めに配列を作成しましょう 配列の作り方ですが まずは var そして配列の名前 今回は fruits としておきましょう そして=[ ];この括弧ですね これで中身が空っぽの配列 fruits ができました それではこの fruits という配列に 要素を追加していきたいと思います 要素を追加するには push を利用します 実際に書いてみます まずは追加したい配列を書きます ここでは fruits ですね その後に .(ドット)そして push と書きます そして(); そしてこの push の引数()の中に 追加したい要素を記入します 今回の場合 例えば「りんご」という文字列にしてみましょう "(ダブルクォーテーション)で この中に "りんご" と書きます これでこの fruits という配列の中に 「りんご」というデータが格納されました では実際に確認してみたいと思います 今回は Google のデベロッパーツールを使って 配列の中に含まれているデータを 確認していきたいと思いますので 今回は console.log();と書きます そしてこの中に内容を確認したい配列を入れます fruits ですね この状態でファイルを保存します そして HTML ファイルをブラウザで開いてみましょう この HTML ファイルをブラウザで開きます 今現在画面上には何も出ていませんが 今回は Chrome の デベロッパーツールの方を開いてみます こちらのボタンを押して ツールからデベロッパーツールですね こちらをクリックします するとこのような画面が ブラウザの下に出てきますので こちらの Console をクリックします するとこの画面に array 1 というが出ていますね この矢印の部分をクリックしてみましょう するとこのように “りんご” というのが 表示されましたね ここの0というのは配列のインデックス番号です 要するにこの fruits の配列の0番目に “りんご” という文字列が 追加されていることが分かります それではエディタに戻ります それではこの “りんご” の後にもう1つ要素を 追加してみたいと思います こちらの1文をコピーして 下に貼付けます そして 「りんご 」と書かれたところを 今度は 「みかん」にしてみます この状態でもう一度ファイルを保存して HTML ファイルを開いてみます HTML ファイルをブラウザで開くと このようにもう1度 デベロッパーツールを開きます すると今回は array 2 となっていますね 先ほどと同じようにこの矢印をクリックします すると “りんご” の後に インデックス番号1というものがあって “みかん” というふうになっていますね このように push という関数を使うと配列の最後に どんどんと要素を追加していくことができます それではエディタに戻ります 今度は配列の最後ではなくて 配列の一番始めに値を追加していく方法を 見ていきたいと思います 値の一番始めに要素を追加していくには push ではなくて unshift というものを使います それでは実際に書いてみましょう 同じようにまずは追加したい配列の名前 fruits.unshift と書きます そして(); そしてこの unshift の引数の中に 今度は「メロン」と入れてみましょう ” で囲ってこの中に文字列 “メロン” と入れます それではこの状態でファイルを保存して ブラウザでHTMLファイルを 開いてみたいと思います HTMLファイルを開きまして こちらでデベロッパーツールを起動します すると今度は array 3 と出ていますね この矢印をクリックしてみましょう すると先ほどインデックス番号が0番のところに “りんご” という値が入っていましたが unshift で “ メロン” というものを配列の 一番始めに追加しましたので 今インデックス番号0番目のところには “メロン” というように追加されているのが わかりますね それではエディタに戻ります ちなみに配列に要素を追加する際に インデックス番号を直接指定して 追加することも可能です 一度やってみます まず配列の名前を書きます そして[ ](ブラケット) この括弧で囲ってあげて この後にインデックス番号を入力します 今 りんご みかん メロンとデータが入っているため 今の fruits の配列の中には インデックス番号2まで埋まっている状態です なのでここでは3としてみます そして=(イコール)で ここに入れ込みたいデータを入力してあげます ”(ダブルクォーテーション)で囲って;(セミコロン) この中に例えば “いちご” と入れてあげます そしてこの状態でファイルを保存して ブラウザで HTML ファイルを開きます そしてデベロッパーツールを起動します すると今度は array 4 となっていますね この矢印をクリックしてみましょう するとこちらのインデックス番号3に “いちご” というデータが入っていますね エディタに戻ります 因みにここに例えば2とか1とか 既にデータが入っている インデックス番号を入れたげることで 既に入っているデータを 差し替えることも可能ですので 覚えておいてください 以上でレッスンは終了です 今回は JavaScript で配列に値を 追加する方法について解説いたしました 配列は慣れないうちは 少し難しく感じるかもしれませんが すぐに使いこなせるようになりますので 始めのうちに理解しておきましょう

JavaScriptプログラミング入門講座

このコースではプログラミングを学んだことのない方でもわかるように、JavaScriptの基礎について順を追ってひとつひとつ解説していきます。またコースの後半ではHTMLの要素を書き換える方法や、指定した時間に処理を実行するタイマーの使い方などについても学びます。このコースを見てJavaScriptを使った動きのあるWebサイトを製作してみましょう!

5時間18分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年02月25日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。