Canvasを使うためのJavaScript入門

配列の使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Arrayオブジェクトには値がいくつでも加えられるので、値をまとめて扱うことができます。Arrayオブジェクトは「配列」とも呼ばれます。
講師:
11:40

字幕

配列とも呼ばれる Array オブジェクトについて その作り方と使い方をご説明します 1つの変数には 1つの値しか入れられません 但し入れられるものには ほとんど制限がなく 数値や文字列の他 オブジェクトでも入れることができます 特に Array オブジェクトというのはその中に 様々な値を詰め合わせることができます つまり変数には Array オブジェクトという 1つのオブジェクトを入れ その Array オブジェクトの中に さまざまな値を詰め合わせられる ということなんです まずは配列 Array オブジェクトを作る このステートメントについて もう少し詳しくご説明しましょう まず一般にオブジェクトの作り方 ということをご説明します オブジェクトには必ず そのオブジェクトが所属する- 「クラス」というものがあります クラスからオブジェクトを作るには これは JavaScript の お約束ごとがありまして new という演算記号になるのですけど 演算子 演算の子供と書いて 演算子といって 演算記号のことを意味します new という演算子の後に クラス名を付けて そして ( ) 2つをむかわせます これでそのクラスのオブジェクトができます もっとも できたまま放っておいては 消えてしまいますので 必ず変数を宣言して その変数の中に クラスから作った オブジェクトを入れることになります Array クラスのオブジェクト つまり配列を作る場合も このお約束通りです new Array() これで Array のオブジェクトが出来上がります そうしたら変数を宣言して その変数の中にオブジェクトを代入します もっとも Array オブジェクト 配列というのは入れ物ですから 空っぽのままでは意味がありません この中に値を入れていく作業が必要になります それでは配列 Array オブジェクトに 値を加えてみましょう 値を加えるには 配列を入れた 変数名をタイプし その後に「.」 そして push というメソッドをタイプします これが配列に値を加えるメソッドです そして加えたい値をタイプします 数字の 100 にしました どんどんと追加することができます 200 もう一個ぐらい 300 と 配列には加えた順番に 値が並んで入っていきます 行列と同じですね ではこれを alert メソッドで 確認してみましょう 配列の変数名を入れます では 「ファイル」メニューから 「ブラウザでプレビュー」をします 警告ダイアログが表示されました alert メソッドには 配列のオブジェクトを入れた- Array オブジェクトを入れた変数を そのまま引数に渡しました すると警告ダイアログには 配列の中に入れた値が カンマ区切りで表示されます では OK で閉じます 配列には値が加えられた順番に収められます そして それぞれの値に いわば整理番号とでも言うべき インデックスが与えられます そうすると例えば この 200 が欲しいという時には 2番目ですね ただし インデックスは 0 からスタートしますので 0 1 ということで 200 は インデックス1ということになります 配列に入れた インデックス1の値を取り出しましょう 配列に収めた各値のことを エレメントと呼びます ですからインデックス1の エレメントを取り出すということになります 取り出した値は変数に入れましょう myElement としました そして配列を入れた変数に対して インデックスは [ ] で指定します これで配列の インデックス1の element 値が変数に入ります ではこれを alert メソッドに与えて 確認してみましょう ブラウザで確かめてみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 警告ダイアログが開きました インデックスは1 2番目のエレメントである 値 200 が表示されています では OK です 配列に対して [ ] で インデックスを指定する書き方は 値を取り出す場合だけでなく 書き換える時にも使えます 例えばインデックス1を 0 にしてしまいましょう それから今 配列には 値が3つ つまりインデックス2までしか 入っていませんけれど 新たにインデックス3を指定して そこに値を入れることも可能です では この配列を改めて alert のほうに入れなおします これでブラウザで見てみましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 表示された警告ダイアログを見ますと 値はまずインデックスの1 2番目のエレメントが 0 になっています それから新たに 4番目のエレメント インデックスで言えば3ですね それが加わっています 配列 Array オブジェクトの作り方 についてはバリエーションがあります 通常はクラスのオブジェクトは new クラス名 () これがお約束なのですけど Array オブジェクトの場合には ただ [] を2つ向かい合わせるだけ これで Array オブジェクトができてしまいます 確認をするために 余分なものは削ってしまいしょう これでブラウザで確認をしてみたいと思います 「ファイル」メニューから 「ブラウザでプレビュー」です JavaScript コードの 余分なステートメントは削除しましたので 初めと同じように 警告ダイアログには 100 200 300 という 3つのエレメントが表示されました もう1つバリエーションを ご紹介しましょう エレメントを追加した3行 これを削除してしまいます どうするかというと 初めからエレメントを追加してしまうんですね カンマ区切りで値を直接 [] の中に書いていきます そうすると これでもう既に この3つのエレメントが入った― Array オブジェクト 配列が出来上がります では念のため「ファイル」メニューから 「ブラウザでプレビュー」で確認しましょう 警告ダイアログの表示は 100 200 300 と変わりません では最初からエレメントが入った配列を 作っちゃった方が楽じゃないか と 思う方もあるかもしれません けれども そうとは限らないです 後にならないと 値が決まらないこともありますし もしかすると順番が変わってくる という場合もありえます どちらがお得かというのは そのプログラミングの デザインによって変わってきます 配列の操作はわかったけれども 具体的にどう使うのか ピンと来ない という方のために date クラスを使った例をご紹介します date クラスというのは 日付情報を持つオブジェクトを作ります お約束通り new date() で 今現在の日時のオブジェクトができます それを変数に入れたなら 日付については このような メソッドが用意されています 「年」「月」「日」 それから「曜日」がわかります そのうちの getDay 「曜日を返す」 メソッドを使ってみたいと思います まずは date クラスの getDay メソッドの結果を確認してみます インスタンスを作ります お約束通り new date です そして getDay メソッドですね その結果を変数に入れ そして alert に引数に渡して どんな値が返ってくるのかを確認します 「ファイル」メニューから 「ブラウザでプレビュー」です 警告ダイアログには 整数の3が表示されました 実は今日は水曜日なのですけど 3は水曜日を表します どういうことかというと 日曜日を0としたインデックスが返るんです そうすると水曜日は 0 1 2 3 で インデックスは3になります 尤も できればちゃんと 曜日で教えてほしいですよね そこで配列を使ってみます 配列を作るステートメントを加えます my array とします そしてどうするかというと 日曜日から土曜日までを エレメントにした配列をつくってしまいました そして この配列の インデックスとして date クラスから取り出した 曜日の整数を渡します どうなるか 結果を見てしまいましょう 「ファイル」メニューから 「ブラウザでプレビュー」です 警告ダイアログにはちゃんと 「水曜日」と漢字で表示されました これポイントは date クラスの getDay メソッドは 日曜日を0とする インデックスを返すのでした 従ってインデックスでエレメントを 扱っている配列とは 丁度 相性が良いんですね コードでも改めて確認しておきましょう getDay メソッドは日曜日を0 土曜日を6とするインデックスを返すのでした ですから配列を作って それぞれのインデックスに 該当する曜日をエレメントとして 入れておけばいいわけですね そのうえで その配列に getDay メソッドから得られた― インデックス番号を渡せば その曜日が 漢字で表示されるということになります 配列 Array オブジェクトの 作り方と操作方法 それから date オブジェクトも絡めた 簡単な例をご紹介しました 配列はアイデアによって 応用範囲の広いオブジェクトです 是非機会があったら 使ってみて下さい

Canvasを使うためのJavaScript入門

このコースでは幅広いJavaScriptの技術の中からCanvasを使うときに知っておかなければならない基本を手短に解説します。変数や関数といったプログラミングの基礎を学ぶところから、実際にCanvasへ簡単な描画を行うまでを説明します。

1時間25分 (12 ビデオ)
現在、カスタマーレビューはありません…
 

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

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

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