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

配列とその使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
配列とは、データの集合体を指します。複数のデータを1つの箱に格納しているものとなります。このレッスンでは、配列の作成方法、及び、値の取り出し方に付いて解説致します。
講師:
09:25

字幕

このレッスンでは JavaScriptの プログラミングの中で使う 配列について解説していきます それでは早速レッスンを始めていきましょう まずはダウンロードしたファイルの中にある array.html と array.js を エディタで開いておいてください そしてこれがそれらのファイルを開いた状態です この array.html には外部ファイル化した JavaScript array.jsを読み込んでおり この array.js の中には まだ何も書かれていません これらのファイルの使いながら JavaScript の配列について 解説していきたいと思います まず 配列とは何かということですが 配列とは簡単に言いますと 複数の変数が格納されて― まとめられたデータの 集合体の様なものです 変数が一つの箱であったのに対し 配列は箱の中に複数の仕切りがあって それぞれにデータを入れておくことが できるようなイメージとなっています それでは早速配列の作り方― いわゆる配列の宣言から 見ていきたいと思います それでは array.js の方を開きます そしてここに配列の宣言を やってみたいと思います 配列の宣言は変数と同じように まずは var と書きます そしてこちらも変数と同じように 配列の名前を作ります ここでは例としてcountryと 書いてみたいと思います そして半角スペースを空けて =半角スペースを打ちます 次に配列にデータを入れるためのブラケット― 括弧を書きます 配列の場合はこのブラケットの括弧を使います そしてセミコロンです これで配列の箱を作ることができましたので 次に実際に配列の中にデータを入れてみましょう このブラケットの中に入れていきます まずは文字列のデータを入れてみましょう " " を書いてまずは ”日本" そして "" を閉じるの後にカンマ そして同じように" "を2つ書いて その間に "アメリカ" 同じようにもう1つ作ってみましょう "イギリス" こうすることによって この country という名前のついた配列に 3つのデータを入れることができました この括弧 ブラケットの中にこちらのコンマ これが仕切りの役割を果たしています そしてこの "日本" "アメリカ"  "イギリス" というのが 1つの箱の中にデータとして入っている といったような状態です さて この様に配列のデータの 作成が完了したところで 次はこの配列の中からデータを 取得してみたいと思います 配列の中のデータを取得するためには このように書きます 配列の名前 country そして括弧― ブラケットを書いて この中に数字を書きます 0 この様に書くことで この country という配列の中にある 0番目のデータを取得することができます 0番目というデータですが ここでは "日本" を指します 配列の中のそれぞれのデータには 左から順番に数字が割り当てられています これをインデックス番号と言います そして 数字は0から始まることに 注意してください ですので 今回の場合 日本が0― アメリカが1 イギリスが2という形になります それでは実際にこの配列の取得が うまくいっているかどうか 確認してみたいと思います ここに window.alert 括弧  そしてcountry 0 番目 そして 括弧閉じるのセミコロンと書きます この状態でファイルを保存して array.html をブラウザで 開いてみたいと思います この array.html をブラウザで開くと このようにアラートが表示されて 中に「日本」と書いていますね OKボタンを押して閉じます エディタに戻ってみましょう いま こちらに0と書いたので 日本が取得できました 次に試しに 1 と書いてみましょう 1 そしてこの状態で保存をして― array.html をブラウザで開いてみます すると 次は「アメリカ」が出てきました そして 次に 2 と書いてみましょうか この状態で保存 html ファイルを ブラウザで開きます すると 次は「イギリス」と出てきました エディタに戻ります このようにそれぞれ番号がふられた データにアクセスできました ちなみに 配列の個々の仕切りに 入れることができるデータは 文字列に限りません 変数と同じように 数値や 配列なども入れていくことができます 一度試しにやってみましょう 例えば この「アメリカ」を消して  100 と書きます そして この 2 という数字を 1 に変えて保存します そして ブラウザで確認してみましょう そうすると このように 100 と出てきました エディタに戻ります この様に配列には 1つのデータ型ではなくて 複数のデータ型を混在させることも可能です それでは少し応用してみましょう 先ほど この配列の中には― 数値や配列なども いれることができると言いましたが ここに数値ではなくて 今度は配列を さらに入れてみたいと思います ブラケット― この括弧でさらに囲って ダブルコーテーション そしてまずは "東京" と書いてみます そしてカンマで区切って もう1つダブルコーテーションで "大阪" といった形でデータを作ってみます いま この country という名前の 配列の1番目のデータに さらに配列が入っている状態になります この配列の中の配列にアクセスするためには こちら country のブラケット 1番目の中の さらにブラケットで囲って0と書きます こうすることによって country の 1番目に入っている配列のデータのさらに― 0番目のデータにアクセスすることが可能です この状態でファイルを保存して html ファイルをブラウザで見てみましょう html ファイルをブラウザで開くと このように「東京」というのが出てきました OK を押して閉じます そしてエディタに戻ります このように配列の中にある配列の データのことを多次元配列と言います こちらの方もしっかりと覚えておきましょう 以上でレッスンは終了です 今回は JavaScript の配列について 解説いたしました 一見すると変数に比べて難しい様に見えますが 使いこなせるようになると とても便利なものになりますので 是非とも習得しておきましょう

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

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

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

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

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

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