20250315_kishikawa_Vue経験者がReactを学ぶうえで つまずいたポイント

2025/03/15 Reactひろしま#1 Vue経験者がReactを学ぶうえで つまずいたポイント DIGGLE株式会社 岸川 健太 1

アジェンダ ● ⾃⼰紹介 ● DIGGLEについて ● Reactを学ぶうえでつまずいたポイント ○ 状態の更新の仕⽅ ○ 関数コンポーネントの呼ばれるタイミング ○ CSS Moduleのスコープ ● まとめ 今⽇話すコード例は↓のリポジトリがベースです https://github.com/KKishikawa/practice-for-vue-and-react Copyright © diggle. All Rights Reserved. 2

• https://github.com/KKishikawa/practice-for-vue-and-react

⾃⼰紹介 岸川 健太 所属: DIGGLE株式会社 ● 東京都港区にある会社 勤務形態‧業務内容 ● 広島の⾃宅からリモート勤務 ● フロントエンド/バックエンドの開発を担当 ○ React, TypeScript, Ruby on Rails 趣味 ● トライアスロン、ゲーム Copyright © diggle. All Rights Reserved. 2024年上五島トライアスロン トランジションエリア内にて 3

事業について プロダクトについて ワンストップで予実管理業務をデジタル化できるプラットフォームDIGGLE 企業の意思決定の根幹、かつ、情報流通のボトルネックとなっている 予実管理を一気通貫で実施 目標を定める 経営の意思を示す 現状を把握する 予算策定 予実突合 新たな意思決定をする ズレの要因を探る 未来を予測する 経営情報を分析する 予実ギャップを特定し 予算に対しての進捗を確認する 分析 見込管理 将来の着地予測を集計する アクションを意思決定する Copyright © diggle. All Rights Reserved. 4

Vueの経験者がReactを学ぶうえで つまずいたポイント 5

はじめに 今回の構成 (構成を変えれば書き味もまた変わると思います) ● ● ● Node: 22.14.0 Vue: 3.5 ○ SFC (単⼀ファイルコンポーネント)記法 ■ Scoped CSS, TypeScript React: 19 ○ TypeScript ○ CSS Module 今回のサンプルコードは↓のリポジトリがベースです https://github.com/KKishikawa/practice-for-vue-and-react Copyright © diggle. All Rights Reserved. 6

• https://github.com/KKishikawa/practice-for-vue-and-react

はじめに React 構⽂がなんとなく似ている (Buttonコンポーネントの例) Vue Copyright © diggle. All Rights Reserved. 7

はじめに React 構⽂がなんとなく似ている (Buttonコンポーネントの例) Vue 一方が書けるともう一方もなんとなく書ける気がしてくる 😎 ※私個人の感想です Copyright © diggle. All Rights Reserved. 8

つまずきポイント1 状態の更新の仕⽅ 9

1. 状態の更新の仕⽅ VueはMutable(破壊的)に ReactはImmutable(⾮破壊的)に値を扱う TodoListを例に説明します (vue/src/components/TodoList) (react/src/components/TodoList) Copyright © diggle. All Rights Reserved. 10

1. 状態の更新の仕⽅ React Vue pushで追加, spliceで削除 ※⼦コンポーネントで直接オブジェク トのプロパティを更新するので handleChangeは無し Copyright © diggle. All Rights Reserved. 新しい配列を新たに作る。 (pushやオブジェクト⾃体の書き換え をすると再描画がうまくいかなくな る) 11

つまずきポイント2 関数コンポーネントの呼ばれるタイミング 12

2. 関数コンポーネントの呼ばれるタイミング なぜか画⾯更新されなくなる React 画⾯上に ● 常に現在時刻 ● マウスカーソルの位置 を表⽰するアプリ カーソルの位置: useMouse 現在時刻: useDisplayedTime Copyright © diggle. All Rights Reserved. このコードでは マウスを動かしている間、 時刻表⽰が更新されない.... 13

2. 関数コンポーネントの呼ばれるタイミング React useDisplayedTimeは、formatterが更新されると 状態を更新するintervalがリセットされ、次の500msまで待つ必要がある →でもformatterは1種類しか記述してないはず....🤔 Copyright © diggle. All Rights Reserved. 14

