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
エラーって何種類あるの?
kajitack
5
290
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
16
3.1k
ASP.NETアプリケーションのモダナイズ インフラ編
tomokusaba
1
410
Elixir で IoT 開発、 Nerves なら簡単にできる!?
pojiro
1
150
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
WindowInsetsだってテストしたい
ryunen344
1
190
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
310
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
660
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
120
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
470
Deep Dive into ~/.claude/projects
hiragram
7
1.2k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
A Tale of Four Properties
chriscoyier
160
23k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Language of Interfaces
destraynor
158
25k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Optimizing for Happiness
mojombo
379
70k
Raft: Consensus for Rubyists
vanstee
140
7k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
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!