「Reactを使って良かったこと」 を考えていく中で気づいたこと / insights-from-reflecting-on-react

Transcript

1. 「Reactを使って良かったこと」 を考えていく中で気づいたこと 2026年2月12日 安居 健道
2. 2 経歴 プロダクト開発チームにて、バックエンド、フロントエンド問わず開 発に携わる。野球とドラマと将棋が好き 自己紹介 安居 健道 やすい けんどう 2019.01 SES企業にエンジニア未経験転職 2021.01 コドモンに開発エンジニアとして入社
3. 3 Mission
4. 4 すべての先生に 子どもと向き合う 時間と心のゆとりを こんなプロダクトを開発しています メインプロダクトは、保育・教育施設向けWebアプリケーション。 保護者と施設のやり取りを支えるモバイルアプリケーションや、施設職員向けモバイル版 アプリケーション、外部サービスと連携するAPIなども開発しています。
6. 6 「Reactを使って良かったこと」を考えていく中 で気づいたこと
7. 7 Reactの選定前に理由をしっかり考えてから選定 された方いますか
8. 8 TypeScriptとの相性は良いって聞く
9. 9 私は覚えながら良いところを探すことが多かった
10. 10 今日話すこと • 状態管理においてReactとVue2を交互に触りながら考えたこと。 • これはReactで良かったと思った点について
11. 11 CONFIDENTIAL - © 2022 CoDMON Inc. 11 React選定時点のフロントエンド経験 • 元々はVue2のみの経験 (少しだけComposition API) • 新規サービス立ち上げでReactを選定 • 同時期にVue2のコードも並行で触っていた 　
12. 12 CONFIDENTIAL - © 2022 CoDMON Inc. 12 Reactを触ってみての最初の感触 「状態管理がミスしにくい」 • 　値が意図しないものに変わることがない • 　更新したい状態は確実に変わってくれる
13. 13 CONFIDENTIAL - © 2022 CoDMON Inc. 13 なぜReactは初心者でも状態管理でミスしにくいのか • useStateがあり、set関数が実装されている 　const [state, setState] = useState(initialState) • 標準レベル（Docの1ページ目レベル）でこういった関数が用意されてい るので、こっちを通りやすい分ミスしにくい reactでも　state = “new value” と書けてしまうことは書けてしまう。 　
14. 14 CONFIDENTIAL - © 2022 CoDMON Inc. 14 Vue2初心者のころ export default { data() { return { items: ['a', 'b', 'c'] } }, methods: { updateItem() { this.items[0] = 'new value'　// ❌検知されない } } }
15. 15 CONFIDENTIAL - © 2022 CoDMON Inc. 15 Vue2 x Vuexの出会い
16. 16 Vuexに忠実に沿った状態管理、データフローを徹 底るすと、ハマらなかったし、想定外のバグもな かった
17. 17 違いを挙げるとするならば Reactは初心者がはまりにくい（少しだけ）
18. 18 どんな言語、FWを使うかよりも 状態管理の設計をしっかりしておくこと。 いかに実装者のブレを起こさせないか。 フロントエンドは状態管理オプションが多いので、これが難しい
19. 19 CONFIDENTIAL - © 2022 CoDMON Inc. 19 Reactで良かった点 • TypeSprictとの相性が良い ジェネリックコンポーネントが書ける。 • 共通化と抽象化の柔軟性の高いコンポーネント合成ができる。 render propsパターンが良い感じ かつ型安全
20. 20 CONFIDENTIAL - © 2022 CoDMON Inc. 20 ケース１：ジェネリックコンポーネント~select box~ type SelectProps<T extends string> = { options: T[] value: T onChange: (value: T) => void } const Select = <T extends string>({ options, value, onChange }: SelectProps<T>) => { return ( <select value={value} onChange={(e) => onChange(e.target.value as T)}> {options.map((option) => ( <option key={option} value={option}>{option}</option> ))} </select> ) } Tの型で縛っている。
21. 21 CONFIDENTIAL - © 2022 CoDMON Inc. 21 ケース１：ジェネリックコンポーネント~select box 使う側 type Fruit = 'apple' | 'banana' | 'orange' const [fruit, setFruit] = useState<Fruit>('apple') <Select<Fruit> options={['apple', 'banana', 'orange']} value={fruit} onChange={setFruit} /> setFruit('peach') setFruitの方は(fruit: Fruit) => voidの必要がある peachはFruit型に属していないのでコンパイルエラー
22. 22 CONFIDENTIAL - © 2022 CoDMON Inc. 22 ケース2：Render Props ~共通フォーム - 共通化用のフォームコンポーネントを作成する時 - 入力状態とバリデーションは共通化 - Submitボタンは抽象化 - UIとSubmit処理は使う側で決める
23. 23 CONFIDENTIAL - © 2022 CoDMON Inc. 23 ケース2：Render Props ~共通フォーム type Props = { submitButton: (props: { onSubmit: (callback: (data: { name: string; hobby: string }) => void) => void }) => React.ReactNode } const ProfileForm = ({ submitButton }: Props) => { const [name, setName] = useState('') const [hobby, setHobby] = useState('') const handleFormSubmit = (callback: (data: { name: string; hobby: string }) => void) => { if (!validate()) return // バリデーション発火 callback({ name, hobby }) } return ( <div> <input value={name} onChange={e => setName(e.target.value)} placeholder="名前" /> <input value={hobby} onChange={e => setHobby(e.target.value)} placeholder="趣味" /> {submitButton({ onSubmit: handleFormSubmit })} </div> ) } 具体的に共通化している： - フォームの入力状態 - バリデーションロジックと発火タイミ ング - パーツの位置関係 抽象定義しておき、使う側で注入する： - submitのUI - バリデーション後の処理 submitButtonはReact.ReactNodeで受 け取るのではなく 「() => React.ReactNode」レンダーに する。
24. 24 CONFIDENTIAL - © 2022 CoDMON Inc. 24 ケース2：Render Props ~ 使う側1 <ProfileForm submitButton={({ onSubmit }) => ( <button onClick={() => onSubmit((data) => { saveToServer(data) showToast('保存しました') })}> 送信 </button> )} /> ボタンのテキストは「送信」 バリデーションが通った後は サーバーに保存しトーストを表示 dataは { name: string; hobby: string }型
25. 25 CONFIDENTIAL - © 2022 CoDMON Inc. 25 ケース2：Render Props ~ 使う側2 <ProfileForm submitButton={({ onSubmit }) => ( <button onClick={() => onSubmit((data) => { navigate('/confirm', { state: data }) })}> 次へ </button> )} /> ボタンのテキストは「次へ」 バリデーションが通った後は 確認画面へ遷移
26. まとめ CoDMON P26 • 状態管理においてはインフラストラクチャはなんでも良い ◦ 言語、FWツールなんでも良い ◦ 設計やルールの整備が重要 ◦ Reactは初心者が若干ハマりにくいかなレベル • TypeScriptをの親和性は良い ◦ ジェネリックコンポーネントがサクッと書ける ◦ コンポーネント設計の柔軟性と型安全を両立できる
27. CoDMON P27 コドモン採用ページ コドモンでは、ともに課題を紐解き、一歩一歩前に進んでいく 仲間を募集しています！ 開発チームX