JavaScriptでオブジェクトを使う方法【初心者向け】

プログラミング初心者向けに、JavaScriptで【オブジェクト】を使う方法を解説した記事です。オブジェクトとは、プロパティを複数集めたもの集合のことです。プロパティの値を書き換える方法も、実際にコードを見ながら紹介します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

JavaScriptをプログラミング初心者向けに紹介した記事です。

今回は、JavaScriptでオブジェクトを使う方法について解説します。

また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)の内容をもとにしています。

 

今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

目次

 

 

オブジェクトとは

オブジェクトとは、プロパティ(※)を複数集めたもの集合のことです。変数配列もオブジェクトの一種に当たります。データを管理するのに非常に重要なものなので、是非覚えましょう。

※プロパティ…あらかじめ設定しておいた特定の情報(値)に、名前(プロパティ名)をつけたもの

 

20160620

 

田島メンター!オブジェクトというのは何でしょうか?変数配列もオブジェクト???なんですか?

 

20163020-2

 

少しややこしいんだよね。JavaScriptって全ての値がオブジェクト、もしくはオブジェクトのように振舞うから。

 

20160620

 

なぜ全ての値がオブジェクトのようにふるまうのでしょうか?

 

20163020-2

 

とりあえず簡単にオブジェクトっていう、変数や関数を格納しておける小さなプログラムの単位って考えるといいよ。さっそく書き方を見てみよう!

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

実際にオブジェクトを作ってみよう

traffic_light(信号機)という変数を作り、色に応じてメッセージが表示されるようなプログラムを書きます。

<!DOCTYPE html>
<html lang = "ja">
  <head>
    <meta charset = "utf-8">
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      var traffic_light = {
        blue: "go",
        yellow: "slow down",
        red: "stop"
      }
    </script>
 </body>
 </html>

 

blue: “go”yellow: “slow down”red: “stop” はそれぞれがプロパティです。この3つのプロパティを持ったオブジェクトが、traffic_lightという変数に定義されているという状態をあらわしています。

explainobject

 

各プロパティを呼び出してみよう

では、オブジェクト内の各プロパティを呼び出すやり方です。

変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。

よって、変数traffic_lightに入っているオブジェクト内のプロパティblue: “go”を呼び出したい場合は…

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop"
  }
  console.log(traffic_light.blue);
</script>

と書きます。

すると、Consoleにはプロパティ名blue の値である go が出力されました。

go

 

 

プロパティの値を書き換えてみよう

では、このプロパティの値を書き換えてみましょう。

プロパティ名にアクセスして、そこに別の値を代入します。

 

プロパティ名blueの値を go から go fast に変えてみます。そして、console.logで呼び出すと…

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop"
  }
  traffic_light.blue =  "go fast";
  console.log(traffic_light.blue);
</script>

gofast

できました。簡単ですね。

 

JavaScriptでオブジェクトを使う基本的な方法については以上です。

また、オブジェクトには new を使ったこのような生成のやり方もあります。

var オブジェクト名= new object(); 

 

詳しくはJavaScriptでDateオブジェクトを使って日付を表示する方法で解説しているので合わせてご覧ください。

 

20160620

 

連想配列みたいな感じですね。newでも生成することが出来るんですねー。

 

20163020-2

 

サンプルでは、JavaScriptの連想配列になってるんだ。

 

20160620

 

オブジェクトって何かわかりづらいですねー。

 

20163020-2

 

確かにそうかも。ただ、console.log()とかdocument.write()など組み込みの関数も全てオブジェクトが持っている関数なんだ。consoleオブジェクトが持っているlogという関数になるね。オブジェクトは変数と関数を持つことが出来る箱と考えるといいかも。

 

関数もオブジェクト

例えば、hello関数を作成すると次のようになります。

function hello() {
  alert("hello, techacademy.");
}
hello();

 

これは、次のコードと同じ意味です。

ここでは、function()という無名関数のオブジェクトを使用しています。

function()はhelloという変数に代入し、最後の行でhello()という様にhello変数に引数をつけることで実行が可能です。

var hello = function() {
  alert("hello, techacademy.");
}
hello();

JavaScriptの変数についてはこちらの記事を参考にしてみてください。

 

配列もオブジェクト

JavaScriptの配列もオブジェクトです。

配列をオブジェクトで包んで、関数を追加してしようしています。したがって、純粋な配列ではなく、配列のような感じになっているオブジェクトとも言えます。

JavaScriptの配列は、次ようなプロパティやメソッドがあります。それ以外は普通のオブジェクトと同様に扱うことが可能です。

配列のプロパティやオブジェクトについては、次のような種類があります。

  1. プロパティ length(配列の長さを取得する)
  2. メソッド slice()(配列の要素を取り出す)
  3. メソッド reverse()(要素の順番をひっくり返す)
  4. メソッド push()(末尾に新しい要素を追加する)

 

newを使用した配列オブジェクト

適当なオブジェクト名(family)をつけ、配列オブジェクトを使用してみます。

var family = new Array();

変数familyに、空のArrayオブジェクトを代入しました。
ここに、var family= new Array(“Taro”, “Jiro”, “Saburo”);を使用してTaro・Jiro・Saburoを追加します。
そして、console.log(family);で、変数familyを呼び出すことで中を確認することができます。

<!DOCTYPE html>
<html lang = “ja”>
  <head>
    <meta charset = “utf-8″>
    <title>JavaScriptの練習</title>
  </head>
  <body>
    <script>
      var family= new Array("Taro", "Jiro", "Saburo");
      console.log(family);
    </script>
  </body>
</html>

※文字列の場合、「” “」や「’ ‘」でかこんでください。

3人

 

更に詳しい配列の使用法についてはこちらの記事を参考にしてみてください。

 

[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース(JavaScript・jQuery講座)を開催しています。プログラミングの初心者でも受講可能です。