Hatena Blog Tags
はてなブログ トップ
状態管理
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

状態管理

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
KENTEM TechBlog•22日前

Jotaiの採用で可読性と保守性向上！：React.ContextからJotaiへの移行

こんにちは！KENTEMでフロントエンドエンジニアをしているS.W.です。 私が担当しているプロダクトでは、React Contextを用いた状態管理において、ひとつのContextに複数の状態変数が密集している状態でした。 その結果、 可読性の低下 保守性の悪化 パフォーマンスへの影響 といった課題が顕在化していました。 こうした問題を解決するために、まずは状態管理のアプローチを見直す必要があると考え、第一歩として状態管理ライブラリの導入を検討しました。 その結果、Jotaiを採用する決断をしました。 この記事では、Jotaiへの移行ポイントや実際の移行手順を、具体的なコード例を交えながら詳…

#状態管理#react#jotai#Webフロントエンド

関連ブログ

TECHSCORE BLOG•3ヶ月前

状態管理を Recoil から Jotai に移行した話

移行の背景と課題 弊社のコアプロダクトである Synergy! は、フロントエンドのフレームワークとして React を採用しています。React の状態管理には、Recoil というライブラリを利用してきました。 しかし SNS で、React 19 では Recoil が正常に動作しないという情報を入手しました。これは大きな課題です。以前から Recoil はメンテナンスの頻度が低下しており、今後も継続して使用することに不安を感じていたところでした。 もちろん、ビジネスの継続的な成長と最新技術への対応のため、React 19 へのアップグレードは避けて通れない道です。そんなこんなしているう…

#Next.js#状態管理#フロントエンド
Web開発における知見共有系ページ•1年前

REST APIの特徴と通常のAPIとの違い

REST APIとは 通常のAPIとの違い REST APIとは REST（Representational State Transfer）APIは、ソフトウェアアーキテクチャの一形態であり、ネットワーク上のリソースを操作するための手段です。 REST APIは、HTTPプロトコルを通じてクライアントとサーバー間で通信を行います。 RESTの原則に基づいて設計されており、リソース（たとえば、データやサービス）を一意のURI（Uniform Resource Identifier）で表し、HTTPメソッド（GET、POST、PUT、DELETEなど）を使用してリソースに対する操作を定義します。R…

#REST API#設計原則#通信方法#リソース指向#状態管理
Web開発における知見共有系ページ•1年前

React Queryのメリットと使いどころと

React Queryのメリット React Queryの書き方 React Queryの使いどころ React Queryのメリット React Queryは、Reactアプリケーションでデータの取得、管理、キャッシュなどを簡単に行うためのライブラリです。 React Queryのメリットはいくつかあります。1. 簡単なデータ管理: React Queryは、APIからデータを取得し、キャッシュし、更新するためのシンプルで一貫したAPIを提供します。 これにより、複雑なデータフェッチロジックをシンプルかつ効果的に実装できます。2. 自動キャッシュと再取得: React Queryは、データの…

#React Query#useQuery#キャッシュ#状態管理#DevTools
RAKUS Developers Blog | ラクス エンジニアブログ•3年前

【Recoil】Reactの状態管理ライブラリ基礎学習 ~リファクタ編~

こんにちは、ラクス入社1年目のkoki_matsuraです。 本日は前回記事の「【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~」で作成したToDoアプリのRecoil部分をリファクタするとともにパフォーマンスを上げるためにどうするかについてご紹介させていただきます。 もし、前回の記事を読んでいない方は下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp アジェンダは以下の通りになっています。 Recoilを用いたToDoアプリの問題点 複数人でRecoilを使うときに意図しない状態変更が行われる可能性 無駄な部分まで走る再レンダリング …

#Recoil#状態管理#フロントエンド#レンダリング
RAKUS Developers Blog | ラクス エンジニアブログ•3年前

【Recoil】Reactの状態管理ライブラリ基礎学習 ~第三部~

こんにちは！ラクス入社1年目のkoki_matsuraです。 本日は、Recoilの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の3部目です。 「Redux編」「Redux-Toolkit編」もあるので、下記のリンクから読んでいただけると嬉しいです。 tech-blog.rakus.co.jp tech-blog.rakus.co.jp Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書かせていただきました。

#Recoil#状態管理#JavaScript#フロントエンド
RAKUS Developers Blog | ラクス エンジニアブログ•3年前

【Redux-Toolkit】Reactの状態管理ライブラリ基礎学習 ~第二部~

こんにちは！ラクス入社1年目のkoki_matsuraです。 本日は、Redux-Toolkitの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 こちらの記事は「Reactの状態管理ライブラリ基礎学習」の2部目です。 前回の「Redux編」を読んでいない方は下記のリンクからお読みいただけると嬉しいです。 Reduxの仕組みを知ることでよりRedux-Toolkitの使いやすさが理解できると思います。 tech-blog.rakus.co.jp Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書か…

#Redux Toolkit#状態管理#JavaScript#フロントエンド
RAKUS Developers Blog | ラクス エンジニアブログ•3年前

【Redux】Reactの状態管理ライブラリ基礎学習 ~第一部~

こんにちは！ラクス入社1年目のkoki_matsuraです。 本日は、Reduxの基本的な状態管理や仕組みをTodoアプリ作成を通して、ご紹介させていただきます。 この記事は「Reactの状態管理ライブラリ基礎学習」全3部作の1部目です。 Reactの状態管理ライブラリを勉強している方、状態管理ライブラリについて簡単に知りたい方などのお役に立てればなと書かせていただきました。 アジェンダは以下の通りです。 Reduxとは 概要 構成図 Todoアプリ作成 仕様説明 プロジェクト作成 初期設定 ディレクトリ構成 Stateの定義 Reducerの定義 Storeの定義 ActionCreator…

#Redux#状態管理#JavaScript#フロントエンド
すらぼうの開発ノート•3年前

【Flutter】providerで状態管理をする方法

本エントリではproviderを用いた状態管理を以下の流れで説明する。 状態管理とは providerとは 概要 使用方法 データの準備 データの共有 データの取得 サンプルアプリ 動作 コード 解説 フォルダ構成 ポイント Todoインスタンスの共有 Todoインスタンスの一覧への追加 Todoインスタンス一覧の取得 Todoインスタンスの一覧からの削除 Todoインスタンスの更新 状態管理とは 本エントリで状態管理とはアプリケーション内の変数の値をどのように保存・更新・読み取り・削除するかを指す。 アプリ開発を進めると徐々にコードの規模が大きくなる。 その際に状態管理を適当に行っていると、…

#widget#provider#状態管理
すらぼうの開発ノート•3年前

【Flutter】shared_preferencesの使用方法

本エントリではshared_preferencesの使い方を説明する。 shared_preferencesとは shared_preferencesの使い方 準備 インストール インスタンスの作成 データ保存・読み取り キーについて int型（整数）のデータ 保存方法 読み取り方法 double型（実数、小数）のデータ 保存方法 読み取り方法 String型（文字列）のデータ 保存方法 読み取り方法 List（文字列のリスト）のデータ 保存方法 読み取り方法 bool型（ブール）のデータ 保存方法 読み取り方法 データの削除方法 shared_preferencesを用いたサンプルアプリ カ…

#package#Shared_Preferences#状態管理