Closed43

『React Docs BETA (Learn)』を読む会

ピン留めされたアイテム
あけのあけの

README

読むもの

https://beta.reactjs.org/learn

目的

Reactへの理解を深める。
使ってはいるが、ドキュメントを一通り読んだことがなかったので読み進めていく。
どうせなら新しいものを読みたい!

進め方

参加者が交代で読む。
引っかかった点を話し合ったりコードを書いたりして完全理解してから進む。
どこまで読む等は決めずに時間内(1時間)で読めるところまでを読む。

英語の訳はDeepLやGoogleに頑張ってもらう。

あけのあけの

2022-10-17(月) 20:00-21:00

実績

  • Quick Start から
  • Thinking in React Step 3まで

https://beta.reactjs.org/learn

次はどこから?

  • Thinking in React Step 4: Identify where your state should live から

https://beta.reactjs.org/learn/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まで

https://beta.reactjs.org/learn/thinking-in-react#step-4-identify-where-your-state-should-live

次はどこから?

  • Your First Componentから

https://beta.reactjs.org/learn/your-first-component

MEMO

共通の親とは

該当の子を見つけて、樹形図を根の方に遡って、ぶつかったところにステートをもたせる。
できるだけ狭いスコープに収めるのが良し。
大きすぎる場合はglobalなのかもしれない。

フックという命名は天才

レンダリングに関連付ける・引っ掛けて実行するというのが分かりやすい…かもしれない。
少なくともだいぶ馴染んだ。

双方向バインディングの良し悪し

双方向バインディング、vueとangularでは普通にある。
shorthandとしてeasyに使えるが、simpleではないよねという感覚。
内部を知っていて使うなら良いのだが…
そのへん意識するならReact-wayでも良いよねという話。

mapでloopした時のReactに渡すKeyの話

Keyの必要性とloopのindexをなぜ使うべきではないか
https://beta.reactjs.org/learn/rendering-lists#why-does-react-need-keys

ちゃんと一意なものを使いましょう。

あけのあけの

2022-11-07(月) 20:00-21:00

実績

  • Your First Componentから
  • Importing and Exporting Components - Exporting and importing a componentまで

https://beta.reactjs.org/learn/your-first-component

次はどこから?

  • Importing and Exporting Components - Exporting and importing multiple components from the same fileから

https://beta.reactjs.org/learn/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まで

https://beta.reactjs.org/learn/importing-and-exporting-components#exporting-and-importing-multiple-components-from-the-same-file

次はどこから?

  • Passing Props to a Componentから

https://beta.reactjs.org/learn/passing-props-to-a-component

MEMO

aria-* がsnake-caseである理由

歴史的経緯の推測が記載されていた
https://stackoverflow.com/questions/52398380/why-react-wai-aria-is-not-in-camelcase

markupとは

構造を記述するもの…らしい
https://ja.wikipedia.org/wiki/マークアップ言語
https://ja.wikipedia.org/wiki/HyperText_Markup_Language

雑談

playwrightでのReactコンポーネントのテスト

react-testing-libraryのjsdomとplaywrightの実際のブラウザdomのどちらを使うかという話
最終的にplaywrightの方が良さそうだがExperimentalなのと機能的に足りてない部分もあって意見が分かれそう。
https://zenn.dev/azukiazusa/articles/playwright-component-testing
http://var.blog.jp/archives/86110558.html
https://playwright.dev/docs/test-components

mabl

なんでも出来てAutifyより良いらしい。
https://www.mabl.com/ja/
https://zenn.dev/seya/articles/eb03a550b7f19b

Astro

Islands ArchitectureとかMPA/SPAとかの話
https://docs.astro.build/ja/concepts/islands/
https://qiita.com/oekazuma/items/87923acea03990fd71a2

imgurはsuffixでサムネイルが作れる

s,b,t,mの接尾語で行ける模様。
https://way2go.netlify.app/image-management/

🔥

https://honojs.dev/

あけのあけの

2022-11-28(月) 20:00-21:00

実績

  • Passing Props to a Componentから

https://beta.reactjs.org/learn/passing-props-to-a-component

次はどこから?

  • Conditional Renderingから

https://beta.reactjs.org/learn/conditional-rendering

MEMO

childrenの型について

要素を1つしか許可しないのにchlidではなくchildrenなのか…という話。
Fragmentが配列を許可するので実質複数の子が持てる。
https://dackdive.hateblo.jp/entry/2019/08/07/090000

childrenではなくslotという概念

https://jp.vuejs.org/v2/guide/components-slots.html
https://angular.jp/guide/content-projection

その他

テンプレートリテラルの型チェックとESLintルールの話
https://typescript-eslint.io/rules/restrict-template-expressions/

jsのnull/undefinedチェック

undefined == null
true
undefined === null
false

RSCやりたい
https://zenn.dev/uhyo/books/rsc-without-nextjs

あけのあけの

2022-12-05(月) 20:00-21:00

実績

  • Conditional Renderingから
  • Rendering Listsまで

https://beta.reactjs.org/learn/conditional-rendering

次はどこから?

  • Keeping Components Pureから

https://beta.reactjs.org/learn/keeping-components-pure

MEMO

flatMapが使いやすい話

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap

TypeScriptの型推論において、filterの型推論は使いづらい。
https://zenn.dev/yarnaimo/articles/66e9102a79c0896b4204

雑談

&&は論理積演算子と読む
letはできるだけ使わずに即時関数を使う派
https://beta.reactjs.org/apis/react/Fragment Fragmentは短縮構文しか使ったことがない
LoopのKeyの話

あけのあけの

2022-12-18(月) 20:00-21:00

実績

  • Keeping Components Pureから

https://beta.reactjs.org/learn/keeping-components-pure

次はどこから?

  • Adding Interactivityから

https://beta.reactjs.org/learn/adding-interactivity

MEMO

英語を機械翻訳を使わずに読んで見る回その2!
終わらないので途中から翻訳し始めた…

React18 + Server Component + emotion

css-in-jsが辛そうという話。
https://github.com/emotion-js/emotion/issues/2928
https://beta.nextjs.org/docs/styling/css-in-js

TBD

あけのあけの

2023-01-16(月) 20:00-21:00

実績

  • Responding to events - Stopping propagationから

https://beta.reactjs.org/learn/responding-to-events#stopping-propagation

次はどこから?

  • State as a Snapshotから

https://beta.reactjs.org/learn/state-as-a-snapshot

MEMO

レンダーがトリガーされるとReactはコンポーネントをレンダーする。
その後レンダー結果とDOMを比較してDOMを変更(コミット)する。
コミットは差分のみなので変更がないこともある。

strictモードは開発中にコンポーネントを複数回レンダーすることでpureであることを確認する。

フックの使えるところ

https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e

あけのあけの

2023-01-23(月) 20:00-21:00

実績

  • State as a Snapshotから

https://beta.reactjs.org/learn/state-as-a-snapshot

次はどこから?

  • queueing-a-series-of-state-updates#updating-the-same-state-variable-multiple-times-before-the-next-renderから

https://beta.reactjs.org/learn/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をたくさん呼んでも安心。

https://note.com/umotion/n/nadda0d47801c

その他

Kent C. Dodds

https://testingjavascript.com/
https://github.com/kentcdodds

なんかすごいたかい。
内容は気になる。

気になる本と勉強会

https://www.amazon.co.jp/dp/1803247126/
https://yasashii-agile.connpass.com/event/269629/

https://www.amazon.co.jp/dp/4774189677

あけのあけの

2023-01-30(月) 20:00-21:00

実績

  • queueing-a-series-of-state-updates#updating-the-same-state-variable-multiple-times-before-the-next-renderから

https://beta.reactjs.org/learn/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から

https://beta.reactjs.org/learn/updating-objects-in-state#updating-a-nested-object

MEMO

キューを図示した表がわかりやすい

https://beta.reactjs.org/learn/queueing-a-series-of-state-updates#updating-the-same-state-variable-multiple-times-before-the-next-render

上書きされるパターンを理解する。

急にjs力が試されるチャレンジ

https://beta.reactjs.org/learn/queueing-a-series-of-state-updates#recap

あまり見ないe.target.nameを用いたフォームの更新

