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
180
バックエンドエンジニアが初めてReactを触って感じたこと
こちらのLTイベントで登壇した内容になります。
https://techdmeetup.connpass.com/event/272796/
Kawazu
April 13, 2023
Tweet
Share
More Decks by Kawazu
See All by Kawazu
個人的に考える要件定義でやる一連の流れ
kawazu
0
330
ChatGPTで水平思考ゲームを行えるか試してみた
kawazu
0
270
新人プロダクトマネージャーの試行錯誤記録
kawazu
0
110
音楽仲間がいないのでバンドメンバーを実装した話
kawazu
0
100
JetsonNanoで自動作曲配信システムを作ってる途中の話
kawazu
0
660
bert-tokenizerノードを触ってみた
kawazu
0
270
BERTで文章関連度算出して戯れてみる
kawazu
0
140
Node-REDとAutomatorでプライバシーマスク作成を自動化する
kawazu
0
150
AWS DeepComposerで作業用BGMを作った話
kawazu
0
150
Other Decks in Technology
See All in Technology
Fargateを使った研修の話
takesection
0
110
使えそうで使われないCloudHSM
maikamibayashi
0
170
2024-10-30-reInventStandby_StudyGroup_Intro
shinichirokawano
1
630
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
240
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
340
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.4k
Product Engineer Night #6プロダクトエンジニアを育む仕組み・施策
hacomono
PRO
1
470
フルカイテン株式会社 採用資料
fullkaiten
0
36k
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
580
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
460
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
51
13k
Fireside Chat
paigeccino
32
3k
Making Projects Easy
brettharned
115
5.9k
Automating Front-end Workflow
addyosmani
1365
200k
Into the Great Unknown - MozCon
thekraken
31
1.5k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
27
4.2k
How to Ace a Technical Interview
jacobian
275
23k
Designing for humans not robots
tammielis
249
25k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Building Applications with DynamoDB
mza
90
6.1k
Git: the NoSQL Database
bkeepers
PRO
425
64k
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とても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも