Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
バックエンドエンジニアが初めてReactを触って感じたこと
Search
Kawazu
April 13, 2023
Technology
0
260
バックエンドエンジニアが初めてReactを触って感じたこと
こちらのLTイベントで登壇した内容になります。
https://techdmeetup.connpass.com/event/272796/
Kawazu
April 13, 2023
Tweet
Share
More Decks by Kawazu
See All by Kawazu
個人的に考える要件定義でやる一連の流れ
kawazu
0
390
ChatGPTで水平思考ゲームを行えるか試してみた
kawazu
0
320
新人プロダクトマネージャーの試行錯誤記録
kawazu
0
180
音楽仲間がいないのでバンドメンバーを実装した話
kawazu
0
100
JetsonNanoで自動作曲配信システムを作ってる途中の話
kawazu
0
730
bert-tokenizerノードを触ってみた
kawazu
0
310
BERTで文章関連度算出して戯れてみる
kawazu
0
150
Node-REDとAutomatorでプライバシーマスク作成を自動化する
kawazu
0
170
AWS DeepComposerで作業用BGMを作った話
kawazu
0
170
Other Decks in Technology
See All in Technology
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
110
生成AIでセキュリティ運用を効率化する話
sakaitakeshi
0
430
【初心者向け】ローカルLLMの色々な動かし方まとめ
aratako
7
3.4k
Rustから学ぶ 非同期処理の仕組み
skanehira
1
130
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.1k
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
Obsidian応用活用術
onikun94
1
440
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
150
Vault を基盤として整備し、 みんなに使ってもらえるようになるまで
takahiko
1
120
共有と分離 - Compose Multiplatform "本番導入" の設計指針
error96num
1
310
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
360
LLMを搭載したプロダクトの品質保証の模索と学び
qa
0
1k
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Bash Introduction
62gerente
615
210k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Code Reviewing Like a Champion
maltzj
525
40k
Done Done
chrislema
185
16k
Agile that works and the tools we love
rasmusluckow
330
21k
The Language of Interfaces
destraynor
161
25k
GraphQLとの向き合い方2022年版
quramy
49
14k
Transcript
バックエンドエンジニアが初めて 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でライフサイクルに悩まされない
None
フロントエンド初心者がつまづくライフサイクル • 予期しないタイミングでメソッドが呼ばれる ◦ SSRではcreatedが2回呼ばれるなど • createdでは動かないメソッドがmountedで動く ◦ createdとmountedの違いは下記のような記事を最近読んだりしました ◦
https://qiita.com/yutoun/items/420c7a4873c69f7dbc3f ◦ ざっくり、DOMに反映させたいものは mountedに書こう
React hookだと • useEffectで指定した変数が変更されるたびに呼び出される ◦ もしくはページレンダリング時に必ず呼び出される • コンポーネントごとにstateを楽に用意できる(useState) ◦ Reduxとも併用
None
VueはEasy ReactはSimple とはよく言ったものだなという感想・・・
Redux Toolkitもシンプル • 使用しない場合は、reducer(状態の変更)、selector(状態の読み取り)、Action(トリ ガー)それぞれ別途ファイルに記載する必要があった • Redux Toolkitを使えば1ファイルのみで良い Redux Toolkit
感想 • Simpleに構築できるReactの良さにようやく気づけた • React hookとても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも