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
390
ChatGPTで水平思考ゲームを行えるか試してみた
kawazu
0
320
新人プロダクトマネージャーの試行錯誤記録
kawazu
0
180
音楽仲間がいないのでバンドメンバーを実装した話
kawazu
0
100
JetsonNanoで自動作曲配信システムを作ってる途中の話
kawazu
0
730
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
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
580
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
190
複数サービスを支えるマルチテナント型Batch MLプラットフォーム
lycorptech_jp
PRO
1
570
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
サラリーマンの小遣いで作るtoCサービス - Cloudflare Workersでスケールする開発戦略
shinaps
2
460
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
120
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
210
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
180
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
350
エラーとアクセシビリティ
schktjm
1
1.3k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Bash Introduction
62gerente
615
210k
BBQ
matthewcrist
89
9.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
GitHub's CSS Performance
jonrohan
1032
460k
Context Engineering - Making Every Token Count
addyosmani
3
50
Designing for Performance
lara
610
69k
Optimizing for Happiness
mojombo
379
70k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
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とても良い • 有無を言わさずコンポーネント化することになるので、無理やりコンポーネント指向 を学習するのにも良いかも