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

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

基礎

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

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

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

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



オブジェクトとは?

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

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

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

ビルトインオブジェクト

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

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

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

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

特徴:

  • ブラウザ独自のプロパティやメソッドが存在することがある
  • 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はオブジェクトベースの言語
  • オブジェクトにはビルトインとナビゲーターの2種類がある
  • プロパティはオブジェクトの状態を表す
  • メソッドはオブジェクトに対する処理を実行する
  • プロパティとメソッドを理解すると、JavaScriptの理解が一気に深まる

関連リンク

-基礎
-

執筆者:

関連記事

【JavaScript入門】演算子の種類と使い方まとめ|算術・比較・論理・代入・ビット演算子を初心者向けに解説

JavaScriptの演算子まとめ|算術・比較・論理・ビット・代入演算子を初心者向けに解説 JavaScriptには、計算や比較、条件分岐などに使うさまざまな演算子があります。 演算子を理解すると、コ …

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

JavaScriptで色を指定する方法|16進数・色名・CSS指定を初心者向けに解説 JavaScriptで色を指定する方法は、HTML/CSS と同様に複数あります。代表的なのは次の2つです。 16 …

【JavaScript入門】外部ファイル(.js)を読み込む方法|scriptタグのsrc属性を解説

JavaScriptを外部ファイルで読み込む方法|scriptタグのsrc属性を初心者向けに解説 JavaScriptをWebページに組み込む方法はいくつかあります。 HTML文書内に直接記述する 外 …

【JavaScript入門】基本書式と記述ルールまとめ|命名規則・文字列・数値・セミコロンの使い方

JavaScriptの基本書式と記述ルールまとめ|初心者が知っておくべき注意点を解説 JavaScriptを書くときには、基本的な書式や命名ルール、文字列の扱いなど、知っておくべきポイントがいくつかあ …

【JavaScript入門】イベントとイベントハンドラの基本|onclick・onload・onmouseoverの使い方を解説

JavaScriptのイベントとイベントハンドラの基本|onclick・onload・onmouseoverを初心者向けに解説 JavaScriptでは、ユーザーの操作やページの状態変化に応じて「イベ …