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
390
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
【Kaigi on Rails 事後勉強会LT】MeはどうしてGirlsに? 私とRubyを繋いだRail(s)
joyfrommasara
0
200
Findy Team+のSOC2取得までの道のり
rvirus0817
0
500
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
miyatakoji
1
160
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
180
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
200
SREとソフトウェア開発者の合同チームはどのようにS3のコストを削減したか?
muziyoshiz
1
180
「使い方教えて」「事例教えて」じゃもう遅い! Microsoft 365 Copilot を触り倒そう!
taichinakamura
0
200
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
4
420
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
450
Geospatialの世界最前線を探る [2025年版]
dayjournal
0
180
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
多様な事業ドメインのクリエイターへ 価値を届けるための営みについて
massyuu
1
490
Featured
See All Featured
Designing for Performance
lara
610
69k
A designer walks into a library…
pauljervisheath
209
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Optimizing for Happiness
mojombo
379
70k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fireside Chat
paigeccino
40
3.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
2.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Automating Front-end Workflow
addyosmani
1371
200k
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とても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも