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
370
React で Stateless Functional Component の書き方を盛大に間違えていた話
takf
December 06, 2018
Tweet
Share
More Decks by takf
See All by takf
Denoに入門していきなりAleph.jsを触ってみた
takfjp
0
410
Atomic Design とテストの○○な話
takfjp
2
1.6k
Node.jsのアップグレードで気をつけたこと
takfjp
1
2.3k
FARM スタックに触れてみる
takfjp
0
1k
React Testing Library の Query について整理してみた
takfjp
0
380
React.js 消えるライフサイクルメソッドについて
takfjp
0
110
Laravel 初めての業務で遭遇したハマりポイント×2
takfjp
2
2.9k
職歴1年目のフロントエンドエンジニアが インプットとアウトプットに苦しんだ話
takfjp
0
280
meguro.es.pdf
takfjp
0
110
Other Decks in Programming
See All in Programming
Ethereum_.pdf
nekomatu
0
370
Tuning GraphQL on Rails
pyama86
2
1.2k
リアーキテクチャxDDD 1年間の取り組みと進化
hsawaji
1
180
Identifying User Idenity
moro
6
9.4k
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
240
Boost Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
1.5k
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
160
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
300
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
34k
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.7k
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
Featured
See All Featured
What's new in Ruby 2.0
geeforr
343
31k
Writing Fast Ruby
sferik
627
61k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
What's in a price? How to price your products and services
michaelherold
243
12k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
The Cult of Friendly URLs
andyhume
78
6k
Statistics for Hackers
jakevdp
796
220k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
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!