バックエンドエンジニアが初めて Reactを触って感じたこと 河津正和

河津正和 バックエンドエンジニア 自社サービス開発をしつつ、本業以外で フリーランス的な仕事なども Twitter: kawazu255_ 自己紹介

フロントエンドフレームワークを使い始めた経緯 ● 10年ほどバックエンドエンジニア ● 新規事業立ち上げ部署でPoC、アルファ版のプロダクトを立ち上げる ● 初めてVueを触る、そしてNuxt.jsも ● 副業案件でVueを2年ほど触ったのち、とあるお仕事でReactを使用することに

https://www.youtube.com/watch?v=9cxMxEGgH8o この辺りの話はTechDLT Vol.4 Nuxt.jsの回でお話させていただいたことがあります

前に話したVueの好きなところ ● ぱっと見でわかりやすい ○ HTML、JS、CSSの記載箇所がコンポーネント内できっちり分かれているところがわかりやすかった ■ JS(JSX)内にHTMLが書かれているのが違和感 ○ すぐに使うことができた ■ よってすぐプロトタイプできた

そういったVueの良いと思ったところと比較し Reactの良さについて書いていきます。

Reactの好きなところ React hookでライフサイクルに悩まされない

No content

フロントエンド初心者がつまづくライフサイクル ● 予期しないタイミングでメソッドが呼ばれる ○ SSRではcreatedが2回呼ばれるなど ● createdでは動かないメソッドがmountedで動く ○ createdとmountedの違いは下記のような記事を最近読んだりしました ○ https://qiita.com/yutoun/items/420c7a4873c69f7dbc3f ○ ざっくり、DOMに反映させたいものは mountedに書こう

React hookだと ● useEffectで指定した変数が変更されるたびに呼び出される ○ もしくはページレンダリング時に必ず呼び出される ● コンポーネントごとにstateを楽に用意できる(useState) ○ Reduxとも併用

No content

VueはEasy ReactはSimple とはよく言ったものだなという感想・・・

Redux Toolkitもシンプル ● 使用しない場合は、reducer(状態の変更)、selector(状態の読み取り)、Action(トリ ガー)それぞれ別途ファイルに記載する必要があった ● Redux Toolkitを使えば1ファイルのみで良い Redux Toolkit

感想 ● Simpleに構築できるReactの良さにようやく気づけた ● React hookとても良い ● 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも