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
270
バックエンドエンジニアが初めてReactを触って感じたこと
こちらのLTイベントで登壇した内容になります。
https://techdmeetup.connpass.com/event/272796/
Kawazu
April 13, 2023
Tweet
Share
More Decks by Kawazu
See All by Kawazu
個人的に考える要件定義でやる一連の流れ
kawazu
0
400
ChatGPTで水平思考ゲームを行えるか試してみた
kawazu
0
320
新人プロダクトマネージャーの試行錯誤記録
kawazu
0
180
音楽仲間がいないのでバンドメンバーを実装した話
kawazu
0
100
JetsonNanoで自動作曲配信システムを作ってる途中の話
kawazu
0
740
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
AgentCon Accra: Ctrl + Alt + Assist: AI Agents Edition
bethany
0
110
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
今この時代に技術とどう向き合うべきか
gree_tech
PRO
2
2k
ガバメントクラウドの概要と自治体事例(名古屋市)
techniczna
3
240
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
230
Data Hubグループ 紹介資料
sansan33
PRO
0
2.2k
アイテムレビュー機能導入からの学びと改善
zozotech
PRO
0
180
Digitization部 紹介資料
sansan33
PRO
1
5.6k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.7k
LLMアプリの地上戦開発計画と運用実践 / 2025.10.15 GPU UNITE 2025
smiyawaki0820
1
590
PHPからはじめるコンピュータアーキテクチャ / From Scripts to Silicon: A Journey Through the Layers of Computing Hiroshima 2025 Edition
tomzoh
0
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
It's Worth the Effort
3n
187
28k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Fireside Chat
paigeccino
40
3.7k
Code Reviewing Like a Champion
maltzj
526
40k
BBQ
matthewcrist
89
9.8k
Faster Mobile Websites
deanohume
310
31k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
The Language of Interfaces
destraynor
162
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Rails Girls Zürich Keynote
gr2m
95
14k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
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とても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも