5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【最新ver対応済】モダンJavaScriptの基礎から始める挫折しないためのReact入門 修了日記

Posted at

はじめに

以下のudemy講座を本日修了したので、そのメモを投稿しようと思います。

受講した感想

1か月ほど前に触れて挫折していたのですが、もう一度いちからやり直すにしても一日ではボリューミーな内容でした。
この講座では、素のJavaScriptでもReactでもTODOアプリを開発することで、Reactがいかに使いやすかという恩恵を感じられるような体験が用意されています。
おそらく初めて取り組んだ方にとっては、どっちも難しい!と思うのが当たり前のことです。僕もそうでした笑

特に難しかったところ

  • hooks ( useState, useEffectなど )を使った状態管理
  • コンポーネントに分割する

状態管理とひとくくりにいっても、さまざまな状態があるのでそこが混乱する要因だったのかなと思います。
truefalse といったbooleanの状態、TODOの内容を管理する配列の状態など。

しかし、大事なのは結局 変更されるのがどこか( = 状態 ) ということだと感じました。

Reactによるアプリケーションのパフォーマンス向上・開発体験の向上は、

必要なところだけを変更する

ところに鍵があるのだと思います。差分とか仮想DOMとかの難しい言葉は置いておいて、とりあえず変更する必要のあるところだけ変更すればいいよね、という考え方です。
その考え方に乗っ取って開発を進めていけばおのずと状態についても理解できてくるのではないかなと思います。
X(旧Twitter)で考えてみると、わざわざタブバーとか検索窓とかは読み込みなおす(再レンダリングし直す)必要はなさそうですよね。ユーザーのpost(tweet)の部分のみを変更していけば可能そうです。

mapでpost(tweet)を管理した配列をぶん回せば自分もあのTwitterが作れるかも…!!!
という淡い希望が湧いてきました笑

ほかに重要だと思ったところ

再レンダリングの条件

  • state( 状態 )の変更
  • propsの変更
  • 親コンポーネントの再レンダリン

レンダリングの考えは重要になってくると聞いたこともあるので重要事項としてピックアップしておきます。

この後何しよう

まずは僕がコーチングを受けているJISOUさんからの課題をひとつ行う予定です。そのあとはじゃけぇさんのUdemyをもう一つ受講します!

みなさんもよい開発ライフを~~~

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?