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
410
React で Stateless Functional Component の書き方を盛大に間違えていた話
takf
December 06, 2018
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
490
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.4k
React Testing Library の Query について整理してみた
takfjp
0
470
React.js 消えるライフサイクルメソッドについて
takfjp
0
130
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3.1k
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
310
meguro.es.pdf
takfjp
0
120
Other Decks in Programming
See All in Programming
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
920
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
380
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
7.3k
書き捨てではなく継続開発可能なコードをAIコーディングエージェントで書くために意識していること
shuyakinjo
0
200
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
670
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.7k
新世界の理解
koriym
0
130
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
330
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
260
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
7
1.7k
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Site-Speed That Sticks
csswizardry
10
750
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Faster Mobile Websites
deanohume
308
31k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
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!