JavaScriptでオブジェクトを使う方法【初心者向け】
プログラミング初心者向けに、JavaScriptで【オブジェクト】を使う方法を解説した記事です。オブジェクトとは、プロパティを複数集めたもの集合のことです。プロパティの値を書き換える方法も、実際にコードを見ながら紹介します。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptをプログラミング初心者向けに紹介した記事です。
今回は、JavaScriptでオブジェクトを使う方法について解説します。
また、入門向けのJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。
本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。
なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。
今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
目次
オブジェクトとは
オブジェクトとは、プロパティ（※）を複数集めたもの集合のことです。変数配列もオブジェクトの一種に当たります。データを管理するのに非常に重要なものなので、是非覚えましょう。
※プロパティ…あらかじめ設定しておいた特定の情報（値）に、名前（プロパティ名）をつけたもの
田島メンター！オブジェクトというのは何でしょうか？変数配列もオブジェクト？？？なんですか？
少しややこしいんだよね。JavaScriptって全ての値がオブジェクト、もしくはオブジェクトのように振舞うから。
なぜ全ての値がオブジェクトのようにふるまうのでしょうか？
とりあえず簡単にオブジェクトっていう、変数や関数を格納しておける小さなプログラムの単位って考えるといいよ。さっそく書き方を見てみよう！
実際にオブジェクトを作ってみよう
traffic_light（信号機）という変数を作り、色に応じてメッセージが表示されるようなプログラムを書きます。
<!DOCTYPE html>
<html lang = "ja">
<head>
<meta charset = "utf-8">
<title>JavaScriptの練習</title>
</head>
<body>
<script>
const traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
</script>
</body>
</html>
blue: “go”・yellow: “slow down”・red: “stop” はそれぞれがプロパティです。この3つのプロパティを持ったオブジェクトが、traffic_lightという変数に定義されているという状態をあらわしています。
各プロパティを呼び出してみよう
では、オブジェクト内の各プロパティを呼び出すやり方です。
変数名に「.」で続けてプロパティ名を入れると、プロパティの値を呼び出すことができます。
よって、変数traffic_lightに入っているオブジェクト内のプロパティblue: “go”を呼び出したい場合は…
<script>
const traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
console.log(traffic_light.blue);
</script>
と書きます。
すると、Consoleにはプロパティ名blue の値である go が出力されました。
プロパティの値を書き換えてみよう
では、このプロパティの値を書き換えてみましょう。
プロパティ名にアクセスして、そこに別の値を代入します。
プロパティ名blueの値を go から go fast に変えてみます。そして、console.logで呼び出すと…
<script>
const traffic_light = {
blue: "go",
yellow: "slow down",
red: "stop"
}
traffic_light.blue = "go fast";
console.log(traffic_light.blue);
</script>
できました。簡単ですね。
JavaScriptでオブジェクトを使う基本的な方法については以上です。
また、オブジェクトには new を使ったこのような生成のやり方もあります。
const オブジェクト名= new object();
詳しくはJavaScriptでDateオブジェクトを使って日付を表示する方法で解説しているので合わせてご覧ください。
連想配列みたいな感じですね。newでも生成することが出来るんですねー。
サンプルでは、JavaScriptの連想配列になってるんだ。
オブジェクトって何かわかりづらいですねー。
確かにそうかも。ただ、console.log()とかdocument.write()など組み込みの関数も全てオブジェクトが持っている関数なんだ。consoleオブジェクトが持っているlogという関数になるね。オブジェクトは変数と関数を持つことが出来る箱と考えるといいかも。
関数もオブジェクト
例えば、hello関数を作成すると次のようになります。
function hello() {
alert("hello, techacademy.");
}
hello();
これは、次のコードと同じ意味です。
ここでは、function()という無名関数のオブジェクトを使用しています。
function()はhelloという変数に代入し、最後の行でhello()という様にhello変数に引数をつけることで実行が可能です。
const hello = function() {
alert("hello, techacademy.");
}
hello();
JavaScriptの変数についてはこちらの記事を参考にしてみてください。
配列もオブジェクト
JavaScriptの配列もオブジェクトです。
配列をオブジェクトで包んで、関数を追加してしようしています。したがって、純粋な配列ではなく、配列のような感じになっているオブジェクトとも言えます。
JavaScriptの配列は、次ようなプロパティやメソッドがあります。それ以外は普通のオブジェクトと同様に扱うことが可能です。
配列のプロパティやオブジェクトについては、次のような種類があります。
- プロパティ length（配列の長さを取得する）
- メソッド slice()（配列の要素を取り出す）
- メソッド reverse()（要素の順番をひっくり返す）
- メソッド push()（末尾に新しい要素を追加する）
newを使用した配列オブジェクト
適当なオブジェクト名（family）をつけ、配列オブジェクトを使用してみます。
const family = new Array();
変数familyに、空のArrayオブジェクトを代入しました。
ここに、const 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>
const family= new Array("Taro", "Jiro", "Saburo");
console.log(family);
</script>
</body>
</html>
※文字列の場合、「” “」や「’ ‘」でかこんでください。
更に詳しい配列の使用法についてはこちらの記事を参考にしてみてください。
この記事を監修してくれた方
| 中本賢吾（なかもとけんご） アジマッチ有限会社 代表取締役社長 開発実績：PHPフレームワークによるフランチャイズ企業向け会員制SNS。Shopifyによる海外進出用大規模ネットショップ構築。Vue.jsによる金融機関向け内部アプリ。AWSやLinuxハウジングサーバーでの環境構築。人工知能を利用した画像判別システム。小売チェーン店舗用スマホアプリ。Wordpressによる不動産チェーン店向け賃貸・売買仲介システム。基幹システム移管用データコンバートシステム。 ボランティア活動：小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞、中学生がSNS型PWAアプリリリースする市クラブ講座活動を行っている。 |
[お知らせ]TechAcademyではJavaScriptを使ってWebサービスを公開できるオンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）を開催しています。プログラミングの初心者でも受講可能です。
