【6日でできるJavaScript入門】オブジェクト・メソッド・プロパティ

　JavaScriptの世界では、「オブジェクト」「メソッド」「プロパティ」はWebページを自在に操るための基本的な仕組みです。
Webページの各要素や、ブラウザそのものさえも「オブジェクト」として扱うことで、表示内容を変更したり、様々な機能を呼び出したりできます。

　ここでは、オブジェクト・メソッド・プロパティの基礎から、具体的な操作方法、ツリー構造、そして実用的なサンプルまで、順を追って丁寧に解説します。

用語意味・概要
オブジェクト情報や機能をひとまとまりにしたもの（要素・ウィンドウなど）
メソッドオブジェクトに付随する「動作」や「命令」（関数）
プロパティオブジェクトが持つ値や情報（状態・特徴）

１．オブジェクトとは？

JavaScriptでは、Webページの要素やブラウザの機能自体もすべて「オブジェクト」として表現されます。
「オブジェクト＝情報のまとまり」というイメージを持つとよいでしょう。

主なオブジェクト役割や内容
windowブラウザのウィンドウ全体
documentページの内容（HTML全体）
console開発者ツールのコンソール画面
location現在表示しているURLなどの情報
historyブラウザの履歴情報
navigatorブラウザの種類・バージョンなど

1.1. オブジェクトツリーの仕組み

JavaScriptでは、オブジェクト同士が階層構造（ツリー構造）でつながっています。

例：ツリー構造イメージ

window
├─ document
│   ├─ html
│   │   ├─ head
│   │   └─ body
│   │       ├─ h1
│   │       ├─ p
│   │       └─ div
│   │           └─ img
├─ console
├─ location
├─ history
└─ navigator
用語意味・解説
親ノード上位にあるオブジェクト
子ノード下位にぶら下がるオブジェクト
兄弟ノード同じ親を持つオブジェクト

２．メソッドとプロパティの使い方

2.1. メソッドとは？

メソッドは、オブジェクトが持つ「動作」や「命令」を表します。
最後に()（かっこ）がつき、何かを実行するものです。

例意味・結果
window.alert('こんにちは')警告ダイアログを表示するwindowのメソッド
document.getElementById()指定したIDの要素を取得するdocumentのメソッド
console.log()開発者ツールに内容を出力するconsoleのメソッド

2.2. プロパティとは？

プロパティは、オブジェクトが持つ「値」や「情報」です。
値の取得や書き換えに使います。()は付けません。

例説明
element.textContent要素のテキスト内容
element.innerHTML要素のHTML内容
array.length配列の要素数

３．実践サンプルで理解する

3.1. サンプル：ボックスのHTML内容を取得・表示

　ここでは、ボタンを押すと、指定ボックス内のHTML内容（タグも含めて）を取得して、下部に表示するサンプルを作成します。

ファイル名： lesson19-1.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>📦 オブジェクトとプロパティのデモ</title>
  <style>
    #box {
      width: 500px; border: solid 1px #008080; padding: 10px; margin: 20px 0;
    }
    #show_html {
      margin-top: 20px; background: #f2f2f2; padding: 12px;
    }
  </style>
</head>
<body>
  <h1>📦 オブジェクトとプロパティのデモ</h1>
  <p>下のボタンをクリックすると、ボックス内のHTMLが表示されます。</p>
  <div id="box">
    <h3>人口が多い都市一覧</h3>
    <ul>
      <li>横浜市</li>
      <li>大阪市</li>
      <li>名古屋市</li>
    </ul>
  </div>
  <button onclick="showBoxHtml()">HTMLを表示</button>
  <div id="show_html">ここにHTMLが表示されます。</div>
  <script>
    function showBoxHtml() {
      // documentは「ページ全体」を示すオブジェクト
      // getElementByIdはその「メソッド」＝機能（命令）
      // innerHTMLは要素が持つ「プロパティ」＝値
      let html = document.getElementById('box').innerHTML;
      document.getElementById('show_html').textContent = html;
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例（ボタンを押したとき）

<h3>人口が多い都市一覧</h3> <ul> <li>横浜市</li> <li>大阪市</li> <li>名古屋市</li> </ul>

タグ・構文解説

タグ・構文説明
<div id="box">...</div>取得対象のオブジェクト。id属性でJavaScriptから参照可能
document.getElementById()指定IDの要素（オブジェクト）を取得するメソッド
.innerHTMLオブジェクトのHTML内容を表すプロパティ
.textContentオブジェクトのテキスト内容を表すプロパティ
onclick="showBoxHtml()"クリック時に関数（メソッド）を実行

４．応用：プロパティで値を変更・取得する

サンプル：メッセージの切り替え

ファイル名： lesson19-2.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>✉️ メッセージ切り替え</title>
</head>
<body>
  <h1>✉️ メッセージ切り替え</h1>
  <p id="message">こんにちは、JavaScript！</p>
  <button onclick="changeMessage()">別のメッセージに変更</button>
  <button onclick="showMessage()">今のメッセージを表示</button>
  <script>
    function changeMessage() {
      document.getElementById('message').textContent = 'ようこそ、オブジェクトの世界へ！';
    }
    function showMessage() {
      let text = document.getElementById('message').textContent;
      alert(text);
    }
  </script>
</body>
</html>

ブラウザの出力例

出力例

「別のメッセージに変更」ボタンを押すと

ようこそ、オブジェクトの世界へ！

「今のメッセージを表示」ボタンを押すと、アラートでメッセージ内容が表示される

５．プログラムや配列もオブジェクト

JavaScriptでは配列もオブジェクトなので、lengthなどのプロパティが使えます。

例結果・説明
[1, 2, 3].length3（要素数）
"テスト".length3（文字数）

まとめ

  • オブジェクトは、Webページの要素やブラウザの機能など、すべての「情報の集合体」
  • メソッドは「オブジェクトに命令を出すための関数」
  • プロパティは「オブジェクトの持つ値や状態」
  • 取得や書き換えはオブジェクト.プロパティ/オブジェクト.メソッド()という形で行う
  • HTML要素もJavaScriptから柔軟に操作できる

　オブジェクト・メソッド・プロパティの関係を理解し、実際の操作方法に慣れることで、Web開発の自由度が大きく広がります！