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という関数になるね。オブジェクトは変数と関数を持つことが出来る箱と考えるといいかも。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
関数もオブジェクト
例えば、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講座）を開催しています。プログラミングの初心者でも受講可能です。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
