Reactでcomponent化
してシンプルになった話
有限会社バーチャルテクノロジー
森下大貴
DatePicker:
フォームをクリックするとカレンダーが表示され
日付を選択すると、選択した日付がフォームに入力され
るコンポーネント
11 29プレゼン資料
DatePickerの場合
変数を用意して 変更用の関数を用意
フォームの書き方
UnControlled Controlled
• Reactの仕様
• 初期値を設定出来ない
• 初期値を設定出来る
• 変更用の処理を用意しなけれ
ばならない
UnControlled
Controlled
Before After
名前と変数を渡すだけ
今までのDatePickerは
ここで呼んでいる。
CommonDatePicker
コンポーネントの中で変更
処理を完結させている
(コンポーネント内で隠蔽)
ラジオボタン(CommonRadioBtn)
Before After
コンポーネント化したもの
• フィルターボックス(CommonFilterBox)
• セレクトボックス(CommonSelectBox)
• テキストボックス(CommonInputText)
• テーブル(CommonTable)
• ラジオボタン(CommonRadioBtn)
• カレンダー(CommonDatePicker)
コンポーネント化によるメリット
• 変数や変更処理を行う関数などを1つのコンポーネントにまとめ
ることで再利用が可能になる。
• 呼び出し引数が少なくなり、変更に伴う修正箇所が最小限で済む。
• コードがシンプルになったために可読性が上がる。
コンポーネント化を意識したことで、コーディングが楽になった

More Related Content

PDF
Vtecx solution
PDF
PDF
Real techlt20180829
PDF
Bpstudy20180725
PDF
React vtecx20171129
PDF
20171025 date picker説明資料
PDF
React vtecx20171025
PDF
Web study20171007
Vtecx solution
Real techlt20180829
Bpstudy20180725
React vtecx20171129
20171025 date picker説明資料
React vtecx20171025
Web study20171007

More from Shinichiro Takezaki (13)

PPTX
React vtecx20170920
PDF
React vtecx20170822
PDF
Builderscon Tokyo 2017
PDF
Enterpriseapi20160210
PDF
Vtecx20151216 2
PDF
Vtecx20151216
PDF
Vtecxlt20151201
PDF
Angularreflex20141210
PPTX
No nosql20130424
PDF
BPStudy20121221
PDF
Gaeja20121130
PDF
Reflex works20120818 1
PPT
Groovyコンファレンス
React vtecx20170920
React vtecx20170822
Builderscon Tokyo 2017
Enterpriseapi20160210
Vtecx20151216 2
Vtecx20151216
Vtecxlt20151201
Angularreflex20141210
No nosql20130424
BPStudy20121221
Gaeja20121130
Reflex works20120818 1
Groovyコンファレンス
Ad

11 29プレゼン資料