React.js & Next.js超入門 リスト3-11
ただいま『React.js & Next.js超入門』を勉強しているのですが、サンプルコードの理解に苦労したので、忘れないよう自分なりの解釈を記録しておきます。
import React, {Component} from 'react'; import './App.css'; class App extends Component { constructor(props){ super(); this.title = props.title; this.message = props.message; } render(){ return <div> <h1>{this.props.title}</h1> <p>{this.props.message}</p> </div>; } } export default App;
正しくコードが書けていたら以下の画面が表示されます。
疑問
このコードを見て、以下の疑問を感じました。
①this.titleとthis.messageは一体何を意味しているのか?
②なぜ
this.title = props.title
と、this.titleという変数に引数propsの値を代入しているのか?
調査
①について
「this this javascript」というキーワードでGoogle検索してみました。
非常に参考になるQiitaの記事が見つかりました!
qiita.com
qiita.com
②について
「参考書に詰まったら別の参考書からヒントを探す」という方法を試しました。
具体的にはkindle unlimitedでReactに関する電子書籍を複数ダウンロードし、解説されているページを探しました。
自分なりの解釈
①について
上記のQiitaの記事JavaScript の this を理解する多分一番分かりやすい説明 - Qiitaの文章
this は function を呼んだ時の . の前についているオブジェクトを指している
と、JavaScriptの「this」は「4種類」?? - Qiitaの文章
重要なのは「呼び出し元」をみることです。
なぜなら「呼び出し元」に「this」は左右されるからです。
から、以下のように解釈しました。
サンプルコードのthisはclass Appを指し、またclass Appをnewした場合、生成されるインスタンス自身を指している。
thisは、thisが書かれた(呼び出された)大元のオブジェクトを参照する変数だと理解しました。
だから、class Appの中に書かれているthis.titleはclass App の title、this.messageはclass Appのmessageを指すのだと思われます。
②について
参考にしたのはナカノヒトシさん著の『はじめてのREACT JavaScript初心者でもわかるかんたんフロントエンド入門』です。
www.amazon.co.jp
核心をついた説明文があったので引用します。
propsはJSXの文法ではHTMLの属性値と同様の構文で与えることができ、コンポーネントからはthis.propsからアクセスすることが可能です。
この表示から以下のように考えました。
クラスコンポーネントでpropsの属性にアクセスするためには、thisを使わなければならない。thisを付けない状態ではpropsの属性は反映されない。
したがって、関数コンポーネントのpropsと違い、クラスコンポーネントでは、this.title = props.titleとthis.message = props.messageをコメントアウトして書いた場合、propsの引数にアクセスできないということになってしまいます。
ダメな例↓ このままでは何も表示されません!
class App extends Component { constructor(props){ super(); // this.title = props.title; // this.message = props.message; } render(){ return <div> <h1>{this.title}</h1> <p>{this.message}</p> </div>; } }
<App title = "App" message = "This is App Component!" />
このことから、きちんと
したがって、constructorの中でthis.title = props.title; this.message = props.messageと定義しているのだと結論づけました。
ちなみにthis.title = props.titleと言った表現を使わない場合、renderメソッドの呼び出す変数を this.props.title、this.props.messageと書いてあげても問題なく表示されます。
class App extends Component { constructor(props){ super(); // this.title = props.title; // this.message = props.message; } render(){ return <div> <h1>{this.props.title}</h1> <p>{this.props.message}</p> </div>; } }
間違ってたら恥ずかしいのですが、this.title = props.titleを使う場合は「class Appのtitleにはpropsで指定されているtitleが入るよ。」という意味合いに、this.props.titleを使う場合は「class App からpropsにアクセスして、titleの値を拾ってくるよ」という意味合いになるということで、結果同じ働きをするのだと解釈しました。
あくまで、個人的な解釈になります。誤りがありましたらご指摘いただけると幸いです。。。