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
120
バックエンドエンジニアが初めてReactを触って感じたこと
こちらのLTイベントで登壇した内容になります。
https://techdmeetup.connpass.com/event/272796/
Kawazu
April 13, 2023
Tweet
Share
More Decks by Kawazu
See All by Kawazu
個人的に考える要件定義でやる一連の流れ
kawazu
0
250
ChatGPTで水平思考ゲームを行えるか試してみた
kawazu
0
210
新人プロダクトマネージャーの試行錯誤記録
kawazu
0
83
音楽仲間がいないのでバンドメンバーを実装した話
kawazu
0
98
JetsonNanoで自動作曲配信システムを作ってる途中の話
kawazu
0
620
bert-tokenizerノードを触ってみた
kawazu
0
250
BERTで文章関連度算出して戯れてみる
kawazu
0
120
Node-REDとAutomatorでプライバシーマスク作成を自動化する
kawazu
0
140
AWS DeepComposerで作業用BGMを作った話
kawazu
0
140
Other Decks in Technology
See All in Technology
オーナーシップを持つ領域を明確にする
konifar
13
3.2k
Janus
bkuhlmann
1
490
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
110
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
320
アクセス制御にまつわる改善 / Improving access control
itkq
0
540
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
140
サーバー間 GraphQL と webmock-graphql の話 / server-to-server graphql and webmock-graphql
qsona
2
190
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.6k
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
140
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
ryysud
0
220
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
1
210
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
290
Featured
See All Featured
The Language of Interfaces
destraynor
151
23k
Documentation Writing (for coders)
carmenintech
60
3.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Teambox: Starting and Learning
jrom
128
8.4k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
Navigating Team Friction
lara
178
13k
A Tale of Four Properties
chriscoyier
151
22k
Faster Mobile Websites
deanohume
299
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
4 Signs Your Business is Dying
shpigford
175
21k
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とても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも