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
380
ChatGPTで水平思考ゲームを行えるか試してみた
kawazu
0
310
新人プロダクトマネージャーの試行錯誤記録
kawazu
0
170
音楽仲間がいないのでバンドメンバーを実装した話
kawazu
0
100
JetsonNanoで自動作曲配信システムを作ってる途中の話
kawazu
0
720
bert-tokenizerノードを触ってみた
kawazu
0
310
BERTで文章関連度算出して戯れてみる
kawazu
0
150
Node-REDとAutomatorでプライバシーマスク作成を自動化する
kawazu
0
170
AWS DeepComposerで作業用BGMを作った話
kawazu
0
160
Other Decks in Technology
See All in Technology
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
ゼロからはじめる採用広報
yutadayo
4
1k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
830
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
990
アクセスピークを制するオートスケール再設計: 障害を乗り越えKEDAで実現したリソース管理の最適化
myamashii
1
330
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
340
SRE不在の開発チームが障害対応と 向き合った100日間 / 100 days dealing with issues without SREs
shin1988
2
1.5k
対話型音声AIアプリケーションの信頼性向上の取り組み
ivry_presentationmaterials
2
690
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
220
freeeのアクセシビリティの現在地 / freee's Current Position on Accessibility
ymrl
2
280
Operating Operator
shhnjk
1
650
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Code Reviewing Like a Champion
maltzj
524
40k
Speed Design
sergeychernyshev
32
1k
4 Signs Your Business is Dying
shpigford
184
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Gamification - CAS2011
davidbonilla
81
5.4k
Being A Developer After 40
akosma
90
590k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Writing Fast Ruby
sferik
628
62k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
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とても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも