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

オブジェクトとその使い方

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクトとは、格納されている各データに、名前を付けることができるようになった配列のことを指します。このレッスンでは、オブジェクトの作成方法、及び、値の取り出し方に付いて解説致します。
講師:
06:36

字幕

このレッスンでは JavaScript の プログラミングの中で使う オブジェクトについて解説していきます それでは 早速レッスンを始めていきましょう まずはダウンロードしてきた ファイルの中にある object.html と object.js を エディタで開いておいてください そして これがエディタで開いた状態です このファイルは HTML で 外部ファイル化したー JavaScript object.js を 読み込んでいる状態のもので object.js の中には まだ何も書いていません これらのファイルを使いながら JavaScript のオブジェクトについて 説明をしていきたいと思います まずはオブジェクトというのが どういったものなのかをご説明いたします オブジェクトとは簡単に言うと 複数の変数が格納されてまとめられた データの集合体のようなものとなります これだけを聞くと 配列と一見 何も違わないように聞こえますが 配列は格納されているデータに インデックス番号が割り振られている といった状態の物になりますが オブジェクトは そのインデックス番号の代わりに 好きな名前を付けることができます 他のプログラミング言語ですと 連想配列と呼ばれているものが この JavaScript の オブジェクトに該当します それでは 実際にオブジェクトの作成 つまり オブジェクトの宣言を していきたいと思います ダウンロードしてきたファイルの object.js の方を開きます このファイルにオブジェクトの作成を やっていきたいと思います まず 変数を作成する時と同じように 始めに var と書きます そして こちらも変数と同じように オブジェクトの名前を作成します ここでは profile という名前にします そして 半角スペース = 半角スペース そしてオブジェクトにデータを 格納するための箱を作ってあげます オブジェクトの場合は { } (波括弧) この括弧を使って箱を作成します そして セミコロンです 次に 実際にオブジェクトの中に データを格納してみましょう オブジェクトにデータを入れ込む際には このように書きます まず name:"" を書いてその中に 例えば "山田太郎" そしてカンマ 次に age として コロン そして数値で 24 と書きます こうする事によって この profile のオブジェクトの中に 2つのデータを入れ込むことができました この name という名前の 山田太郎という文字列のデータ そして もう1つは age という名前の 24 という数値のデータです このオブジェクトのそれぞれのデータに つけられた名前はキーと呼びます このキーは任意の名前を 付けることが可能です そして それに紐づいたそれぞれの データのことをプロパティと呼びます それではこの作成した profile という オブジェクトの中に格納されている これらのデータを取得する方法について 見ていきたいと思います オブジェクトの中に格納されたデータに アクセスする方法は2通りあります まずは 1つ目の方を書いてみたいと思います オブジェクトの名前 profile. 取得したいデータのキーを書きます ここでは name とします この状態で profile の中の name に割り当てられた "山田太郎" というデータを取得できます それでは一度ブラウザで確認できるように 書いてみましょう window.alert { ... } のセミコロンですね この状態で保存をして object.html を ブラウザで開いてみましょう この HTML をブラウザで開きます すると このようにアラートが出て 中には「山田太郎」と表示されていますね OK ボタンを押してエディタに戻ります それでは もう1つの書き方について 見ていきたいと思います もう1つの書き方は同じように オブジェクトの名前 profile ― そして 今度はドットではなくて [ ](ブラケット)この括弧を書いて 今度は age と書いてみます " " を書いて その中に"age" と書きます これを先程と同じようにブラウザで 確認できるようにします window.alert { ... } ; ですね この状態で保存します そして 同じようにHTMLファイルを ブラウザで確認してみましょう すると まずは先程の「山田太郎」が 表示された後に 24 ということで こちらもきちんと表示されていますね OK ボタンを押してエディタに戻ります このようにオブジェクトの中に格納された データを取得するには 2通りの書き方があることを 覚えておいてください 以上で今回のレッスンは終了です 今回は JavaScript の オブジェクトについて解説いたしました 配列とは違ってインデックス番号の代わりに それぞれのデータに任意の名前を 付けることができるので 大変便利ですね 配列と合わせて覚えておきましょう

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

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

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

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

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

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