React を使ったフロントエンド開発に入って約2年経ちました
自己紹介
初めて記事を書いてみようと思いましたので、簡単な自己紹介から書いておきます。
エンジニアの素養とか過去とか雑多
私は理系ではありますが、情報系の学部を出たわけでもないし、なんだったら元ニートな怠惰な人間です。
そんな自分は、未経験 OK な Sier 会社に入って 3 か月 java の勉強 -> SQL をひたすら書く現場にアサインみたいな始まりでした。
その後、転職が挟まりながら java の開発現場 -> python, go などを使った AI を使った開発 -> データ分析っぽいこと -> React を使った開発現場という流れです。
何がやりたい経歴か見えてこないですがフロントエンド開発が今は楽しいです。
本編
React とか フロントエンド開発の経験
ほぼなかったです。
単語は知っていてチュートリアルを少しやったくらいでした。
TypeScript どころか JavaScript も怪しかったです。
なんで現場面談通ったんだろう（？）
JavaScript, TypeScript
ほぼ触ったことなかったけど、他言語を触っていれば困ることはないという経験から楽観的に思っていた。
実際、言語をとりあえず読んで使えるようになるだけなら困らなかった。
React を触って思ったこと
基本的な書き方や考え方は公式チュートリアル読めば困ることはなかったです。
（beta ですが新しいのがあるのでそちらオススメします here）
とはいえ、プルリク投げると何度か同じ指摘受けたりして「進研ゼミでやったところじゃん」みたな気持ちを何度か味わいました。
しんそこ辛かったこと
レンダー種類と動き
SSR, SPA, etc これらの動きがよくわからなかった。
違いや理屈をちゃんと理解してなかった頃、partial hydration を軽率に導入して動かなくなった機能があったり、うまく更新されない箇所が出てきたバグを生んでしまったことがある。（開発遅延した）
その時、原因がわからず相談できる相手もいないため、必死に業後に勉強した。
ブログなんかの説明を読むと意味は分かるけど、実感を持って理解できたといえるとこまではいかなかった。
実装イメージも思い浮かばないので沢山ググっていくつかのサンプルコード動かして書き換えて動きを見てというのを繰り返した。
（create-react-app でしか遊んだことない弊害）
最後はサンプルコードを自分で作った。
作ったコードは下記になります。（間違っているとことかアドバイスあれば欲しいです）
useEffect による無限ループ
useEffect が複数跨った処理だと何も考えず state 更新をすると無限ループすることがあった。
第 2 引数にある dependency が予期せず被ってしまい同じ処理が繰り返されてしまうのが原因だ。
初めて見た時はブラウザが固まってしまい焦りに焦った苦い経験があります。
webpack を筆頭にバンドラーの書き方や最適化
何をやっているかは様々な方がわかりやすい記事を書いてくださっています。
なので読めば分かった気になれるんですが、それどまりでした。
いまだに業務で見る複雑な設定は理解できていません。
こればっかりは今でも腰を据えて勉強しないと思いながらも、何をすれば理解が深まるのかも分からずじまいです。
現在
開発業務では特に不便なく楽しく React を書いています。
Next.js を使った開発なんかもあり良い経験を積んでいると思います。
最後に
ここまで読んでくださった方、ありがとうございます。
私自身、output というのをあまりやってこなかった人間です。
この記事をきっかけに output を増やして自分のスキル向上に繋がればと考えています。
あと、HTTP とかキャッシュとかフロントエンドの知識がなさすぎるので勉強していこうと思います。
オススメの書籍や記事があれば教えて欲しいです！
Discussion