1. TOPTOP
  2. Webサービス
  3. React

ReactとJavaScriptの文法 ~ ReactDOMとWindowオブジェクト

|

react_js_reactdom_windowdom_0

Reactの公式ドキュメントでGetting Started(新しいタブで開く)を読むと、このような文章があります。

We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.

意訳をすると「Reactを習得したかったら、JavaScriptも並行して学習してね!」と言ったところでしょうか。ということでReactの学習を意識しつつ、JavaScriptの学習も進めていきましょう。今回はReactDOMWindowオブジェクトについて紹介します。

ReactDOMとは?

プログラミングやシステムの学習で、毎度おなじみの”Hello World!”ですが、ご多分にもれずReact(新しいタブで開く)でも紹介されています。

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

1行目の”ReactDOM”に注目しましょう。ReactDOMを一言で表現すると、Reactにおけるトップレベルのドキュメントオブジェクトモデル(Document Object Model = DOM)です。ReactのメソッドはすべてReactDOMに基づいています。ReactDOMで使えるメソッドは公式ドキュメント(新しいタブで開く)で紹介されています。

ReactDOMのデバッグ

console.log(ReactDOM);

react_js_reactdom_windowdom_1

“ReactDOM”でデバッグすると、ReactDOMで使えるメソッドが表示されます。

Windowオブジェクト

JavaScriptにはReactのReactDOMとよく似た概念として、Windowオブジェクトという概念があります。Windowオブジェクトはクライアントサイド(ブラウザ)におけるトップレベルのオブジェクトです。

Windowオブジェクトのdocumentプロパティについて

ただし、クライアントサイドのJavaScriptを学習するときは、Windowオブジェクトの1つ下に位置するdocumentプロパティに基づいて学習します。

var e = window.document.getElementById('msg');

クライアントサイドのJavaScriptを学習していると、上記のような表現が頻出します。このコードでは”msg”というid要素を変数eに格納しています。ただしdocumentプロパティを記述するときは”window”の記述が省略可能です。したがって、

var e = document.getElementById('msg');

という記述でも同じ表現になります。どちらかというと、”window.document”よりも”document”という表現の方がよく見かける記述なので覚えておきましょう。

document(window.document)のデバッグ

console.log(document);
console.log(window.document);

react_js_reactdom_windowdom_2

“document”または”window.document”でデバッグをすると、ブラウザの要素全体が取得されます。