2. 関数コンポーネントの呼ばれるタイミング コンポーネントの処理がいつ呼ばれるか React Vue ● ● VueのSetup: ○ コンポーネントの初期化時に⼀度だけ Reactの関数コンポーネント ○ 描画の度に呼び出される Copyright © diggle. All Rights Reserved. 15

2. 関数コンポーネントの呼ばれるタイミング 初期化と再描画の例 Vue ● ● ● React countの2倍の値をもつdoubleという変数 Vueではcomputedを使って、doubleがリアクティブであることを表す Reactではなにもつけなくてもcountの2倍の値で描画される ○ Reactの関数コンポーネントが描画の度に呼び出されるから Copyright © diggle. All Rights Reserved. 16

2. 関数コンポーネントの呼ばれるタイミング 関数コンポーネントが描画の度に呼び出されるということは.... React ⾚枠のアロー関数の インスタンスも 描画の度に再作成される ※アロー関数の中⾝が 実⾏されるわけではない Copyright © diggle. All Rights Reserved. useEffectのdepsが 変更された判定 clearIntervalと 新しいsetIntervalが 呼び出される 17

2. 関数コンポーネントの呼ばれるタイミング useCallbackを使って、 新しい関数インスタンスが渡されることを抑制する React ● 状態を持つコンポーネント⾃体を分けるというアプローチでも良さそう Copyright © diggle. All Rights Reserved. 18

つまずきポイント3 CSS Moduleのスコープ 19

3. CSS Moduleのスコープ コンポーネントからスタイルが漏れ出てしまうことがある データ構造 ○ 名前 ■ 教科: 点数 ● スタイル ○ ⼈の情報の間に罫線を引く ○ 背景⾊をストライプにする というコンポーネントを考える ● Copyright © diggle. All Rights Reserved. 20

3. CSS Moduleのスコープ Vueだと要素セレクタを多⽤しても意図通りのレイアウトになる Vue Copyright © diggle. All Rights Reserved. 21

3. CSS Moduleのスコープ React (CSS Module) では同じように書けない 😭 → 親コンポーネントに書いた罫線‧背景⾊のスタイルが ⼦コンポーネントにも適⽤されてしまう ※リポジトリでは↓のディレクトリのコードです ● List ○ react/src/components/List/WrongList.tsx ○ react/src/components/List/WrongList.module.css ● ListPage ○ react/src/pages/WrongListPage/index.tsx ○ react/src/pages/WrongListPage/WrongListPage.module.css Copyright © diggle. All Rights Reserved. 22

3. CSS Moduleのスコープ なぜか (Vueの場合) ● Scoped CSS (Vue) だと ○ コンポーネントに含まれるHTML要素にデータ属性が付与される ■ 同⼀コンポーネントでのみ同じデータ属性 ○ CSSセレクタの末端にデータ属性が付与される → classセレクタ以外でもスコープが漏れにくい Copyright © diggle. All Rights Reserved. 23

3. CSS Moduleのスコープ なぜか (Reactの場合) 変換前後のcss名のマッピング (WrongList.module.css.js) セレクタが変換された CSS CSS Module (React) だと ○ Classセレクタしか変換されない ○ CSS Moduleのimport時、⼀緒に扱っているのは、 実は変換前後のマッピングオブジェクト → 安易にクラスセレクタ以外を使うとコンポーネント外に漏れてしまう.... ● Copyright © diggle. All Rights Reserved. 24

3. CSS Moduleのスコープ クラスセレクタに書き直す Copyright © diggle. All Rights Reserved. 25

まとめ 26

まとめ ● ● Vueをしばらく触っていた⼈がReactを学び始めたときにつまづいた点 を紹介した ○ 状態の更新の仕⽅ ○ 関数コンポーネントの呼ばれるタイミング ○ CSS Moduleのスコープ なんとなく似ているは学びの⼊⼝として良い⼀⽅、違いは意識する必 要がある Copyright © diggle. All Rights Reserved. 27

Copyright © diggle. All Rights Reserved. 28