『React Docs BETA (Learn)』を読む会
README
読むもの
目的
Reactへの理解を深める。
使ってはいるが、ドキュメントを一通り読んだことがなかったので読み進めていく。
どうせなら新しいものを読みたい!
進め方
参加者が交代で読む。
引っかかった点を話し合ったりコードを書いたりして完全理解してから進む。
どこまで読む等は決めずに時間内(1時間)で読めるところまでを読む。
英語の訳はDeepLやGoogleに頑張ってもらう。
2022-10-10(月) 20:00-21:00
実績
- 最初から
-
Installation
読了
次はどこから?
-
Quick Start
から
MEMO
jsx
を使わないReactがここにはあった。
create-react-app
を使わないReactが…
色々よしなにやってくれるツールたちに対する理解が深まった。
Babel,tsc,swc,esbuild etc...
React Developer Toolsはやはり必要。
2022-10-17(月) 20:00-21:00
実績
-
Quick Start
から -
Thinking in React
Step 3
まで
次はどこから?
-
Thinking in React
Step 4: Identify where your state should live
から
MEMO
基本的なReactコンポーネント・アプリケーションの作り方についての読み物。
コンポーネントの作成と画面からのコンポーネント分割等の設計の基本を解説している。
解説自体は基本的だが、参考リンクや文面が知らなかった考え方を教えてくれていたり…
2022-10-31(月) 20:00-21:00
実績
-
Thinking in React
Step 4: Identify where your state should live
から -
Describing the UI
まで
次はどこから?
-
Your First Component
から
MEMO
共通の親とは
該当の子を見つけて、樹形図を根の方に遡って、ぶつかったところにステートをもたせる。
できるだけ狭いスコープに収めるのが良し。
大きすぎる場合はglobalなのかもしれない。
フックという命名は天才
レンダリングに関連付ける・引っ掛けて実行するというのが分かりやすい…かもしれない。
少なくともだいぶ馴染んだ。
双方向バインディングの良し悪し
双方向バインディング、vueとangularでは普通にある。
shorthandとしてeasyに使えるが、simpleではないよねという感覚。
内部を知っていて使うなら良いのだが…
そのへん意識するならReact-wayでも良いよねという話。
mapでloopした時のReactに渡すKeyの話
Keyの必要性とloopのindexをなぜ使うべきではないか
ちゃんと一意なものを使いましょう。
2022-11-07(月) 20:00-21:00
実績
-
Your First Component
から -
Importing and Exporting Components - Exporting and importing a component
まで
次はどこから?
-
Importing and Exporting Components - Exporting and importing multiple components from the same file
から
MEMO
React+JSXの基礎
細かい仕様やこうした方がReactらしいといった紹介
Try out some challengesが良い
周辺ライブラリに関連する説明もある
総じてチュートリアル的で読みやすい
2022-11-14(月) 20:00-21:00
実績
-
Importing and Exporting Components - Exporting and importing multiple components from the same file
から Writing Markup with JSX
-
JavaScript in JSX with Curly Braces
まで
次はどこから?
-
Passing Props to a Component
から
MEMO
aria-* がsnake-caseである理由
歴史的経緯の推測が記載されていた
markupとは
構造を記述するもの…らしい
雑談
playwrightでのReactコンポーネントのテスト
react-testing-libraryのjsdomとplaywrightの実際のブラウザdomのどちらを使うかという話
最終的にplaywrightの方が良さそうだがExperimentalなのと機能的に足りてない部分もあって意見が分かれそう。
mabl
なんでも出来てAutifyより良いらしい。
Astro
Islands ArchitectureとかMPA/SPAとかの話
imgurはsuffixでサムネイルが作れる
s,b,t,m
の接尾語で行ける模様。
🔥
2022-11-28(月) 20:00-21:00
実績
-
Passing Props to a Component
から
次はどこから?
-
Conditional Rendering
から
MEMO
childrenの型について
要素を1つしか許可しないのにchlidではなくchildrenなのか…という話。
Fragmentが配列を許可するので実質複数の子が持てる。
childrenではなくslotという概念
その他
テンプレートリテラルの型チェックとESLintルールの話
jsのnull/undefinedチェック
undefined == null
true
undefined === null
false
RSCやりたい
2022-12-05(月) 20:00-21:00
実績
-
Conditional Rendering
から -
Rendering Lists
まで
次はどこから?
-
Keeping Components Pure
から
MEMO
flatMapが使いやすい話
TypeScriptの型推論において、filterの型推論は使いづらい。
雑談
&&
は論理積演算子と読む
letはできるだけ使わずに即時関数を使う派
https://beta.reactjs.org/apis/react/Fragment Fragmentは短縮構文しか使ったことがない
LoopのKeyの話
2022-12-12(月) 20:00-21:00
実績
-
Keeping Components Pure
から
次はどこから?
-
Keeping Components Pure
から
MEMO
英語を機械翻訳を使わずに読んで見る回!
2022-12-18(月) 20:00-21:00
実績
-
Keeping Components Pure
から
次はどこから?
-
Adding Interactivity
から
MEMO
英語を機械翻訳を使わずに読んで見る回その2!
終わらないので途中から翻訳し始めた…
React18 + Server Component + emotion
css-in-jsが辛そうという話。
TBD
2023-01-09(月) 20:00-21:00
実績
-
Adding Interactivity
から
次はどこから?
-
Responding to events - Stopping propagation
から
MEMO
あけましておめでとうございます。
return void xxx とは
immerを使うことのメリット
複雑さを多少軽減できるが、根本的な解決にはならないので難しい
第一級関数
event propagation
scrollイベントのバブリング
2023-01-16(月) 20:00-21:00
実績
-
Responding to events - Stopping propagation
から
次はどこから?
-
State as a Snapshot
から
MEMO
レンダーがトリガーされるとReactはコンポーネントをレンダーする。
その後レンダー結果とDOMを比較してDOMを変更(コミット)する。
コミットは差分のみなので変更がないこともある。
strictモードは開発中にコンポーネントを複数回レンダーすることでpureであることを確認する。
フックの使えるところ
2023-01-23(月) 20:00-21:00
実績
-
State as a Snapshot
から
次はどこから?
-
queueing-a-series-of-state-updates#updating-the-same-state-variable-multiple-times-before-the-next-render
から
MEMO
render batching
stateの更新はrenderをトリガーするが、ある程度まとめて処理する。
React18からAutomatic Batchingが追加されており、Reactのイベントハンドラ以外でもバッチ処理が行われるようになった。
処理への影響なくrender回数が削減されるため、setStateをたくさん呼んでも安心。
その他
Kent C. Dodds
なんかすごいたかい。
内容は気になる。
気になる本と勉強会
2023-01-30(月) 20:00-21:00
実績
-
queueing-a-series-of-state-updates#updating-the-same-state-variable-multiple-times-before-the-next-render
から
次はどこから?
-
updating-objects-in-state#updating-a-nested-object
から
MEMO
キューを図示した表がわかりやすい
上書きされるパターンを理解する。
急にjs力が試されるチャレンジ
e.target.name
を用いたフォームの更新
あまり見ない
簡単に書けるパターンとしては覚えておきたい。
2023-02-06(月) 20:00-21:00
実績
-
updating-objects-in-state#updating-a-nested-object
から
次はどこから?
-
updating-arrays-in-state
から
MEMO
TBD
2023-02-13(月) 20:00-21:00
実績
-
updating-arrays-in-state
から
次はどこから?
-
managing-state
から
MEMO
配列の状態
オブジェクトの状態と同じ
TBD
破壊的なメソッド
配列を破壊的メソッドで扱いたくなるときもある
map内で親関数をreturnしたいとか…
splice使わないな。
TBD
ReadonlyArray型
破壊的なメソッドを使えないはず…
サンプルについて
動かないはずのサンプルが一見動いているように見える件
他のstateの変更が同時にあるので…
2023-02-20(月) 20:00-21:00
実績
-
managing-state
から
次はどこから?
-
choosing-the-state-structure
から
MEMO
TBD
雑談
スピーカーだとmeetingの初めにハウリングしたり声が小さくなったりする
→DiscordとかMacbookとか…
→話し始めはスピーカーからマイクへの音を上手く処理できないのでは?みたいな予想
今週オフでのキーボード会(?)楽しみですね。
2023-02-27(月) 20:00-21:00
実績
-
choosing-the-state-structure
から
次はどこから?
-
choosing-the-state-structure#avoid-deeply-nested-state
から
MEMO
ステートは重複をできるだけ避ける。
DB設計のように…
Group related state のxのみの場合の挙動
CSSエラーが起こってそう。
Don’t mirror props in state はTableとDialogで踏んだ
TBD
2023-03-06(月) 20:00-21:00
実績
-
choosing-the-state-structure#avoid-deeply-nested-state
から
次はどこから?
-
sharing-state-between-components#controlled-and-uncontrolled-components
から
MEMO
TBD
2023-03-13(月) 20:00-21:00
実績
-
sharing-state-between-components#controlled-and-uncontrolled-components
から
次はどこから?
-
preserving-and-resetting-state#same-component-at-the-same-position-preserves-state
から
MEMO
TBD
Renderの定義がわからなくなった
コンポーネントの初期レンダリングとマウントについて
関数コンポーネントではもうマウントとは言わない模様
uncontroll component
前まではフォームと密接な説明だったが、新しいドキュメントでは抽象度が上がっていた
APIの説明では断片的な記述がある
CSSOMとアクセシビリティツリー
アクセシビリティツリーはtesting-libraryでのgetByRole指定で活用してたり…
2023-03-20(月) 20:00-21:00
実績
-
preserving-and-resetting-state#same-component-at-the-same-position-preserves-state
から
次はどこから?
-
preserving-and-resetting-state#resetting-state-at-the-same-position
から
MEMO
TBD
2023-03-27(月) 20:00-21:00
実績
-
preserving-and-resetting-state#resetting-state-at-the-same-position
から
次はどこから?
-
extracting-state-logic-into-a-reducer
から
MEMO
localstorageの使い所
セキュリティ
MUI
TBD
2023-04-03(月) 20:00-21:00
実績
-
extracting-state-logic-into-a-reducer
から
次はどこから?
-
passing-data-deeply-with-context
から
MEMO
TBD
reducerという命名
flatMapの便利さ
reducerを使うことがあるのか?
2023-04-10(月) 20:00-21:00
実績
-
passing-data-deeply-with-context
から
次はどこから?
-
scaling-up-with-reducer-and-context
から
MEMO
TBD
recoilの将来
jotaiのGC
2023-04-17(月) 20:00-21:00
実績
-
scaling-up-with-reducer-and-context
から
次はどこから?
-
scaling-up-with-reducer-and-context
の途中から
MEMO
TBD
2023-05-08(月) 20:00-21:00
実績
-
scaling-up-with-reducer-and-context
の途中から
次はどこから?
-
escape-hatches
から
MEMO
GW明けで久々の開催。
Next.jsの最新が追いやすい記事
2023-05-15(月) 20:00-21:00
実績
-
escape-hatches
から
次はどこから?
-
referencing-values-with-refs#differences-between-refs-and-state
から
MEMO
react labs 2023
RSC含めてNext.jsが出している部分が多い。
Offscreen Rendering が面白そう。
react canaries
canaryがちゃんとある。
ref
refはレンダリングの抑制に使うのはちょっと怖い。
レンダリングされない事故が…
雑談
RSCのたすかる解説
RSCに対して有効…?
目標設定のいろいろ雑談
2023-05-22(月) 20:00-21:00
実績
-
referencing-values-with-refs#differences-between-refs-and-state
から
次はどこから?
-
manipulating-the-dom-with-refs#when-react-attaches-the-refs
から
MEMO
push to talk
すぐにミュートに出来るのが便利らしい。
scrollIntoView
便利そう。
refの初期化の仕方
ref={}
は関数も引数に取れる。
useImperativeHandle
だが、例を見る限りDOMのref eventを制限するなどnativeでやれることを制限する方向に使ってほしそう。
2023-05-29(月) 20:00-21:00
実績
-
manipulating-the-dom-with-refs#when-react-attaches-the-refs
から
次はどこから?
-
synchronizing-with-effects
から
MEMO
react-dom
actやrenderのイメージ
flushSync
challenges
雑談
E2Eテストの話
最近やってる設計の話
2023-06-05(月) 20:00-21:00
実績
-
synchronizing-with-effects
から
次はどこから?
-
synchronizing-with-effects#sending-analytics
から
MEMO
useEffect
雑談
クックパッドの話と最近のエンジニア事情
信託型ストックオプション
2023-06-12(月) 20:00-21:00
実績
-
synchronizing-with-effects#sending-analytics
から
次はどこから?
-
you-might-not-need-an-effect
から
MEMO
Server State
Intersection_Observer_API
useEffect完全ガイドを思い出す
Closures
AbortController
2023-07-03(月) 20:00-21:00
実績
-
you-might-not-need-an-effect
から
次はどこから?
-
you-might-not-need-an-effect#sharing-logic-between-event-handlers
から
MEMO
計算できるものはStateに持たない。
重たかったらメモ化する。
keyの有効活用
Dialog等、違うデータを同じコンポーネントで開きたい場面で積極的に使っていくべき。
keyが違うと別物扱い。
前回のレンダーからの情報を保存する手法
useEffectよりもレンダーが1回で行えて良いという視点。
prevStateを保持する違和感はあるが、どちらがましかという観点が得られた。
FinalizationRegistry
useFragmentをSuspense対応したいという文脈
2023-07-10(月) 20:00-21:00
実績
-
you-might-not-need-an-effect#sharing-logic-between-event-handlers
から
次はどこから?
-
you-might-not-need-an-effect#recap チャレンジ問題
から
MEMO
isCloserToRightEdge
説明がないと理解しづらい…
アプリケーションの初期化
App.tsxにトップレベルのコードを書くのはよくやる。
親にデータを渡す
Suspense使うときに偶にやりたくなって困る。
外部ストアへのサブスクライブ
useSyncExternalStoreを推奨している。
React+TypeScript(フロント全般)の入門
Udemy
YouTube
react.devのチュートリアル
りあクト!
etc...
動画や音声は手が離せない場合も学習出来て良い。
フロントやTSは範囲が広いので何かにフォーカスして学習するほうが良さそう。
Reactする場合はTSにしておいたほうがTSがガードレール的になって楽。
2023-07-31(月) 20:00-21:00
実績
-
you-might-not-need-an-effect#recap チャレンジ問題
から -
lifecycle-of-reactive-effects エフェクトが再同期できることを React はどのように確認するのか
まで
次はどこから?
-
lifecycle-of-reactive-effects React がエフェクトの再同期が必要であることを知る方法
から
MEMO
謎
しかし、再同期が必要となるより珍しいケースもあります。例えば、チャットが開いている間に、サンドボックス上の serverUrl を編集してみてください。コードの編集に応じて、エフェクトが再同期されることがわかります。
serverUrlを編集したらホットリロードで影響のあるコンポーネントが再レンダリングされるんだが、それを再同期と呼ぶのか…?
確かに実行はされるが結構解釈に困った。
将来的には、React は再同期に依存する機能を追加するかもしれません。
なんだろ…?useEffectに変わるフックは欲しいと思う。useEffectよりも使用に抵抗感があるものだと嬉しい。
イベント
MUIのTimePickerをDOMから扱いたい
DOMから操作するの難しい…
var event = new MouseEvent('mouseup', { bubbles: true, offsetX: 100, offsetY: 200 });
> MouseEvent {isTrusted: false, screenX: 0, screenY: 0, clientX: 0, clientY: 0, …}
$0.dispatchEvent(event)
> true
$0は予想通りsquareMaskだった。
イベントが起きた座標から角度取って値を決めてるので、その辺考慮したoffsetにする必要がある。
追記:
MouseEventはclientX/Y
しか引数に取れないので、もうひと手間必要になる。
squareMaskのgetBoundingClientRectで画面のどこにsquareMaskがあるかを求め、適切なoffsetX/Y
となるようにclientX/Y
を設定すると動く。
2023-08-07(月) 20:00-21:00
実績
-
lifecycle-of-reactive-effects React がエフェクトの再同期が必要であることを知る方法
から
次はどこから?
-
lifecycle-of-reactive-effects#challenges
から
MEMO
TBD
2023-08-21(月) 20:00-21:00
実績
-
lifecycle-of-reactive-effects#challenges
から -
separating-events-from-effects#declaring-an-effect-event
まで
次はどこから?
-
separating-events-from-effects#reading-latest-props-and-state-with-effect-events
から
MEMO
2023-08-28(月) 20:00-21:00
実績
-
separating-events-from-effects#reading-latest-props-and-state-with-effect-events
から
次はどこから?
-
separating-events-from-effects#limitations-of-effect-events
から
MEMO
Integrationテスト/E2Eテスト/手動テストの境界線など
Union型をschema定義に使いたい
jotaiを使い始めた。reducerをどうする?
GoのContext談義
2023-09-11(月) 20:00-21:00
実績
-
separating-events-from-effects#limitations-of-effect-events
から
次はどこから?
-
removing-effect-dependencies
から
MEMO
TBD
2023-09-25(月) 20:00-21:00
実績
-
removing-effect-dependencies
から
次はどこから?
-
removing-effect-dependencies#challenges
から
MEMO
TBD
2023-10-16(月) 20:00-21:00
実績
-
removing-effect-dependencies#challenges
から
次はどこから?
-
reusing-logic-with-custom-hooks
から
MEMO
TBD
2023-10-23(月) 20:00-21:00
実績
-
reusing-logic-with-custom-hooks
から
次はどこから?
-
reusing-logic-with-custom-hooks#custom-hooks-let-you-share-stateful-logic-not-state-itself
から
MEMO
TBD
2023-11-13(月) 20:00-21:00
実績
-
reusing-logic-with-custom-hooks#when-to-use-custom-hooks
から
次はどこから?
-
reusing-logic-with-custom-hooks#there-is-more-than-one-way-to-do-it
から
MEMO
React 19はいつ…?(experimentalなAPIを使いたい)
isLoadingとisValidatingの違い
唐突に出てきたデザインシステムの記事
最速のAPI(?)
2023-11-20(月) 20:00-21:00
実績
-
there-is-more-than-one-way-to-do-it
から
次はどこから?
Learn完結!引き続きReferenceを読み進める。
-
リファレンス
から
一応チャレンジ問題の5番目が途中だった。
解答MEMO