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 で Stateless Functional Component の書き方を盛大に...
Search
takf
December 06, 2018
Programming
0
420
React で Stateless Functional Component の書き方を盛大に間違えていた話
takf
December 06, 2018
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
500
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.7k
FARM スタックに触れてみる
takfjp
0
1.5k
React Testing Library の Query について整理してみた
takfjp
0
490
React.js 消えるライフサイクルメソッドについて
takfjp
0
130
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
320
meguro.es.pdf
takfjp
0
130
Other Decks in Programming
See All in Programming
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
650
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
120
品質ワークショップをやってみた
nealle
0
640
三者三様 宣言的UI
kkagurazaka
0
250
マンガアプリViewerの大画面対応を考える
kk__777
0
330
Go言語はstack overflowの夢を見るか?
logica0419
0
620
Ktorで簡単AIアプリケーション
tsukakei
0
110
Cursorハンズオン実践!
eltociear
2
1.2k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
380
SODA - FACT BOOK(JP)
sodainc
1
8.9k
Six and a half ridiculous things to do with Quarkus
hollycummins
0
220
Foundation Modelsを実装日本語学習アプリを作ってみた!
hypebeans
0
130
Featured
See All Featured
Measuring & Analyzing Core Web Vitals
bluesmoon
9
640
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
890
Automating Front-end Workflow
addyosmani
1371
200k
Raft: Consensus for Rubyists
vanstee
140
7.2k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Embracing the Ebb and Flow
colly
88
4.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Typedesign – Prime Four
hannesfritz
42
2.8k
Transcript
React で Stateless Functional Component の書き方を盛大に間違えていた話 Takeru Furuichi Meguro.es 2018.12.06
発表者について 古市武尊 (Twitter:@takfjp) インフォ・ラウンジ株式会社 (横浜市都筑区) 所属 地方自治体向けのWEBアプリ開発・オープンデータ活用 の仕事をしています React /
Node.js / Firebase /最近は主にPHP(Laravel) MVCの設計に苦戦中 今年の目標:引っ越し
Stateless Functional Component (現: Functional Component) const SomethingComponent = (props)
=> ( <div>Hello, {props.name}</div> )
転職後初のプロジェクト フルスクラッチで業務用SPAを作っていた React、Redux についてドキュメントを読みながら 独学>実装>また独学…の繰り返し 今日は初心者時代に書いていた最悪なコードを共有して供養します
当時の私 コンポーネントは出来るだけ Stateless に保たないとだめなのかー ※色んなドキュメントを読んで誤った理解をしていた
こんなコンポーネントがでてきた ・5ヶ国語を入力するtextbox があります ・プルダウンで定型文を選択できます ・どれか一つで定型文を選ぶと5ヶ国語ぶん自動的に textboxに入力されます ・最後に「送信」ボタンで5つぶんメッセージ送信
None
当時の私 Textbox の見た目は同じだし、Stateless で実装するかあ
ステートレスでいい例 const SomethingComponent = (props) => ( <div> <p>こんにちは、{props.name}</p> <p>Hello,
{props.name}</p> <p>¡Hola!, {props.name}</p> <p>你好, {props.name}</p> <p>Здравствуйте, {props.name}</p> </div> ) //自らで入力インタフェースを持たない。プレゼンテーションにしか影響し ない。
このコンポーネントに必要なもの ・入力するテキスト ( State ) ・入力値をViewに反映するHandler ・プルダウンの選択を全てのTextboxに通知するHandler ・選択に応じて入力値を定型文に書き換えるHandler ・定型文 (State)
無視した結果 const MessageBox = ({props, handler, langCode}) => ( //…//
) ?
なにがダメか ・Statelessと言いつつ変更内容を送信するhandlerを親から受け継いでいる eventに結びつければ親から引っ張ってきた handlerは発動するけど・・・ ・書き方だけ Stateless にしようとしているだけ!!! -> 共通なのは見た目だけ。役割はそれぞれの Textbox
で独立している。
さらに最悪なコードを書いていた 自分で書いていて何も疑問に思わなかったのか・・・ const props = Object.assign({}, this.props, this.state) //ローカルステートとReduxのstore上のstateをごっちゃまぜにしている・・・ const
MessageBox = ({props, handler, langCode}) => ( //…// )
なにもわかっていなかった ・ReduxのStoreで管理するState、ローカルのStateの分け方 ・Redux Dev Toolがメモリリークしまくって落ちた
おとなしく Class Component で書き直しました。 ・入力内容はそれぞれのローカルステートで保つ ・親の Class Component から言語コードだけ注入を受け付ける (例)
<MessageBox langCode={“ja”} /> <MessageBox langCode={“en”} /> <MessageBox langCode={“ch”} /> <MessageBox langCode={“es”} /> <MessageBox langCode={“ru”} /> ・定型文が選ばれたら action を発行 -> 他の textbox に対応する文を自動挿入
おとなしく Class Component で書き直しました。 ・定型文、言語コードを Redux の Store に持つ (例)
templates : { langCode : [“ja”, ”en”], texts: [“おはよう”, “こんにちは”, “さようなら”], [“Good Morning”, “Hello”, “Bye”] } ・定型文が選ばれたら action を発行 -> 他の textbox に対応する文を自動挿入
Thank you!