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
480
Atomic Design とテストの○○な話
takfjp
2
1.8k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.6k
FARM スタックに触れてみる
takfjp
0
1.4k
React Testing Library の Query について整理してみた
takfjp
0
460
React.js 消えるライフサイクルメソッドについて
takfjp
0
120
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
3k
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
310
meguro.es.pdf
takfjp
0
120
Other Decks in Programming
See All in Programming
GPUを計算資源として使おう!
primenumber
1
200
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
600
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
12k
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
820
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
250
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
11k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
870
型で語るカタ
irof
0
550
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
5
660
VS Code Update for GitHub Copilot
74th
2
670
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A better future with KSS
kneath
238
17k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Docker and Python
trallard
45
3.5k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Building Applications with DynamoDB
mza
95
6.5k
4 Signs Your Business is Dying
shpigford
184
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!