はじめに こんにちは！ テクノロジー戦略本部24年新卒の高橋です。 2023年の10月から内定者インターンを経験し、現在は開発3部CRMチームでフロントエンド(以後、FE)エンジニアとして働いております。 チーム内でFEの状態管理ライブラリを選定する機会があり、調査していく中で得た知見を共有したく、執筆に至りました。 少しでも状態管理ライブラリの選定に困っているFEエンジニアの参考になればと考えています。 はじめに 概要 前提 課題感 Context APIの思想とのズレ Context APIの記述量の多さ 状態管理ライブラリに求める要素 小さい単位で取り扱い可能 ボイラーテンプレートが少なく、APIが直感的で書き方の自由度が高くない 軽量 Reactアプリケーション内外での状態管理が可能 最終決定 検討候補 Redux Zustand Jotai Valtio 評価表 移行設計 既存C
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
Are you building or planning to build a React application, and need some way to handle your state? Then you are spoiled for choice. The state management scene might have been calming down after its initial explosion in 2014, but there are still plenty of both stable and cutting edge alternatives to look into. Redux has been the market leader for years now, but thanks to developments in both React
If you're bootstrapping a new React application today, ingrained habits might lead you to pick Redux. After all, you need to manage the state. Should you start with Redux, though? That has become a valid question. The latest versions of React have improved their offerings for state handling massively. In this post, I want to talk about a simpler approach, using the Context API instead. Let's Remin
【READYFOR】実践！フロントエンド分離戦略::発表資料 https://readyfor.connpass.com/event/198730/
さて、年末が近づいてきましたが今年も 「Redux 使うべき使わないべきか」という話で盛り上がりましたね。 僕もずっと悩める人なのですが、@f_subal さんの Tweet や @takepepe さんの Next.js の状態管理 2020 が示すように Read 要件・Write 要件の多さで使い分けるという指針には深く納得をしました。 Redux の代替になるツールやノウハウもより活発に出てきて、Redux 以外の選択肢を考えるにあたって様々な学びがあった 1 年でした。 自分も色々と Redux 以外の選択肢を試していたのですが、その中で「やっぱ Redux を使えばよかった」と思ったときがあったので、これから Redux を剥がそうと考えている人に向けてその失敗談を語りたいと思います。 自分も手探りで正解がわかっていないところなのでアドバイス・反論・指摘などがあれば頂きたいです
TypeScriptの世界を知る 前書き Node.jsエコシステムを体験しよう TypeScriptの書き方 変数 プリミティブ型 複合型 基本的な構文 基本的な型付け 関数 その他の組み込み型・関数 クラス 非同期処理 例外処理 モジュール console.logによるログ出力 中級のテクニック ジェネリクス 関数型指向のプログラミング クラス上級編 リアクティブ 高度なテクニック 環境ごとのTips（共通環境・ブラウザ以外） ソフトウェア開発の環境を考える 基本の環境構築 ライブラリ開発のための環境設定 CLIツール・ウェブサーバー作成のための環境設定 CI（継続的インテグレーション）環境の構築 成果物のデプロイ 使用ライブラリのバージョン管理 環境ごとのTips（ブラウザ環境） ブラウザ環境 ブラウザ関連の組み込み型 Reactの環境構築 create-react-appによる環境
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
Reactでのシングルページアプリケーションを作成していると、必ず意識しなくてはいけないのが状態管理です。Hooks APIの登場により、アプリケーションの状態管理方法にも選択肢が増えてきました。2023年のReactアプリケーションの状態管理方法はどのような選択肢が考えられるでしょうか？ 状態管理の選択肢 Reactの状態管理として本記事でには紹介している手法は下記の4通りになります。 ローカルステート（useState、useReducer）での管理 Hooks APIのuseReducer、useContextを使った管理 Reduxによる管理 Recoilによる管理 状態管理フレームワークは他にも選択肢がありますが、Reduxを紹介します。理由は、候補として挙がるライブラリの中でもっともシェア数が多く、知名度が高いためです。 下図は、主要なReact状態管理フレームワークのダウンロ
なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さく分割すべき、という考え方がまずある。 これは React に特有のものではなく、プログラミングの一般論として、ひとつひとつの関数は小さくするのがベストプラクティスだとされる。それには様々な理由があるが、単一責任の原則、疎結合、テスタブル、などがよく理由として挙げられる。 React のコンポーネントも同じで、肥大化しないように管理することが、保守しやすいアプリへの道だ。いかに適切な粒度でコンポーネントを分割できるかが、React を使いこなす上で重要となる。 だがコンポーネントを分割していくと、複数のコンポーネントで共通の値を扱う、という状況が発生しうる。 それにどのように対処するか、というのが、
本連載ではリクルートテクノロジーズにおける大規模Webサービスの改善についてお伝えしてきました。最終回となる本稿では前回までの話とは異なり、今後のリクルートのWebフロントエンド技術について紹介します。具体的には、Single Page Applicationのボイラープレート開発と、Fastlyなどに代表されるCDN導入に焦点を当てた内容をお送りします。 はじめに リクルートテクノロジーズでフロントエンドエンジニアを務めている可児潤也です。 リクルートテクノロジーズでは、レガシーなWebサービスのパフォーマンス改善やコードのモダナイズを行うとともに、R＆Dとして新規技術獲得にもチャレンジしています。それらの技術は実際にリクルートグループ内の新規案件や既存サービスのリプレースとして先行実装を行い、A/Bテストなどを通じて技術検証します。さらに案件を通じて得られた知見は共有し、効果的なものは
2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/07/14 追記 ディスカウント後の価格みたいな導出項目はselector (reselect)を使うとよいのでは https://redux.js.org/recipes/computing-derived-data - YonmanHasse のブックマーク / はてなブックマーク というコメントを頂き、確かに便利そうだったので導入した。 それに合わせてこの記事の内容もアップデートした。 追記終わり タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。 チュートリアル
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
2019/11/20 追記 当記事でメインに取り扱っていたライブラリ名が変更されました。Redux Starter Kit -> Redux Toolkit それに合わせて、本記事もアップデートしています。 追記終わり はじめに Redux Hooks がリリースされたおかげで、Redux の store とコンポーネントのつなぎ込みが簡単になりました。 今回は Redux チームが公式にリリースしている Redux Toolkit を利用すると、Action、Reducer 部分もかなり簡潔に記述できるというお話です。 Redux Hooks については以下の記事を参照してください。 Redux Hooks によるラクラク dispatch & states Redux Toolkit とは？ Redux チームが公式にリリースしているReduxを簡潔に記述するためのライブラリです。 ほ
こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登場により、複雑なアプリケーションをWebの技術を使って構築する場面も増えてきました。 これらの複雑なアプリケーションにおいては、既存のページ単位での状態管理の考え方では対応が難しくなります。 そこで今回は、具体的なフレームワークも取り上げながら、Webフロントエンドにおける状態管理のアプローチについて紹介します。 フロントエンドでの状態管理の複雑化 ページの単位を超えた状態の保持 モデルとビューによる処理の分割 イベントの管理が複雑にな
JSer.info #431 - jQuery 3.4.0がリリースされました。 jQuery 3.4.0 Released | Official jQuery Blog jQuery経由でscriptタグを作成するとnonce属性やnomodule属性が無視されていましたが、3.4.0ではこれが修正されています。 同時にjQuery.extendにPrototype Pollutionの脆弱性があったのが修正されています。 Node.jsにおけるプロトタイプ汚染攻撃とは何か - ぼちぼち日記 また、3.4.0ではjQueryのCSSセレクタエンジンであるSizzle特有のセレクタが一部非推奨化されています。 :first, :last, :eq, :even, :odd, :lt, :gt, :nthが非推奨となります。 jQuery 4.0.0ではSizzleを削除する予定で、これらの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
