知識を取り込み、そして発信する
オブジェクトとは、情報と機能をひとまとめにした考え方です。
JavaScriptでは、単なる値ではなく、状態と動作を持つまとまりとして物事を扱います。
オブジェクトの中には、その対象が持っている特徴や状態を表すものと、実行できる操作があります。
前者をプロパティ、後者をメソッドと呼びます。
JavaScriptでは、処理を書くときに何に対して操作を行うのかを必ず指定します。
これは、JavaScriptがオブジェクトを中心に設計されているためです。
授業でノートに文字を書く場面を想像してみてください。
ノートは文字を書かれる対象であり、鉛筆は文字を書くための道具です。
鉛筆には色という状態があり、書くという動作があります。
色を変えれば、同じ内容でも見た目が変わります。
これは、道具の状態を変えてから、同じ動作を行っているということです。
JavaScriptでも同じように、対象となるものがあり、その状態を変え、動作を実行します。
この考え方が、オブジェクト・プロパティ・メソッドの関係です。
当サイトでは説明文でも触れますが、構文の下にオブジェクトかプロパティかメソッドか、後に取り上げる関数かを一目でわかるよう表示しています。
人は日常生活の中で、自然に使えるものと使えないものを区別しています。
鉛筆では文字を書けますが、ハサミで文字を書くことはできません。
逆に、ハサミでは紙を切れますが、鉛筆では切れません。
JavaScriptのオブジェクトも同じです。
すべての操作が、すべての対象に対して使えるわけではありません。
どのオブジェクトに、どの操作が用意されているかは、あらかじめ決まっています。
そのためJavaScriptでは、対象となるオブジェクトを明確にした上で処理を書く必要があります。
これまで扱ってきたHTMLやCSSも、オブジェクトの考え方と深くつながっています。
HTMLの要素は、JavaScriptから見るとオブジェクトとして扱われます。
CSSは、そのオブジェクトの見た目や状態を指定するプロパティに相当します。
つまり、HTMLで要素を用意し、CSSで見た目を指定するという流れは、オブジェクトに対してプロパティを設定している、と考えることができます。
この視点を持つことで、HTML・CSS・JavaScriptが別々のものではなく、役割の異なる同じ仕組みの延長であることが分かるようになります。
JavaScriptをブラウザで使う場合、最初から用意されているオブジェクトがあります。
これらのオブジェクトを通して、ブラウザの動作や画面表示、ページの中身を扱います。
JavaScriptがブラウザを操作できるのは、こうしたオブジェクトがあらかじめ用意されているためです。
windowオブジェクトは、ブラウザ全体を表す最上位のオブジェクトです。
画面サイズやスクロール位置などのブラウザの状態を扱えたり、ブラウザに関わる機能を実行できます。
構文
window.メソッド();
window.プロパティ;
window.プロパティ = 値;
基本的には、windowの中にあるメソッドやプロパティを指定して使う形になります。
window.メソッド() は、windowが持つ機能を実行する書き方です。
window.プロパティ は、windowが持つ情報（状態）を取得する書き方です。
window.プロパティ = 値 は、windowの設定や状態を変更する書き方です。
このように、windowオブジェクトはプロパティで情報を扱い、メソッドで動作を実行するという構造になっています。
documentオブジェクトは、ブラウザに表示されているHTML文書全体を表すオブジェクトです。
ページ内の要素を取得したり、内容を書き換えたりする操作は、基本的にdocumentを通して行います。
つまりdocumentは、ページの中身（DOM）を操作するための入口となる存在です。
構文
document.メソッド();
document.プロパティ;
document.プロパティ = 値;
documentもwindowオブジェクトの一部で、正式にはwindowの中に含まれています。
ただしwindowは省略できることが多いため、documentを使うときにwindowを明示する必要はありません。
windowは、ブラウザ全体を表すオブジェクトです。
documentは、その中にあるHTML文書を表すオブジェクトです。
どちらも重要ですが、役割は異なります。
ブラウザ全体を扱うのか、ページの中身を扱うのか、という違いです。
JavaScriptでは、処理はすべてオブジェクトを中心に考えます。
オブジェクトには状態を表すプロパティと、動作を表すメソッドがあります。
どの対象に対して何を行うのかを意識することが、JavaScriptを理解する第一歩になります。
この考え方を押さえておくことで、これから学ぶDOM操作やイベント処理も、よりスムーズに理解できるようになります。