React.js & Next.js超入門 リスト3-11

ただいま『React.js & Next.js超入門』を勉強しているのですが、サンプルコードの理解に苦労したので、忘れないよう自分なりの解釈を記録しておきます。

www.amazon.co.jp


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;


正しくコードが書けていたら以下の画面が表示されます。


f:id:hiro_from_22:20201021223656p:plain


疑問

このコードを見て、以下の疑問を感じました。


①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!" />

このことから、きちんとをレンダリングするためには、class Appの中のtitleはprops.titleのことだよと、thisを使ってコンピューターに教えて上げなければなりません。

したがって、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の値を拾ってくるよ」という意味合いになるということで、結果同じ働きをするのだと解釈しました。

あくまで、個人的な解釈になります。誤りがありましたらご指摘いただけると幸いです。。。