現役システムエンジニアの備忘録

技術スキルや用語などの記録を残していきます

基礎

【JavaScript入門】オブジェクト・プロパティ・メソッドとは?|初心者向けに基本概念をわかりやすく解説

投稿日:2019年4月10日 更新日:

この記事で分かること

  • オブジェクト・プロパティ・メソッドの基本概念
  • ビルトインオブジェクトとナビゲーターオブジェクトの違い
  • プロパティの参照・設定方法
  • メソッドの呼び出し方と実例
  • 初心者がつまずきやすいポイント

JavaScriptは「オブジェクトベース」のスクリプト言語です。
Webページを操作するうえで欠かせない オブジェクト・プロパティ・メソッド の概念を理解しておくと、コードが一気に読みやすく、書きやすくなります。



オブジェクトとは?

JavaScriptでは、次のような「ページを構成する要素」すべてがオブジェクトとして扱われます。

  • window(ウィンドウ)
  • document(ドキュメント)
  • form(フォーム)
  • string(文字列)
  • date(日付)

オブジェクトには大きく分けて次の2種類があります。

ビルトインオブジェクト

JavaScriptに最初から組み込まれているオブジェクトで、ECMAScript仕様に基づいています。

  • Array(配列)
  • String(文字列)
  • RegExp(正規表現)
  • Date(日付)

これらはブラウザに依存せず、JavaScriptそのものが提供する基本的な機能です。

ナビゲーターオブジェクト

ブラウザが提供するオブジェクトで、ウィンドウやフォーム、画像などを操作できます。

