React入門 #05：コンポーネントとステートで時計っぽいものを作ろう

[@よし-b9l9f]

こういった成果物が出来上がる動画は達成感にもなって素晴らしいですね。今回もお世話になりました。

[@tomosta]

良かったです！

[@pantanocabra3873]

めっちゅいいです！ありがとうございます。

[@tomosta]

めっちゅ！？　ありがとうございます！

[@エウロパの海]

こちらのシリーズでreactを勉強させてもらっています。 練習のためにnew Dateを使ってアウトプットを試みたのですが、未だうまくいかず悩んでおります。 時間の表示をするだけならばrenderの中で変数を定義すれば出てくるのですが、時間ごとに「おはようございます」「こんにちは」といった挨拶で分けたいので、Timeというクラスを定義して、その中でgetHoursのプロパティを定義してから、関数のなかでgetHoursのプロパティを条件分岐するかたちでsetStateさせました。 どうやらクラスで定義したgetHours, getMinutes, getSecondsはうまく表示されるのですが、関数で指定した挨拶文が表示されません。 何かヒントがあれば教えていただきたいです🙏 お忙しいところすみません💦

[@tomosta]

ちょっと文章だけでは、質問内容が掴みきれません・・　Slackコミュニティの方にご登録頂いて、質問スレッドを利用して頂ければ、私以外の方からもアドバイスなどあるかもしれず、また、ソースファイルなどを貼り付けて頂くとより分かるかと思います！　よろしければ是非。 tomosta.jp/community/

[@atkamiya]

いつもわかりやすい教材をありがとうございます。 そこで、質問をお願いします。 class Clock extends React.Component { constructor(props){ super(props); のところなのですが、VSCodeでコードを書くと「super」に取り消し線のようなものが入ります。 しかし、プログラムは問題なく動画のように動作しました。 VSCodeのメッセージを見ると「'(props: any, context?: any): Component' は非推奨です」とでます。 検索してみたのですが、わからなくて。 試しに、 class Clock extends React.Component { constructor(){ super(); としたら、動画のように動作しました。 もしかすると、動画を撮影した時と、私が動画を見た時点(2020/9/12)では、仕様が変わったのでしょうか？ お忙しいところ恐縮ですが、よろしくお願い致します。

[@tomosta]

VSCodeの文法チェックは、Reactの文法を理解して動作しているわけではないため、おかしな所で警告が出る場合があります。superのパラメータについては、Reactでは propsを渡すこととされているようでした。 qiita.com/hand-dot/items/61a4b808f110b12e4281 ご確認くださいませ。

[@atkamiya]

ありがとうございます。紹介していただいた、URLの記事を読んでみました。なかなか何回でしたが、なんでpropsをしてしなくても動作することが分かりました。 また、VSCodeの文法チェックが、万能でないことも意識しておきます。 早いご返答感謝します。

[@idmry6870]

this.now = new Date() のthis というのは、どこを指しているのでしょうか？ 今まで let hoge = new Date() のように書いてきたので....

[@tomosta]

こちらは、Reactのオブジェクトを指していますね。Reactなどのフレームワークを使ったときの特有の書き方ですね！　ひとまず決まり文句と思っていただけると。

[@txyzkxyz6256]

javascriptが進化し過ぎ……

[@tomosta]

本当ですよねー。勉強が追いつかないです（笑