社内向けプロダクトのフロントエンド構成のふりかえりとこれから(2022年1月版) - Adwaysエンジニアブログ
こんにちは。梅津です。 今回は社内向けプロダクトの開発で携わっているフロントエンドの現状や、これからやっていきたいことをお話します。 担当サービスの話 現在のチーム規模 主な技術 フォルダ構成 コンポーネントを作っていく際の方針 src/ui/inhouse/${ページ名} src/ui/inhouse/${ページ名}/pages src/ui/inhouse/${ページ名}/components src/ui/inhouse/${ページ名}/hooks アプリケーションのアーキテクチャ コンポーネントの構成 コンポーネントのメモ化について スタイリング データ取得 & キャッシュ管理 Global State Formatter Linter テスト Presentational Component / Container Componentについて ライブラリのアップデート おわりに
こちらの交流会でLTしたところ、思いのほか珍しい話のようだったので筆を取りました。 この記事では、状態管理ライブラリのJotaiを使ったReactアプリケーションの開発において、依存性注入（Dependency Injection, DI)をやりたいときのプラクティスについて紹介します。 先に結論を 「外部に依存する関数を保持するためのAtom」を定義して、具体的な実装はコンポーネント外部から渡せるようにすることで、「ドメイン層を外部に依存させない」「依存関係の一方向に保つ」を両立できる これによってドメイン層をクリーンに保つことができ、テストしやすさも向上する ただし、どのコンポーネントがどの関数を必要とするのかを分かりづらいなどの難点はある ※筆者がJotaiを愛用しているのでJotai前提で書いていますが、React標準のContext APIだけでも同様のことはできると思います モ
はじめに Reactの状態管理ライブラリであるReduxのコードを、Jotaiに書き換えて紹介している記事はなさそうだったので、簡単なカウンターアプリを題材にします。 Redux公式ドキュメントで紹介されているサンプルコード付きのものがあったのでそれを対象にします。 Redux Essentials, Part 2: Redux App Structure の The Counter Example App 今回はこちらをJotaiで書き換えたいと思います。 まずはReduxのコードを確認し、それに対応するJotaiでの書き方を確認します。 JotaiはReduxのようにボイラープレートな書き方にはならず、自由です。体験、超入門とタイトル付けしましたが、書き方は一例として見てください。細かなReduxやJotaiの説明は省きます。記事の最後にJotaiに関する記事のURLを載せてますので、
要約 「英語で意見を言おうとすると5歳児のようになってしまう」という課題を解決するEnglisterというサービスを開発した。 自分で使ってみたところ、10問程度の問題を解くだけでスラスラと英語で意見を言えるようになった。 実装はDeepL APIとNext.jsのAPI routeを使って爆速開発をした。 追加(2021/01/18) 記事を公開してから毎日機能追加をしています。２週間前からどれだけ変わったか是非見ていただきたいです。 背景にあった課題 「英語で意見を言おうとすると5歳児のようになってしまう」 英語にすごい苦手意識があるわけではない。TOEICは840点で、すごく簡単な日常会話なら問題なくできるので、海外旅行で困るということはなかった。しかし、仕事でたまに海外の人とやりとりをするときや外資系企業の英語面接で**「ちょっと難しい質問」**をされると、途端に5歳児になってしま
前回までのあらすじ React の軽量状態管理ライブラリ jotai に入門しました 今回は jotai の Provider と store の使い方について試したみたのメモです 環境 jotai v 2.0.3 React v 18.2.0 TypeScript v 4.9.3 結論 jotai の atom はデフォルトでは global として扱われる Provider の中で使用された atom は Provider の中で閉じられる Provider で囲われたコンポーネントから Provider の外の global な atom にはアクセスできない Provider の外の atom にアクセスしたい場合は、アクセス可能な atom を React の context に store として登録し context 経由でならアクセス可能 Provider で囲われてない
はじめに この記事は、「GUIプログラミングのベンチマークとして提案された7つの課題を題材に、React状態管理ライブラリのJotaiを学んでみよう」というテーマのJotai学習記事の第一回Counter編です。 完成したコードの解説がメインになります。もしご自身で実装してみたい場合はネタバレになってしまうのでご注意ください。 7GUIsとは 言語やライブラリ系のベンチマークといえば計算速度が評価軸にされることが一般的ですが、この７GUIsはいくつかの指標を軸に7つGUIアプリのお題を用意し、それをベンチマークとして提案しています。 2018年頃に話題となったようで、web系だとReact/MobXやSvelteが実装例として掲載されています。 詳しくはこちら。 7GUIs x Jotai の元ネタ Jotai作者の@dai_shiさんが過去に取り組んでおり、CodeSandboxで既に実
こんにちは。 開発本部 SJC共同開発推進室の中野です。 ReactでWebフロントエンドの開発を行う際、多くの開発者が「状態管理ライブラリ」について一度は頭を抱える思います。 ReduxやZustandそして本記事で取り扱うRecoilやJotaiのような多種多様な状態管理ライブラリが存在しますが、「これが最適解！」と断言できるものは存在しません。 そのため、ライブラリ選定で多くの開発者が混乱することでしょう。 （私自身もかなり迷いました… そこで今回は、現在担当しているプロジェクトで大活躍中の状態管理ライブラリ、Jotaiについて 「なぜJotaiを採用したのか」というバックグラウンドに焦点を当て、 RecoilとJotaiで迷っている方、あるいは「そもそもJotaiって何？」という方に向けて、Jotaiの概要とその魅力をご紹介します。 なぜ状態管理ライブラリが必要なのか そもそも「な
その状態管理はトップダウン型(Zustand的)？ボトムアップ型(Jotai的)？Reactのディレクトリ構成と共に考える short ver. - Qiita
その状態管理はトップダウン型(Zustand的)？ボトムアップ型(Jotai的)？Reactのディレクトリ構成と共に考える short ver.JavaScriptTypeScriptReactreduxRecoil 本格的に記事にするのはまだ時間がかかりそうなので、ショートバージョンでたまにはこちらに。 Jotaiを推して入るものの、ずっとディレクトリ構成に悩んで答えを出せずに居た所とある記事が目に止まりました。 その記事のおかげでどう考えるべきか踏ん切りがついたのでそれをツイートでまとめてみました。↓ これを見て自分の中の靄が晴れてきた感じ。 Jotai / Recoil は従来のReduxのようなトップダウンな状態管理ライブラリではなくボトムアップ型。 なので一元的にまとめるような構成は哲学に反してる気がする。 Single source of truth 、巨大なstoreから切り
Zustand v4.4.0はv5に向けて機能の廃止準備を進めました。以前の記事を参照。今回のv4.4.2はその一環ですが、基本コントリビュータが修正してくださっていて自分ではそれほど手を入れずに済んでいます。素晴らしい。 前回の記事で書いたように、今のところZustandの方がJotaiより人気のようです。 どちらもほぼ同じ課題を解決するライブラリで、基本的には好みで選ばれている印象です。あなたは、どっち？
Jotai Friendsを立ち上げてからあっという間に2ヶ月が経ちました。 今回は上記サイトの技術スタックと使用しているサービス等を紹介したいと思います。 Jotai Friends立ち上げについてのポエムはいつか書こうと思います。 上記サイトへメールアドレスの登録、Twitterアカウントのフォローして頂けると泣いて喜びます。よろしくおねがいします！ そしてJotaiをまだ使ったことがない人は是非この機会に触れてみてください🙌 Next.js on Cloud Run Next.jsを使ってCloud Runにデプロイしています。一人で作っていることや速度重視などの都合でTSではなくJSで書いてます。エディターの補完に助けられて辛うじて書き続けられてます。 特段変わったことをしてないので起動が若干遅いのが残念ポイントです。CDN噛ませられるっぽい？ので今後やっていきたいです。こんなや
Typed Vuexの状態：最もクリーンなアプローチ ボイラープレートが多すぎるため、またはTypeScriptサポートを完全に提供していないためにVuexの使用を避けていますか？読む あなたが使用しようとした場合Vuexをして活字体、あなたはそれが、このような単純な作業ではないということを理解しているでしょう。Vuexは、TypeScriptをすぐに使用するためのツールを提供していません。TypeScriptは、静的に型指定されたJavaScriptを記述できるため、多くの人にとって重要です。主な利点は、IDE型ヒットによる開発エクスペリエンスの向上です。 私たちが達成したいのは、間違ったミューテーション/ゲッター/アクションタイプまたは間違った引数を渡したときに通知するタイプセーフなVuexモジュールです。これはいくつかの異なる方法で可能です。外部ライブラリなしでこれを機能させる方法を
はじめにこちらは、2024年7月31日に開催された「フロントエンドTechCafe〜Reactでのプロダクト開発を語る〜」において、参加者の皆様から投稿いただいた質問のうち、時間の都合で当日お答えできなかったものに対し、イベント出演者の方々にインタビュー形式で回答いただき、それをまとめたものです。 出演者の紹介 松浦 昂生 (インタビュワー) フロントエンド開発2課 「楽楽明細」「楽楽電子保存」担当 2022年新卒入社後、フロントエンドエンジニアとして、入金管理v1の開発に参画。その後、楽楽電子保存の開発にも参画。 フロントエンドチームの活動を紹介するブログやFE_TechCafeなどのイベントを主体的に開催している。 趣味は筋トレ。💪 伊藤 彪我（楽楽電子保存代表） フロントエンド開発2課 「楽楽明細」「楽楽電子保存」担当 2020年新卒入社後、フロントエンドエンジニアとして楽楽電子保
フロントエンドアプリでは、ブラウザで開いている同じドメインの複数のタブ間で通信する必要がある場合があります。このユースケースの良い例は、eコマースWebサイトです。複数のタブを開いてさまざまな商品をレビューし、レビュー中にそれらをカートに追加するとします。用途として期待するのは、移動するすべてのタブでカートが更新されることを確認することです。 これが私が作成した簡単なデモの例です。このサンプルアプリを2つのタブで開き、カートにアイテムを追加してください。ご覧のとおり、アプリの状態はブラウザーのタブ間で共有されていますが、どうすればよいでしょうか。 少し背景：クロスウィンドウ通信 同じドメイン上の複数のウィンドウ間で通信する場合は、さまざまな方法があります。この通信を行う一般的な方法には、Window PostMessage API、Broadcast Channel API、およびLoca
モチベーション 移動できないモーダルウィンドウはよく見かけますが、マウスドラッグで移動できるものはあまり見かけないので自作してみました。 モーダルウィンドウのヘッダーをマウスドラッグで移動可能な仕様とします。 以下、モーダルウィンドウはモーダルを略します。 前提条件 react(=>16.8.0) 状態管理ライブラリとしてjotaiを使用 cssはtailwindcssで実装 typescriptで記述 モーダルの基底コンポーネントの実装 ここでは、汎用性を考慮し、まず/Modalディレクトリの中に基底となるコンポーネントを実装します。 フック /Modal/hook.tsに基底コンポーネント用のフックを実装します。 まず、使用するstateの型を定義します。 type ModalState = { left: number; // モーダルの左端の位置 top: number; // モ
テクノロジーの力で業界を底上げするチームを牽引！リードエンジニアを募集 - POST COFFEE 株式会社のWebエンジニアの採用 - Wantedly
Designer Web / Graphic / Movieなどクリエイティブデザインに関わることをやっています。 趣味が高じてアウトドアファッションのWebメディア運営やコワーキングコーヒースタンドMAKERS COFFEEの運営もしていました。 ストリートカルチャー、特にアメリカ西海岸の雰囲気が好きで、何度かカルフォルニアやニューヨークに滞在しながら仕事をすることもあります。 PostCoffeeが事業を通じて目指しているものは「美味しいコーヒーの新たな流通構造の創造による、持続的な消費拡大。」です。私たちは「美味しいコーヒー」のマーケットに新たな流通構造を創ることで、マーケットを活性化し、結果として産業全体にとってサスティナブルな消費を拡大していきます。 「美味しいコーヒー」を爆速で広めるために、テクノロジーを最大限に活用し、スタートアップといった手段で、コーヒーの再定義に挑戦してい
JotaiのDevtoolsを試してみよう！
はじめに こんにちは、エンジニアの籏野です。 突然ですが、皆さんは Web アプリを作る際にどのような方法で状態管理を行っているでしょうか？ 私は長く Redux を使っていましたが、よりシンプルに状態管理を行うことができる Jotai というライブラリを最近使い始めました。 Jotai への入門については様々な記事がありますので割愛して、本記事では Jotai の Devtools を使ってみた紹介をします。 試した内容は以下のリポジトリに置いていますので合わせてご確認ください。 Devtools とは Redux を利用している方ならきっと誰もが利用しているであろう現在の状態や過去の状態との差分をブラウザ上で確認できるあれです。 Jotai にも同様の Devtools があり、開発時にはぜひ入れておきたいですね。 Jotai の Devtools は上記の redux-devtool
Most Popular React Tech Stack in Professional Teams (Based on Data from 2022)
DEV Community is a community of 793,465 amazing developers We're a place where coders share, stay up-to-date and grow their careers. If you want to start a career as a React developer you're faced with a difficult decision: What libraries and tools should you use for your next project? The React ecosystem is huge. There's always a new hype and way too many contradicting opinions. How confusing...
Next.jsで加速するWebアプリケーション開発 - Forkwell Library #31に参加してきた - 天の月
forkwell.connpass.com こちらのイベントに参加してきたので、会の様子と感想を書いていこうと思います。 会の概要 会の様子 書籍の概要 Next.jsの特徴 ファイルベースルーティング ルートハンドラ サーバサイドレンダリング Next.jsのメリット Next.jsで加速するプロトタイピング Q&A use server/server actionについてどのようなユースケースで扱われるか聞いてみたい コンポーネント側のプレゼンテーション層とデータアクセス層の分離になにかデザインパターン・アーキテクチャを使っているか？ NetlifyなどVercel以外でデプロイする場合のTipsや注意点は？ Reactのみで良い場合、Next.jsを導入する場合はどのように判断するのか？ App Router/Page Routerどちらをどういう理由で選ぶか？ バックエンドに直接リ
2023 / 2022 / 2021 / 2020 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2023年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は累計スター数ではなく、『2023年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに総合ランキング1位は2016年～2019年にVue.jsが4連覇、2020年はDeno、2021年はzx、2022年はBunでした。 以下は2023年のランキング、2023 JavaScript Rising Starsの日本語訳です JavaScript ライジングスター 2023 8回目のJavaScript ライジングスターにようこそ！ ここでは、2023年のJavaScriptエコシ
【2024年最新版】 Reactの状態管理ライブラリ比較３選＋α（Redux, Zustand, Jotai） - Qiita
【2024年最新版】 Reactの状態管理ライブラリ比較３選＋α（Redux, Zustand, Jotai）JavaScriptTypeScriptReactreduxzustand Reactの一大テーマ、「状態管理」 私は今までReduxを使っていました。ただ、最近ライブラリがどんどん増えてきた中で色々試したくなったので、この機会に見てみます。 今回は、代表的な状態管理ライブラリ「Redux」、「Zustand」、「Jotai」で簡単なカウンターアプリを例にそれぞれメリット・デメリットを比較しました。 興味ある部分だけ見て自分に合うライブラリを見つける参考にしてもらえれば嬉しいです。
公開されているWebページのスナップショットの記録とドキュメント管理ができるサービス「Chronoter(クロノーター）」のβ版をリリースしました！ 構想は1年ほど温めていたのですが、 ここ半年ほどかけて一人で開発し、MVPと呼べるレベルのものが出来上がりました。 サービスと利用している技術についてご紹介します！ ぜひ興味を持っていただけたら、実際に使ってみて感想などいただけると嬉しいです。 リリースしたサービス できること 1. ウェブサイトのスナップショットを保存する 公開されているWebページの情報を保存して、いつでも再現できるようになります。 ページの内容が更新されたり、公開が終了した場合でも、スナップショット撮影時点での状態を確認可能です。 2. 保存したスナップショットにドキュメントやコメントを追加する スナップショットに対してMarkdown形式でドキュメントやコメントを追加
pmndrs/jotai： 👻 Primitive and flexible state management for React Jotai, primitive and flexible state management for React jotai は useState 的にグローバルに状態を管理する React のライブラリです。Redux 等の他のライブラリよりも小さくまとまっていて、React 組み込みのコンテキストよりも少ないコードで適切なレンダリング制御をしてくれます。 使い方の例は次です。 import React from "react"; import { Provider as JotaiProvider, atom, useAtom } from "jotai"; // ベースとなる宣言。この "hello"を atom を介して色々な場所で扱えます。 con
Jotaiとは Jotai, primitive and flexible state management for React React用の状態管理ライブラリ。 いいところ 1. 状態キャッシュと依存計算の最適化 ReactでいうuseMemoやuseEffectの第二引数のように、依存関係となる変数を明示した上で計算結果のキャッシュ(/computed property)を構築することができる。 具体的には、以下のようにgetter , setter に独自の記法が採用されている。 // 基準値 const sampleAtom = atom<number>(0) const sampleAtom2 = atom<number>(2) // get // sampleAtomやsampleAtom2の情報が変わらない限り再計算されない const getSampleAtom = at
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
【エンジニア超特化マッチングサービス】DokuPro(ドクプロ)のβ版リリース！技術も全て公開🎉 - Qiita
はじめに はじめは勉強がてら、自分の触りたい技術を使って好きなサービスでも作ろうかなと思って開発した個人開発でしたが、気づいたら個人開発の規模を遥かに超えていて、「月30万の売上を3ヶ月で達成する」という大きな目標と、「エンジニアという専門領域で困っている人と教えたい人をもっと簡単にマッチングさせられるような仕組みを世に生み出したい」という強い思いを掲げて「DokuPro(ドクプロ)」というエンジニアに特化したマッチングサービスを開発するに至りました！ そんなこんなで約半年ちょい開発を行い、2024年5月の頭に先行リリース(ウェイティングリスト登録)を行い、このたび本格的に先生・生徒としてサービスが利用できるように「private β版リリース」を公開しました！ ※「private β版」では、基本的な機能はすべて問題なくご利用頂けますが、正式リリースされる前のテスト段階としての公開の意味
導入 最近のReactの状態管理ライブラリがスケールした先はstore自体をVanilla化して脱Reactする傾向にある。 (Zustand, Jotai, tanstack query, ...etc) [1][2] 理由として、Reactのコンテキストでstoreを持つと以下のような問題がある。 useMemo, useCallbackなど本質的にノイズなコードが必要 Reactのimmutableな制約の影響を受ける storeをVanillaにすると storeに対するget, setを自然に表現できる インスタンスが変わらない(参照が同じ)なのでレンダリングのチューニングの余地がある そして火付け役としてuseSyncExternalStoreや、useフックがReact公式から提供された。 これを利用するとVanillaでもReact18以降のセマンティクスに対応してtran
2022年に使った技術・作ったもの・書いたものまとめ
使った技術・作った物・書いた記事で今年のエンジニア生活の振り返りです。技術選定などお役に立てば幸いです🐱 2022年に使った技術まとめ 今年主に初めて使ったものを振り返ってみようと思います。 React関連 2022年は実質Reactに入門しました。これまでも誰かの作ってくれた土台に乗っかってちょろちょろコンポーネント書いたりhooks周りの仕組みを作ったり、辛い辛い言いながらReduxと戯れたりはしていたんだけど、所詮は作ってもらった仕組みの上での話なので、ぶっちゃけあんまりわかってなかったのです。 今年はたまたまReactの新規プロジェクトをフロント部分の技術選定からまるっと任せてもらえたので、そこで検討・利用したライブラリやらをさくっと振り返ります。 React 18 まずは本体から。開発初期は17で作ってんだけど、途中で18が正式リリースされたので移行しました。React.FCと
MySQLを使っても会社は潰れない
MySQLを使っても会社は潰れない そんな話は聞いたことがない。AWS Lambdaが再帰実行されて潰れた会社の話は実際に聞いたことがあるが。 つい先日、私が書いた記事がとんでもなく大事になってしまい、大変な賛否を巻き起こした。 まさかこんなに読まれると思っていなかったので、大変驚いたのと同時にインターネッツの恐ろしさを体感した。 その中でも特に物議を醸したのが「MySQLを使うと会社が潰れる」というフレーズだった。 「MySQLを使うと会社が潰れる」とはなんだったのか 私がこのフレーズを選んだ理由は、言うまでもなく単に読者の注意を引く表現を使いたかったからである。 このフレーズがセクションの先頭にあったら、「なにをいってるんだこいつ？」と先を読んでみようという気になると思った。 そして続きを読んでいくと「なんだそういうことか」と意図を汲んで、それで同意するかしないかは人それぞれだろうなと
状態管理ライブラリ Jotaiの使い方
今回は React アプリケーションの状態管理ライブラリの中でも人気の高い "Jotai" の使い方を記事にしたいと思います。豊富な機能の中から本記事では以下の機能について記載しています。 atom, useAtom, useSetAtom, useAtomValue atomWithReset, atomWithLocation ( searchParams ) Read Only Atom, Write Only Atom Atom Creator 記事内に掲載しているソースコードは Github でも確認できます。 Jotai とは 🤔 Jotai は @dai_shi さんが作った React アプリケーションのための状態管理ライブラリです。軽量で使いやすく主に次のような特徴があります。 Atom（アトム）と呼ばれる小さな単位で状態を管理できる 使い方が直感的で、学習コストが低い
はじめに この記事は、「GUIプログラミングのベンチマークとして提案された7つの課題を題材に、React状態管理ライブラリのJotaiを学んでみよう」というテーマのJotai学習記事の第三回Flight Booker編です。 完成したコードの解説がメインになります。もしご自身で実装してみたい場合はネタバレになってしまうのでご注意ください。 7GUIsとは 言語やライブラリ系のベンチマークといえば計算速度が評価軸にされることが一般的ですが、この７GUIsはいくつかの指標を軸に7つGUIアプリのお題を用意し、それをベンチマークとして提案しています。 2018年頃に話題となったようで、web系だとReact/MobXやSvelteが実装例として掲載されています。 詳しくはこちら。 7GUIs x Jotai の元ネタ Jotai作者の@dai_shiさんが過去に取り組んでおり、CodeSandb
Zustand / Jotai / Valtioの比較
MOIVAというサイトがあって、そこでいくつかの指標で比較できます。 NPMダウンロード数 GitHubスター数 コミット数 まとめ zustand突っ走れ！ jotai追い付け！ valtio頑張れ！ リンク
TypeScript交流会！人気OSS作者と語るTypeScript (2024/09/20 19:00〜)
はじめに 【このイベントは何？】 このイベントは、TypeScriptをテーマにした交流会です。 最近TypeScript5.5がリリースされましたが、アップデートはしましたか？ 今回は、参加者全員にTypeScriptにまつわる何かを3分以内で発表して頂きます。 発表内容は、活動紹介、疑問、悩み、取り組み、調べたこと、Tips、などTypeScriptに関することであれば自由です。 基礎的な話からディープな話まで、TypeScriptの好きな所を語り合いましょう！ 参加者の皆様の新たな交流の場を促進する機会になれば幸いです。 【対象者は誰？】 TypeScript初心者、初学者、中級者以上のTypeScriptに興味がある、好き、仕事で使っているなど、幅広い層の方が対象です。 【前回の様子】 前回、参加者全員発表の形態でのイベントを開催し、参加者の皆様から、「雰囲気に馴染みやすかった」、
この.push()関数は機能しませんが、.concat()状態がJavaScript配列の場合、関数はReactで状態を更新できます。spread…演算子も同様です。 「最も一般的な質問の1つは、React状態の配列にアイテムを追加する方法です。状態を直接変更することは許可されていないため、単にアイテムを配列にプッシュすることはできません。」-ロビンWieruchで2018年のブログ記事 ときの状態が反応配列で、そのような使用して、更新状態にしようとしたときのように、配列に項目を追加する方法を明らかにされていませんフックに反応します。 この質問は、状態がアイテムのリストである場合に発生する可能性があります。この記事では、ユーザーが最近入力した検索クエリの例について説明します。 より複雑な例は、JavaScriptオブジェクトのリストを、学生のレコードなど、React状態の配列として格納する
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React + Jotaiで依存性注入(DI)したいときの我流レシピ
ReduxからJotaiへのマイグレーション体験（超入門）
英語面接で5歳児みたいなことしか言えないからカッとなってWebサービス作った【個人開発】 - Qiita
React 👻 jotai 👻 Provider 完全に理解した！ - かもメモ
7GUIsで学ぶReact状態管理Jotai | Counter 編 (1/7)
Reactの状態管理ライブラリ「Jotai」を採用した背景
Zustand v4.4.2をリリースしました、JotaiとZustandどっちが好みですか？
Jotai Friendsを構成する使用技術等の概要紹介
Typed Vuexの状態：最もクリーンなアプローチ
ラクス_FE_TechCafe ~Reactでのプロダクト開発を語る~ アフタートーク｜matsu
ブラウザウィンドウ間で状態を共有するためのReactフック
【React】マウスドラッグで移動可能なモーダルウィンドウを実装する
【JavaScript】JavaScript ライジングスター 2023 - Qiita
ウェブページ管理ツール「Chronoter(クロノーター)」をリリースしました【個人開発】 - Qiita
【React】手軽なグローバル状態管理ライブラリ jotai の紹介
jotaiを触ってみての良いところ/困ってること個人的メモ - Qiita
ベストな手法は？ Reactのステート管理方法まとめ - ICS MEDIA
ReactのSignalとAtomic State Managementの動向を追う
7GUIsで学ぶReact状態管理Jotai | Flight Booker 編 (3/7)
フックを使用してReact状態の配列に追加する方法