特徴:

  • ブラウザ独自のプロパティやメソッドが存在することがある
  • Windowオブジェクトを最上位とするツリー構造
  • 下位オブジェクトは上位オブジェクトのプロパティとして参照できる
  • window は最上位なので省略可能(例:window.documentdocument



プロパティとは?

プロパティとは、オブジェクトが持つ「状態」や「属性」のことです。

プロパティの参照方法:


オブジェクト名.プロパティ名;

プロパティの設定方法:


オブジェクト名.プロパティ名 = 値;

例:Documentオブジェクトの背景色を赤にする


document.bgColor = "red";

Documentオブジェクトには、背景色・文字色・URI・タイトルなど多くのプロパティがあり、これらを操作することでページの見た目や動作を変更できます。

メソッドとは?

メソッドとは、オブジェクトに対して実行できる「処理」のことです。

メソッドの呼び出し方:


オブジェクト名.メソッド名();

必要に応じて () の中に引数を指定します。

例:Stringオブジェクトの indexOf メソッドで文字列を検索する


str = "Microsoft Internet Explorer";
i = str.indexOf("Internet", 0);

この例では、文字列 str の中から「Internet」を検索し、その位置を変数 i に代入しています。

JavaScript 初心者におすすめの学習書籍

書籍で学ぶのが向いている人

  • 紙の本で体系的に学びたい
  • ネット記事だけだと情報が断片的に感じる
  • 基本文法を順序立てて理解したい

オブジェクト・プロパティ・メソッドは JavaScript の基礎であり、書籍ではこれらを体系的に順序立てて学べるため、理解が深まりやすいです。

いちばんやさしい JavaScript の教本

写真や図が多く、手を動かしながら学べる初心者向けの入門書です。
オブジェクトの仕組みやメソッドの使い方など、この記事で扱った基礎を実際に動くサンプルとともに理解できます。

この本で解決できること:

  • JavaScriptの基本文法をやさしく理解できる
  • 手を動かしながら学べるため、挫折しにくい
  • 「まず動くものを作ってみたい」が実現できる

確かな力が身につく JavaScript「超」入門

JavaScriptの基礎を体系的に学びたい方に向いている入門書です。
初心者がつまずきやすいポイントを丁寧に解説しており、オブジェクト操作の理解をさらに深められます。

この本で解決できること:

  • JavaScriptの基礎を体系的に学び直せる
  • 実務で使えるレベルの基礎力が身につく
  • 現代的なコードの書き方が理解できる

動画で理解を深めたい方へ(Udemy講座)

オブジェクト・プロパティ・メソッドは JavaScript の基礎中の基礎ですが、実際に手を動かして学ぶと理解が一気に深まります。
Udemy の動画講座では、画面の動きを見ながら学べるため、初心者でもスムーズに理解できます。

初心者のためのJavaScript 完全入門

JavaScriptの基礎を体系的に学べる人気講座です。
オブジェクトの仕組みやメソッドの使い方など、この記事で扱った内容を実際のコード操作とともに理解できます。

この講座で解決できること:

  • JavaScriptの基本文法を体系的に理解できる
  • オブジェクト・プロパティ・メソッドの使い方が身につく
  • 初心者がつまずきやすいポイントを動画で理解できる

初心者のためのJavaScript 完全入門(Udemy)

超JavaScript 完全ガイド 2026

JavaScriptの基礎〜応用まで幅広く学べる講座です。
オブジェクト操作だけでなく、DOM・イベント処理・非同期処理までカバーしており、次のステップに進みたい方に最適です。

この講座で解決できること:

  • JavaScriptの基礎〜応用を体系的に理解できる
  • 現代的なコードの書き方が身につく
  • 実務で必要な知識をまとめて習得できる

超JavaScript 完全ガイド 2026(Udemy)

体系的に学びたい方へ(スクールという選択肢)

オブジェクトの概念は理解できても、DOM操作・イベント処理・非同期処理に進むと、独学では急に難しく感じることがあります。
こうした段階で「質問できる環境」があると、理解スピードが大きく変わります。

独学でつまずきやすいポイント

  • コードの意図が理解できない
  • イベント処理や非同期処理で混乱しやすい
  • コードレビューを受ける機会がない
  • 学習の順番に自信が持てない

スクールでは、プロの講師が学習ロードマップを作成し、つまずきやすい部分を丁寧にサポートしてくれます。
「効率よく学びたい」「質問しながら進めたい」という方に向いています。

無料相談で得られるメリット

  • あなたのレベルに合わせた学習計画を作成してくれる
  • 独学でつまずきやすい部分を事前に教えてくれる
  • 学習方法の改善点をプロがアドバイス
  • エンジニア転職を視野に入れたキャリア相談も可能

JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。

DMM WEBCAMP 学習コース(無料相談はこちら)



オブジェクト・プロパティ・メソッドに関するよくある質問(FAQ)

Q1

オブジェクトと配列は何が違う?

A

配列は「順番付きのデータの集合」で、オブジェクトは「名前付きのデータの集合」です。

Q2

プロパティとメソッドの違いは?

A

プロパティは「値」、メソッドは「処理(関数)」です。

Q3

window は必ず省略していい?

A

基本的には省略できますが、同名の変数がある場合は明示したほうが安全です。

Q4

自分でオブジェクトを作ることもできる?

A

可能です。オブジェクトリテラル {} を使って自由に作成できます。



まとめ

  • JavaScriptはオブジェクトベースの言語
  • オブジェクトにはビルトインとナビゲーターの2種類がある
  • プロパティはオブジェクトの状態を表す
  • メソッドはオブジェクトに対する処理を実行する
  • プロパティとメソッドを理解すると、JavaScriptの理解が一気に深まる



関連記事

【JavaScript入門】演算子まとめ|初心者向けに算術・比較・論理・代入・ビット演算子をわかりやすく解説

2019/04/13   -基礎

この記事で分かること JavaScriptの演算子の種類と役割 算術演算子の基本と使い方 比較演算子と条件式の仕組み 論理演算子(AND / OR / NOT)の動作 ビット演算子の基礎 代入演算子・ …

【JavaScript入門】JavaScriptとは?初心者向けに特徴・できること・基本の仕組みを解説

2019/04/01   -基礎

この記事で分かること JavaScriptとは何か(初心者向けのやさしい説明) JavaScriptでできること(具体例付き) JavaScriptの特徴とメリット JavaScriptとJavaの違 …

【JavaScript入門】色の指定方法まとめ|初心者向けに16進数・色名・CSS指定の違いをわかりやすく解説

2019/04/09   -基礎

この記事で分かること JavaScriptで使える色指定の種類 16進数(#rrggbb)の仕組みと基本色 色名(color name)の一覧と特徴 JavaScriptからCSSの色を変更する方法 …

【JavaScript入門】breakとcontinueの使い方|初心者向けにループ制御の基本をわかりやすく解説

2019/04/16   -基礎

この記事で分かること break と continue の基本的な役割 ループ処理(for / while / do…while)での使い方 switch 文での break の重要性 処理を途中 …

【JavaScript入門】new・delete・with・thisの使い方|初心者向けにオブジェクト操作の基本をわかりやすく解説

2019/04/17   -基礎

この記事で分かること new / delete / with / this の役割と違い オブジェクトを作成する方法(new) プロパティを削除する方法(delete) オブジェクト名を省略する書き方 …

このブログは Xserver 上の WordPress で運用しています。
表示速度が速く、安定しているのでブログ初心者にもおすすめです。

レンタルサーバー エックスサーバー

-基礎

執筆者: