koboriakira.com

Functinal ComponentとClass Componentの使い分け

September 10, 2020

2020年9月3日、木曜日。九州地方に台風の特別警戒が流れている。

通り雨をやり過ごしたあと、Bを連れて買い物。オイスターソースのチューブが売られていたのですぐ買う。使い切る/捨てるのが大変だったので、とても嬉しい。帰宅後はバウンサーで寝てくれたので、一気に洗濯などをした。

それでもまだ時間があったので、この前立てたAPIを利用するフロントエンドの開発をはじめた。

無印でいくつか収納グッズを購入。好きな色じゃないファイルボックスを買うかどうかで15分ぐらい迷ってしまった(買わなかった)。


2020年9月4日、金曜日。

Bを連れての散歩は、だんだん習慣に近づいてきた。B自身も外に出て少し揺られたら寝る準備ができている感じ。今日は4,5分で寝はじめた。すこし時間があったのでReactのドキュメントを読み始めた。propsの扱い方をまったく覚えていなくて、結構苦労しそう。


2020年9月5日、土曜日。2020年9月6日、日曜日。

台風の影響か、頭痛が激しく、あまり使い物にならなかった。


2020年9月7日、月曜日。

ひきつづき頭痛に悩まされつつも7時起床。身体の換気も兼ねてBを久々に散歩に連れ出す。やっぱりグッスリ寝てくれるので、こうして日記も書き留めておける。ありがたい。頭痛もすこし改善された。

Bの面倒をみたあと、昼間は外で自由時間。帰りしな大雨に見舞われ、すこし予定を変更して居残った。

Reactについて少し学習。つまるところReactで使われるFunctionとClassの違いがわかっていなかった。つまるところ、

  • stateやLifecycleがあるなら、Class Componentを使う
  • それ以外は、Functional Componentを使う

ということ。だからフォームとかはClass Componentを使うべきだし(stateをイジくるから)、propsの代入だけでなんとかなるならFunctional Componentを使えばいい。

実際にドキュメントを読んではいないけれど、おそらくFuntional Componentの寄せ集めがClass Componentになるんだろうなと予想。

そしてもうひとつ。stateはthis.setStateで変更するということ。ここが(たぶん)Vueと違っていて、とっつきづらかった。まだ実践が足りないけれど、大体わかってきた感じがする。ライフサイクルごとに自動で呼び出せるメソッドを知りたいかな(Vueのmountedみたいな)。

ほかにはPythonの話だけど、uvicornでサーバ起動をしていたのだけど、自動起動など本番稼働を考えるとgunicornじゃないといけなそう。また何度uvicornを起動しても、よく503で落ちるのでワーカーのことを勉強しないといけないかも(的外れかもしれない)。


2020年9月8日、火曜日。

7時に起きてBを連れて散歩に。「以下略」程度にBが寝てくれている間に、今日はgunicornとSQLAlchemyをすこし学ぶ。

WSGIサーバであるgunicornは、(理由は知らないけれど)単独のHTTPサーバとしては利用できなくて、ApacheやnginxなどのHTTPプロキシサーバ経由で使わないといけないみたい。とりあえず、

gunicorn -k uvicorn.workers.UvicornWorker --bind 127.0.0.1:8080 --log-level debug 起動するPythonファイル

で起動させておいて、あとはApacheから8080番ポートにポートフォワードさせるように設定して、なんとか動かせるようになった。

もうひとつサーバサイド側で、SQLAlchemyを使ってORMを実装することにした。

Docker Composeでも問題が発生した。いくらファイルを更新しても最新のイメージ、コンテナを使ってくれない。調べたらdocker-compose builddocker-compose up --buildをしないといけないみたいだ。理由はあとで調べよう。


Kobori Akira

IT業界の社会人。音楽、パッカーズ、スワローズ、ポーカー。
読む価値のある記事はQiitaやnoteに投稿する予定です。
過去人気だったブログ記事はこちらから。