https://beta.reactjs.org/learn/updating-objects-in-state#using-a-single-event-handler-for-multiple-fields
tsだと型で縛っておきたいからnameの文字列に依存するのは避けそう。
簡単に書けるパターンとしては覚えておきたい。

あけのあけの

2023-02-13(月) 20:00-21:00

実績

  • updating-arrays-in-stateから

https://beta.reactjs.org/learn/updating-arrays-in-state

次はどこから?

  • managing-stateから

https://beta.reactjs.org/learn/managing-state

MEMO

配列の状態

オブジェクトの状態と同じ
TBD

破壊的なメソッド

配列を破壊的メソッドで扱いたくなるときもある
map内で親関数をreturnしたいとか…
splice使わないな。

TBD

ReadonlyArray型

破壊的なメソッドを使えないはず…

サンプルについて

動かないはずのサンプルが一見動いているように見える件
https://beta.reactjs.org/learn/updating-arrays-in-state#adding-to-an-array

他のstateの変更が同時にあるので…

あけのあけの

2023-02-20(月) 20:00-21:00

実績

  • managing-stateから

https://beta.reactjs.org/learn/managing-state

次はどこから?

  • choosing-the-state-structureから

https://beta.reactjs.org/learn/choosing-the-state-structure

MEMO

TBD

雑談

スピーカーだとmeetingの初めにハウリングしたり声が小さくなったりする
→DiscordとかMacbookとか…
→話し始めはスピーカーからマイクへの音を上手く処理できないのでは?みたいな予想

今週オフでのキーボード会(?)楽しみですね。

あけのあけの

2023-02-27(月) 20:00-21:00

実績

  • choosing-the-state-structureから

https://beta.reactjs.org/learn/choosing-the-state-structure

次はどこから?

  • choosing-the-state-structure#avoid-deeply-nested-stateから

https://beta.reactjs.org/learn/choosing-the-state-structure#avoid-deeply-nested-state

MEMO

ステートは重複をできるだけ避ける。
DB設計のように…

CSSエラーが起こってそう。

Don’t mirror props in state はTableとDialogで踏んだ

TBD

あけのあけの

2023-03-13(月) 20:00-21:00

実績

  • sharing-state-between-components#controlled-and-uncontrolled-componentsから

https://beta.reactjs.org/learn/sharing-state-between-components#controlled-and-uncontrolled-components

次はどこから?

  • preserving-and-resetting-state#same-component-at-the-same-position-preserves-stateから

https://beta.reactjs.org/learn/preserving-and-resetting-state#same-component-at-the-same-position-preserves-state

MEMO

TBD

Renderの定義がわからなくなった
コンポーネントの初期レンダリングとマウントについて
関数コンポーネントではもうマウントとは言わない模様
https://beta.reactjs.org/reference/react/Component

uncontroll component

前まではフォームと密接な説明だったが、新しいドキュメントでは抽象度が上がっていた
https://ja.reactjs.org/docs/uncontrolled-components.html

APIの説明では断片的な記述がある
https://beta.reactjs.org/reference/react-dom/components/input

CSSOMとアクセシビリティツリー

https://developer.mozilla.org/ja/docs/Web/API/CSS_Object_Model
https://developer.mozilla.org/ja/docs/Glossary/Accessibility_tree

アクセシビリティツリーはtesting-libraryでのgetByRole指定で活用してたり…
https://chrome.google.com/webstore/detail/testing-playground/hejbmebodbijjdhflfknehhcgaklhano

あけのあけの

2023-05-15(月) 20:00-21:00

実績

  • escape-hatchesから

https://react.dev/learn/escape-hatches

次はどこから?

  • referencing-values-with-refs#differences-between-refs-and-stateから

https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state

MEMO

react labs 2023

https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023

RSC含めてNext.jsが出している部分が多い。
Offscreen Rendering が面白そう。

react canaries

https://react.dev/blog/2023/05/03/react-canaries

canaryがちゃんとある。
https://www.npmjs.com/package/react/v/18.3.0-canary-4cd706566-20230512

ref

refはレンダリングの抑制に使うのはちょっと怖い。
レンダリングされない事故が…

雑談

RSCのたすかる解説
https://zenn.dev/uhyo/articles/react-server-components-multi-stage

RSCに対して有効…?
https://mui.com/base/getting-started/overview/

目標設定のいろいろ雑談

あけのあけの

2023-05-22(月) 20:00-21:00

実績

  • referencing-values-with-refs#differences-between-refs-and-stateから

https://react.dev/learn/referencing-values-with-refs#differences-between-refs-and-state

次はどこから?

  • manipulating-the-dom-with-refs#when-react-attaches-the-refsから

https://react.dev/learn/manipulating-the-dom-with-refs#when-react-attaches-the-refs

MEMO

push to talk

すぐにミュートに出来るのが便利らしい。
https://support.zoom.us/hc/ja/articles/360000510003-プッシュツートーク
https://support.google.com/meet/answer/7313544?hl=ja

scrollIntoView

便利そう。
https://developer.mozilla.org/ja/docs/Web/API/Element/scrollIntoView

refの初期化の仕方

ref={}は関数も引数に取れる。

useImperativeHandle

https://numb86-tech.hatenablog.com/entry/2019/12/06/122217
子コンポーネントの処理を発火できるのでvueやangularのemitを実現できる。
だが、例を見る限りDOMのref eventを制限するなどnativeでやれることを制限する方向に使ってほしそう。

あけのあけの

2023-05-29(月) 20:00-21:00

実績

  • manipulating-the-dom-with-refs#when-react-attaches-the-refsから

https://react.dev/learn/manipulating-the-dom-with-refs#when-react-attaches-the-refs

次はどこから?

  • synchronizing-with-effectsから

https://react.dev/learn/synchronizing-with-effects

MEMO

react-dom

actやrenderのイメージ
https://www.npmjs.com/package/react-dom

flushSync

https://react.dev/reference/react-dom/flushSync

challenges

https://codesandbox.io/s/exciting-ptolemy-bd1w3k?file=/App.js

雑談

E2Eテストの話

最近やってる設計の話

あけのあけの

2023-07-03(月) 20:00-21:00

実績

  • you-might-not-need-an-effectから

https://ja.react.dev/learn/you-might-not-need-an-effect

次はどこから?

  • you-might-not-need-an-effect#sharing-logic-between-event-handlersから

https://ja.react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

MEMO

計算できるものはStateに持たない。
重たかったらメモ化する。

keyの有効活用

Dialog等、違うデータを同じコンポーネントで開きたい場面で積極的に使っていくべき。
keyが違うと別物扱い。

前回のレンダーからの情報を保存する手法

https://ja.react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes

useEffectよりもレンダーが1回で行えて良いという視点。
prevStateを保持する違和感はあるが、どちらがましかという観点が得られた。

FinalizationRegistry

https://codesandbox.io/s/new-voice-3vv4c5?file=/src/App.js
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/FinalizationRegistry

useFragmentをSuspense対応したいという文脈
https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#the-usefragment-helper
https://zenn.dev/mh4gf/articles/graphql-codegen-client-preset#fragment-maskingによりfragment-colocationの強制が可能になる

あけのあけの

2023-07-10(月) 20:00-21:00

実績

  • you-might-not-need-an-effect#sharing-logic-between-event-handlersから

https://ja.react.dev/learn/you-might-not-need-an-effect#sharing-logic-between-event-handlers

次はどこから?

  • you-might-not-need-an-effect#recap チャレンジ問題から

https://ja.react.dev/learn/you-might-not-need-an-effect#recap

MEMO

isCloserToRightEdge

https://ja.react.dev/learn/you-might-not-need-an-effect#notifying-parent-components-about-state-changes
isCloserToRightEdge、右側に近いところでDragが終わるとToggleSwitchのUI表示上ONに近いからtrueにするわけですね。
説明がないと理解しづらい…

アプリケーションの初期化

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 はどのように確認するのかまで

https://ja.react.dev/learn/you-might-not-need-an-effect#recap

次はどこから?

  • lifecycle-of-reactive-effects React がエフェクトの再同期が必要であることを知る方法から

https://ja.react.dev/learn/lifecycle-of-reactive-effects#how-react-knows-that-it-needs-to-re-synchronize-the-effect

MEMO

しかし、再同期が必要となるより珍しいケースもあります。例えば、チャットが開いている間に、サンドボックス上の serverUrl を編集してみてください。コードの編集に応じて、エフェクトが再同期されることがわかります。

serverUrlを編集したらホットリロードで影響のあるコンポーネントが再レンダリングされるんだが、それを再同期と呼ぶのか…?
確かに実行はされるが結構解釈に困った。

将来的には、React は再同期に依存する機能を追加するかもしれません。

なんだろ…?useEffectに変わるフックは欲しいと思う。useEffectよりも使用に抵抗感があるものだと嬉しい。

イベント

https://3rdpartyjs.connpass.com/event/289558/

MUIのTimePickerをDOMから扱いたい

DOMから操作するの難しい…
https://mui.com/x/react-date-pickers/time-picker/#available-components

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

https://github.com/mui/mui-x/blob/483ef700e84d4e1731ef42c5d57e5f4f977a2707/packages/x-date-pickers/src/TimeClock/Clock.tsx#L222-L238

$0は予想通りsquareMaskだった。
https://github.com/mui/mui-x/blob/483ef700e84d4e1731ef42c5d57e5f4f977a2707/packages/x-date-pickers/src/TimeClock/Clock.tsx#L52

イベントが起きた座標から角度取って値を決めてるので、その辺考慮したoffsetにする必要がある。
https://github.com/mui/mui-x/blob/483ef700e84d4e1731ef42c5d57e5f4f977a2707/packages/x-date-pickers/src/TimeClock/shared.ts#L19-L42

追記:
MouseEventはclientX/Yしか引数に取れないので、もうひと手間必要になる。
squareMaskのgetBoundingClientRectで画面のどこにsquareMaskがあるかを求め、適切なoffsetX/YとなるようにclientX/Yを設定すると動く。

あけのあけの

2023-08-21(月) 20:00-21:00

実績

  • lifecycle-of-reactive-effects#challengesから
  • separating-events-from-effects#declaring-an-effect-eventまで

https://ja.react.dev/learn/lifecycle-of-reactive-effects#challenges

次はどこから?

  • separating-events-from-effects#reading-latest-props-and-state-with-effect-eventsから

https://ja.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events

MEMO

https://www.npmjs.com/package/react?activeTab=versions
https://zenn.dev/suzu_4/articles/4abeccb283331b#useeffectevent-を使う

あけのあけの

2023-08-28(月) 20:00-21:00

実績

  • separating-events-from-effects#reading-latest-props-and-state-with-effect-eventsから

https://ja.react.dev/learn/separating-events-from-effects#reading-latest-props-and-state-with-effect-events

次はどこから?

  • separating-events-from-effects#limitations-of-effect-eventsから

https://ja.react.dev/learn/separating-events-from-effects#limitations-of-effect-events

MEMO

Integrationテスト/E2Eテスト/手動テストの境界線など
https://qase.io/

Union型をschema定義に使いたい
https://graphql.org/learn/schema/#interfaces
https://protobuf.dev/programming-guides/proto3/#oneof

jotaiを使い始めた。reducerをどうする?
https://jotai.org/docs/utilities/reducer

GoのContext談義
https://twitter.com/mpyw/status/1695730763822666054?s=20
https://pkg.go.dev/context

あけのあけの

2023-11-13(月) 20:00-21:00

実績

  • reusing-logic-with-custom-hooks#when-to-use-custom-hooksから

https://ja.react.dev/learn/reusing-logic-with-custom-hooks#when-to-use-custom-hooks

次はどこから?

  • reusing-logic-with-custom-hooks#there-is-more-than-one-way-to-do-itから

https://ja.react.dev/learn/reusing-logic-with-custom-hooks#there-is-more-than-one-way-to-do-it

MEMO

React 19はいつ…?(experimentalなAPIを使いたい)
https://twitter.com/acdlite/status/1719474730363662473

isLoadingとisValidatingの違い
https://swr.vercel.app/ja/docs/api

唐突に出てきたデザインシステムの記事
https://uxdesign.cc/everything-you-need-to-know-about-design-systems-54b109851969

最速のAPI(?)
https://developer.mozilla.org/ja/docs/Web/API/window/requestAnimationFrame

このスクラップは4ヶ月前にクローズされました