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

配列要素の削除

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
配列に格納された要素を削除する方法を解説します。
講師:
06:58

字幕

このレッスンでは JavaScript で配列から 要素を削除する方法について解説します まずダウンロードしたファイルの中にある pop.html と pop.js を エディタで開いておいてください これがそれらのファイルを エディタで開いた状態です この HTML ファイルは 外部ファイル化している JavaScript pop.js ファイルを読み込んでいる状態です そして この pop.js には まだ何もコードは書かれていません これらのファイルを使いながら 配列から要素を削除する方法について 解説していきます ではレッスンを始めましょう ではまず準備としてデータの入った 配列を先に作っておきたいと思います まず pop.js のエディタ画面を開いて ここに配列を作ります 配列を作るには まず var 次に配列の名前 ここでは fruits としておきましょう そして = [ ]  そして ; と書きます この状態で空っぽの fruits という名前の 配列が出来上がりました では予めここにデータを入れておきます この [ ] の中に " りんご" ,(カンマ) "みかん " さらにカンマをおいて ”メロン ” さらに "バナナ " としておきましょう では この fruits という配列を使って 要素の削除の仕方について解説していきます まず配列の一番最後の要素を 削除する方法です 今回は このバナナにあたります ではコードを書いてみます まず 配列の名前 fruits を書きます 次に .pop と書きます そして ( ); このように pop という 関数を使うことによって この fruits という配列の 一番最後の要素 今回はバナナ これを削除することができます ではこれを Chrome のデベロッパーツールで 確認してみたいと思います 確認するためには console.log(); と書いて この引数に 一番最後の要素が削除された fruits という配列の名前を書いておきます この状態でファイルを保存して HTML の方をブラウザで開きます この pop.html をブラウザで開きます そして こちらのボタンから 「ツール」「デベロッパーツール」を 選択します するとデベロッパーツールが立ち上がり コンソールの画面が開いてますね こちらをみると Array (3) と書いています では こちらの矢印のボタンを クリックしてみましょう すると このように配列の中身が 表示されていますが りんご みかん メロン そして一番最後に あったはずのバナナが消えていますね このように pop という関数を使うと 配列の中の一番最後の要素を削除できます では エディタに戻ります この pop は配列の一番最後の要素を 削除しましたが 次に 配列の一番初めの要素を 削除する方法について説明します 配列の一番初めの要素を削除するには shift という関数を使います では 実際に書いてみます pop と同じように まず対象となる 配列の名前を書きます fruits.shift(); こうすることによって この fruits に含まれている 配列の一番最初の要素を削除できます 今回ですと りんごがそれにあたります ではデベロッパーツールで確認しましょう わかりやすい様に こちらの pop の方はコメントアウトして 動作しないようにしておきましょう ではこの状態でファイルを保存します では HTML ファイルを ブラウザで開いてみましょう このHTMLファイルをブラウザで開きます そしてデベロッパーツールを開きます すると ここに Array(3) と出てますね 矢印をクリックしてみましょう するとみかん メロン バナナと 三つの要素が入っているのが分かります ただし shift を使って一番初めの 要素を削除しているので 元々この0番というインデックス番号に 入っていたりんごがなくなっていますね このように shift という関数を 使うことによって 配列の中に含まれている一番初めの 要素を削除できました 以上でレッスンは終了です 今回は JavaScript で配列から要素を 削除する方法について解説いたしました 逆に配列に要素を追加する方法も 別のレッスンで解説していますので そちらと合わせて覚えておきましょう

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

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

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

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

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

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