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

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

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

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

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

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

 

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

 

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

 

目次

 

 

オブジェクトとは

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

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

 

 

[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オブジェクトを使って日付を表示する方法で解説しているので合わせてご覧ください。

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