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

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

基礎

【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/08   -基礎

この記事で分かること JavaScriptの基本書式(半角・大文字小文字) 命名規則(変数名・関数名のルール) 予約語の一覧と注意点 文字列・数値・論理値の扱い方 セミコロンの使い方と改行ルール Ja …

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

2019/04/09   -基礎

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

【JavaScript入門】条件分岐の使い方|初心者向けにif文・else文・switch文をわかりやすく解説

2019/04/14   -基礎

この記事で分かること 条件分岐とは何か if / else / else if の基本構造 複数行処理の書き方(ブロック) switch 文の使い方と break の役割 実例で理解する条件分岐の書き …

【JavaScript入門】scriptタグの使い方|初心者向けにHTMLへの書き方をわかりやすく解説

2019/04/02   -基礎

この記事で分かること script タグの基本的な書き方 head と body のどちらに書くべきか 外部ファイル(.js)の読み込み方法 defer / async の違いと使い分け 初心者がつま …

【JavaScript入門】変数の使い方|初心者向けに宣言方法・命名規則・スコープをわかりやすく解説

2019/04/12   -基礎

この記事で分かること JavaScriptの変数とは何か 変数の宣言方法(var の基本) 初期値の代入と複数宣言の書き方 変数名の命名規則と注意点 ローカル変数とグローバル変数の違い スコープ(有効 …

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

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

-基礎

執筆者: