React デザイン
#react #css #デザイン現状[onigiri.w2.icon]は、考えるのが面倒くさい + デザインセンスが皆無なので、[Chakra UI]ベースで考える。生のCSSとか使わない。SCSSも。[** Chakra UI 中心の指針（現時点）][hr.icon]
react
- Links
- React パフォーマンス向上 Tips#React #性能関連[React メモ化（React.memo, useMemo, useCallBack）][React パフォーマンス向上 備忘録][** Tips]
- React TanStack Query（旧: ReactQuery）#react[* TanStack Queryとは]一言で言うと、「非同期の状態管理ライブラリ」。cf: [https://qiita.com/taisei-13046/items/05cac3a2b4daeced64aa React Queryはデータフェッチライブラリではない。非同期の状態管理ライブラリだ。 #React - Qiita]非同期に更新される状態の管理ライブラリってことで、別にAPIだけが対象じゃないっすよってこと。
- React Helmet#React使い方自体はそんなに難しくない。というかシンプル。それよりも、ヘッダータグとして何を置くか見たいな方が重要。Reactというよりは、Web？の世界の話かも。[* インストール]2023/5/11現在、`react-helmet-async`をインストールした方が良いらしい。
- React エラーハンドリング
- React テスト tips#React #テスト[_ テスト内で、stateが変更する系の関数を実行する場合は、actを使え]`...``export const useSample = () => {``const [value, setValue] = useState();`
- React Suspense#React[https://zenn.dev/uhyo/books/react-concurrent-handson/viewer/introduction はじめに｜ReactのSuspense対応非同期処理を手書きするハンズオン]これ読めばざっくりわかる。[* ポイント][サスペンド]状態が`Suspense`の中心である。これをまずは覚えろ。
- React ReactQuery useQuery#React[** useQueryのisLoadingがtrueになるタイミング][hr.icon][_ 1. useQueryが対象コンポーネントにマウントされた時点では常にtrueである]これ一番の基本なので押さえておく。
- React spa デプロイ#React #インフラ #静的ホスティングサービスReactで作った[SPA]アプリを配置するインフラってどうする？SPAアプリを配置する上で、最低限必要なもの、あると良いものなどを整理しつつ、複数の選択肢を挙げる。そして、今んとこのベターな選択肢を決める。[結論.icon] 今のところ[Netlify]で十分かなと...[onigiri.w2.icon]
- React Webフォントを使う場合#React #Webフォント[css]を使って設定するのが多分基本。Reactだろうが関係なさそう。`React`のルートコンポーネントに`index.css`的なの当てて、そこの`body`要素に対して`font-family`を設定してあげる。それがおそらく一番簡単なやり方かな。`body {`
- React メモ化（React.memo, useMemo, useCallBack）#React #性能[** 指針][hr.icon][重要.icon] [*_ React.memo、useMemo、useCallbackは、無駄な再レンダリングを防ぐために使う]親コンポーネントが再レンダリングする際、子コンポーネントも一緒にレンダリングされる可能性がある。
- React ディレクトリ構成を思考する#React[** 指針（一旦）][hr.icon]以下の感じがいいかなぁ。なんか大袈裟やけど。`- src/ # このディレクトリに全コード入れること`
- React レスポンシブ#React[** 情報Input][hr.icon]そもそもレスポンシブって何なん...[https://www.crosswish.com/faq/592/ レスポンシブとはどういう意味ですか? ｜ 京都のホームページ制作会社 株式会社クロスウィッシュ]
- React カスタムフックでコンポーネントからロジックを切り離す#react #reactnative概要`React`を関数コンポーネントでやり繰りする場合、`useState`, `useReducer`などの標準フックを使うのが基本。ただ、これで普通に続けてると、コンポーネントにビジネスロジックが入り込み、コードが複雑化するという問題が発生する。基本的にコンポーネントは「ビュー。表示の部分」と「コンポーネント間のデータの受け渡し」の部分だけを担当して欲しいところ。
- React reactでアイコンを使うなら「React Icons」以下ページ[** [https://react-icons.github.io/react-icons React Icons]]Reactでアイコンを使いたい場合、自分で画像を引っ張ってくる必要はない。効率悪い。React Iconsを使って、そこから使いたいアイコンを利用しましょう。
- React パフォーマンス向上 備忘録
- React Container/Presenter/hooksでロジックとUIを分けるフロント開発では「ロジック」と「UI」を分けて管理してあげると保守性が上がる。ロジックの実装だけでテストを行えたり、UIの実装だけで見た目を確認できたりする。`React`の世界では昔からContainer/Presenterパターンが利用されてきた。[onigiri.w2.icon] 的には今でも有用に思えるパターンである。ただ、最近の関数型コンポーネントの流れからContainerの代わりにhooksにロジックを置く流れも増えてきた。
- React Atomicデザインで設計するどの界隈まで広がるのかわからないが、少なくともReactやVueの世界では有名な設計手法の1つ「Atomicデザイン」。基本的にプログラムは量が増えれば増えるほど、どこに何があるのか分からなくなってグチャグチャになる。その分、保守性も下がっていき、開発スピードは下がるわ、バグが孕む可能性はあるわで全く良いことがなくなる。ReactやVueの世界では、コンポーネント指向という考え方でシステムが組まれていく。
- React index.jsを使って冗長なディレクトリ構成を見やすくするReactだとtestコード、style.cssなどを本番コードと一緒のディレクトリに置く習慣がある。そうなると以下のように少し冗長なディレクトリ構成になっちゃうこの`/Sample/Sample`て２回打つのは正直面倒。これを解決できるのが`index.js``Sample`が一個減った！！！
- React props・stateが更新されると配下の全コンポーネントが再レンダリングされる[参考.icon][https://qiita.com/teradonburi/items/5b8f79d26e1b319ac44f お前らのReactは遅い - Qiita][https://qiita.com/soarflat/items/b9d3d17b8ab1f5dbfed2 React.memo / useCallback / useMemo の使い方、使い所を理解してパフォーマンス最適化をする - Qiita]
- React Jestを使ったスパイの利用例背景Jestを使ったテストの際に、スパイを使って指定の関数・メソッドが正確に呼び出されてるか確認したい。こう言う時のJest活用例をここに記載しておく。[参考.icon][https://zenn.dev/tkdn/books/react-testing-patterns/viewer/testing-with-spy カスタム Hooks のテスト、テストにおけるスパイ｜React テスト応用、テストに悩む人へ]
- React カスタムフックをjestでテストする背景カスタムフックをテストしたい場合のHowToをここに記しておく方法としては主に「ライブラリ無しでやる」と「ライブラリ有りでやる」の2つがあるが、今回は「ライブラリ有りでやる」方法を記しておく。結論から言うと`react-testing-library`、`react-hooks-testing-library`を利用するといい。インストール方法
- React jsonデータを読み込んで利用するReactを利用してる時、jsonデータを読み込んで利用したい時がある。そのコーディング方法を記載しておく参考[https://www.i-ryo.com/entry/2021/02/08/065133#Header%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%E3%81%ABJSON%E3%83%87%E3%83%BC%E3%82%BF%E3%82%92%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%8
- MaterialUI 謎のアニメーション機能を無効化（ripple）[https://scrapbox.io/files/613448f27ddef7001f770f48.mp4]※ 「再生」 を押したら、動作が見えますReactでMaterialUIのボタンを使う時、この謎のアニメーション（＝Ripple）が必要ない時がある。この動作を無効化する方法は...「`disableRipple`を`true`にする」。参考
- 【Frontend】原則：親子関係での状態管理は、その影響範囲で決める#tips #react親が管理すべき状態：兄弟コンポーネント間で影響し合う状態全体の整合性に関わる状態外部から参照される可能性のある状態
- 【FrontEnd】1つのコンポーネントの視覚状態を先に洗い出してから実装すること#tips #react焦るな。抑えろまずはそのコンポーネントが持つ視覚状態を洗い出すことから始めやがれ。先に洗い出しておかないと、実装の手戻りが大量に発生する。無理やり実装しても、保守性の低いコードが出来上がる。
- 【FrontEnd】featureはviewmodelを割り出すとスッキリする#tips #react #設計今気づいたけど、いわゆる[MVVM]っていう形と似てると思う[onigiri.w2.icon]中心にある「唯一信頼できるリソース」に対する参照的な形をとる。これはめっちゃスッキリるする。独立して管理できるから、他のviewmodel定義に影響しないというのも大きい。
- 【React】原則、Listコンポーネント内のItemの視覚状態は親が管理した方が丸い#tips #reactList内の`Item`の視覚状態は、他`Item`の状態によって変わったりすることが多い。だから、基本的に視覚状態を`Item`の内部で管理するとかはやめた方がいい。ややこしいことになる。なんか釈然としないことになる。基本的には、`Item`の視覚状態を洗い出して、それを`enum`でまとめてListコンポーネントにて、どのitemがどういう視覚状態なのか？を管理させると良い。
- 【FrontEnd】flexboxの中の要素をrotateさせると、横幅が変わってレイアウトずれを起こす時ある#tips #react #frontend沼る時あるので書き残しておく。`<div class="flex">``<p class="flex-1">aaaa</p>``<Icon class="rotate-45 h-5 w-5" />`
- 【Zustand】selector関数内で新しいオブジェクトを生成するな#tips #react #zustand以下のようなことはやめなさい`const rules = usePlanStore((state) => {``const plan = state.plans.find((p) => p.id === DEFAULT_PLAN_ID);``return plan?.rules ?? [];`
- 【FrontEnd】コンポーネントのロジックが込み入ってきてるなら切り分ける#tips #reactコンポーネントを作ってる最中でも作ったあとでも良いが、何か見通しが悪いと感じたら、それはおそらく切り出せるコンポーネントがある。別のコンポーネントに切り出して委譲できる可能性がある。なので、なんか読みにくい把握しにくいとなったなら、その時はコンポーネントを切り出せないか確認してみよう。なお、`event`や`on???`系は多くなるのは仕方ないこともある。
- 【FrontEnd】featureの作成で迷わないために#tips #react #設計メモ自分が迷わないための原則メモ。対象は「0→1開発」時の画面機能の構築フェーズ。✅ `feature`と`component`の役割の違い`feature`:ドメイン知識を利用する。
- 【Zustand】selectorを上手く使ってレンダリングの最適化も可能#zustand #tips #react`selctor`は状態Sliceの内部の属性まで参照できる。`const personal = useTestStore((state) => state.user.profile.personal);`こんな感じ。属性が存在する限り永久に。そして、これは`personal`のオブジェクトが変わらない限り、コンポーネントを更新しない。
- 【Zustand】状態Sliceごとに再レンダリング走る動作が基本原則#tips #react #zustand`set`関数ってのがあると思う。こいつは、中で指定した状態sliceを丸ごと更新する。指定してない状態sliceは更新しない。この挙動が`zustand``のstoreの基本動作である。`const useSampleStore = create<SampleStore>((set) => ({`
- 【Zustand】Storeの中にある個々の属性を状態Sliceと呼ぶ（ことにしよう）#tips #react #zustand呼び方が定まってなかったので、自分の中で定めておく。storeの各プロパティをスライスと呼びこととする！参考：https://refine.dev/blog/zustand-react-state/#what-is-zustand`const useStore = create((set) => ({`
- 【Zustand】デストラクチャでStoreから部分的にサブスクするのはすこし危険#tips #react #zustand参考：https://github.com/pmndrs/zustand/discussions/2041https://github.com/pmndrs/zustand/discussions/1045`const { count } = useStore()`
- 【Zustand】ハンドラ内でstoreの状態を使って更新などしたい場合はgetState()が使える#react #tips #zustand`const handleSubmit = () => {``const { loading } = useStore.getState(); // 最新値を取得``if (loading) return;``// 処理...`
- 【React】超シンプルなuseDebounce hooksで、状態更新が高頻度で発生するコンポーネントの親への伝播を制御する#tips #react以下のような超シンプルなhooksを定義して使う`function useDebounce(value, delay) {``const [debouncedValue, setDebouncedValue] = useState(value);``useEffect(() => {`
- 【React】原則、低級コンポーネントはラッパーを作って変化の自由度を減らす#tips #react`Button`とか`Modal`、`Select`、`Radio`などなど。サイト、アプリ全体で使い回すことになる低級コンポーネントは、アプリ内で定義し直して持っておくとよい。各コンポーネントからライブラリのボタンなどを直接使うような真似はしない方がいい。理由
- 【React】一度インスタンス化したコンポーネントの内部状態を外部が引数から制御しないことを原則とする#tips #react自身の原則にしようかと思う。内部状態を外部から変更したいというのは邪道。それをするなら、別の引数でマウントし直すコンポーネントを再作成するというのがシンプルで良い。もし引数からの制御をしたいとなると、以下のようになってしまう。
- 【React】forwarRefでラップしたコンポーネントを定義する場合、displayNameを指定してデバッグしやすいようにしとくこと#tips #reactforwardRefで作ったコンポーネントはReact DevToolsでForwardRefと表示されるため、displayNameで分かりやすい名前を設定する。`const MyComponent = forwardRef<HTMLDivElement, Props>((props, ref) => {``return <div ref={ref}>Hello</div>;`
- 【React】クロージャを使ったおしゃれなハンドラ定義#tips #reactListコンポーネントで各アイテムに固有のハンドラを渡す際のクロージャパターン。以下のようなコードを書く`const [items, setItems] = useState([]);``// クロージャを使ったハンドラ生成`
- Mac App作成のハンズオン#work_in_progress[https://www.youtube.com/watch?v=vZHSe6Wvn9o youtube動画]SwiftUIの構文が特殊すぎるが慣れるしかない。`struct ContentView: View {``var body: some View {`
- 学び 2024
- zustand 読み込み理解#zustand #react #TypeScript[_ zustandのsetを使うことで、簡単に前のstateとマージできる]`cosnt useStore = create((set) => ({``count: 0,``increment: () => {`
- React Suspenseの挙動 完全理解#typescript #suspense #react参考：https://zenn.dev/uhyo/books/react-concurrent-handson/viewer/render-as-you-fetch[_ Suspenseは、いつ何時でも未解決のPromiseが投げられたらFallbackを返し、Promiseが解決したら再度レンダリングを試す]この挙動めっちゃ大事なので頭に叩き込んでおく。
- 【指針】モバイルアプリのアーキテクチャ
- reactを学び直
- React useDerivedValueとuseAnimatedReactionをちゃんと使い分ける#React`useDerivedValue`を使う際の注意点この中で使ってる共有値に変更があったら、否応なしに発火するので注意。思った通りの挙動をさせれない可能性がある。「この値が変更した時だけ発火して欲しいねんけどなぁ。。。。」って時は...
- React propsにdate型を使う場合は、メモ化の挙動に気をつけろ#React`type Props = {``date: Date;``};``const Content = React.memo({date}: Props) => {`
- supercluster 入門してみる#React #javascript #ReactNative[_* 何をするやつ？]地点の一覧を受け取り、それをクラスター化して返してくれるJavascriptライブラリ。具体的説明「`GeoJson Feature`」というオブジェクトを中心にして、地点とクラスター化を扱うので、これを心得ておく。
- ReactNative 開発Tips目次初期構築ディレクトリ構成iOS関連の開発時の注意点android関連の開発時の注意点
- react 状態管理#react複雑な状態を簡単に管理でき、そして尚且つ、アプリ動作がサクサクぬるぬる動く状態にしたい。そのために一度状態管理について徹底的に把握しておこうと思います。。。更新単位を明確に把握しておくの大事かもそのコンポーネントの子供の状態も含めて
- react 基本をおさらい
- React Context API レンダリング#React覚書殴り書き[hr.icon]なんかContextの`state`やらが更新された場合、children全体が再レンダリングされるんじゃなくて、コンシューマー（つまり、Contextの値を取得して色々してるコンポーネント）たちが再レンダリングされるらしい。ほんで、自分の実機で試してた感じ、Providerが再レンダリングされた際には、否応なくコンシューマーも再レンダリングされる。
- React ReactQuery useMutation#react一旦以下の資料を読むといい[https://zenn.dev/microcms/articles/76e903bc5a1aa2?redirected=1#usemutation React Queryを使いこなすために試したこと]
- React SPA デプロイしてみる Netlify編#React #netlify #SPA[* 最低条件]`https`でサイトに接続可能例えば、Netlifyに対して`/hoge`とアクセスしたとしても、`index.html`の内容でかつ`/hoge`の内容が表示できるように。（これは`react-router-dom`がアプリに設定されてる前提ではあるけど...）
- React manifest.json#react[* 目的]Webアプリケーションを携帯のホーム画面のアイコンのように設定するためにある。[* 設定]`name`
