UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog

2022/11/20 87 users ステートマシン 一気通貫 Creators’ blog 実装

はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説... 続きを読む

React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 - エンジニアHub｜Webエンジニアのキャリアを考える！

2022/10/21 122 users エンジニアHub React+Redux 負債 jQuery

React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債... 続きを読む

Reactにおける状態管理の動向を追ってみた

2022/08/21 158 users React Recoil 動向 redux 歴史

こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理について歴史を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどで扱えばいいのか？今どうなっているのかを調べたの... 続きを読む

React/Next.jsでの俺的ベストプラクティスを見てくれ

2022/08/20 235 users React Zenn ベストプラクティス コンポーネント 焦点

木瓜丸です。 最近になって、やっとNext.jsを上手く使いこなせてるんじゃないか？！と思えるようなコンポーネントの設計手法を見つけたので、Zennにまとめてみたいなと思います。 この記事で触れること この記事では、主にページ単位でどのように状態管理を行うのかに焦点を当てることにします。 コンポーネントの管理の... 続きを読む

Reactの状態管理の変遷に関する自分史 From 2014 To 2022

2022/03/05 126 users React バラつき アーキテクチャ 度合い 変遷

はじめに 2014年にReactを触りはじめて以降、2022年現在まで集中の度合いにバラツキはあるものの、ずっとReactでなんらかのアプリケーションを書いてきました。 その中で様々なアーキテクチャや設計に関する議論がありましたが、特に状態管理についての変遷を自身の体験をもとにまとめてみたいと思います。 多分に昔話的... 続きを読む

Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか - エンジニアHub｜Webエンジニアのキャリアを考える！

2022/01/13 271 users hooks React Server Components

Reactを取り巻く状態管理の潮流を学ぼう。HooksやServer Componentsなどの登場で何が変わるか Reactを取り巻く状態管理のアプローチは変化を続けていますが、いま知っておくべき手法とはどのようなものでしょうか。小林 徹（@koba04）さんに、現在、そしてこの先の状態管理について執筆いただきました。 こんにちは、小... 続きを読む

Next.js の状態管理 2020

2020/10/30 184 users Next.js SSG JamStack 花形 SSR

Next.js といえば、SSG（JAMstack）が最近は特に花形ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が関心ごとの中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなく、getServerSidePropsを使用することが推奨されています。getStaticPropsやgetServerSidePropsを利用する... 続きを読む

GraphQLの全体像とWebApp開発のこれから - Qiita

2020/02/24 258 users Qiita GraphQL クライアン DBMS 全体像

Help us understand the problem. What is going on with this article? TL;DR GraphQLはクライアント側とサーバー側の双方の複雑化を解決するために利用されてる フロントエンドにとってGraphQLはHTTP上で動く単一のDBMSの様に振る舞う フロントエンドの状態管理のベストプラクティスとしてのApollo Client クライアン... 続きを読む

React の状態管理についての論点整理 - 30歳からのプログラミング

2019/12/17 135 users React コンポーネント store 論点整理 前提

この記事はReact #2 Advent Calendar 2019の17日目の記事です。 なぜグローバルな Store を作るのか React アプリの設計論では、複数のコンポーネントで利用する値をどのように管理するか、というテーマがよく話題になる。 前提として、コンポーネントは小さく分割すべき、という考え方がまずある。 これは React に特有... 続きを読む

unstated-next による Redux に頼らない状態管理の考察 - Speaker Deck

2019/07/19 110 users redux Speaker Deck 考察

All slide content and descriptions are owned by their creators. 続きを読む

React Hooks + Redux Hooks + TypeScript で SPA を構築する - 30歳からのプログラミング

2019/07/05 146 users TypeScript サンプルアプリ SPA プログラミング

タイトルに書いた組み合わせで SPA を作るときにどのような設計にするのか、現時点での考えを記録しておく。 チュートリアルの次の一歩というか、現実的なアプリを構築する際の基本となる考え方。 状態管理とどう向き合うかが、主要なテーマになっている。 サンプルアプリ 具体的なコードがないと話を進められないので、... 続きを読む

SPAにおける状態管理: 関数型のアプローチも取り入れるフロントエンド系アーキテクチャの変遷 - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2019/05/23 528 users SPA エンジニアHub 変遷 Electron アプローチ

こんにちは、小林（@koba04）です。 本記事では、シングルページアプリケーション（以下、SPA）における状態管理について解説します。 GmailやTwitterは、SPAとして構築されている代表的なWebアプリケーションであり、スムーズなページ遷移をSPAによって実現しています。またElectronやPWA（Progressive Web Apps）の登... 続きを読む

Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita

2018/12/12 274 users Qiita TypeScript Vuex Vue.js

※ この記事は気合を入れすぎてアドベントカレンダーの担当日を超過しそうになったため、後日追記予定とした項目がいくつかあります。 基本的には抑えるべきポイントは全て書いてありますが、サンプルコードを今後追加予定のため、 こちら のレポジトリをウォッチしておくことをオススメします。 Vue.js Advent Calendar ... 続きを読む

React におけるローディングの状態管理について - freee Developers Blog

2018/12/05 69 users React ローディング ダイアログ コンポーネント 開閉

エンジニアの @_tohashi です。freee developers adevent calender 5 日目をやっていきます。 React などを使用した UI コンポーネントの実装、特に状態をどこで管理するかというのは実装者やアプリケーションの要件によって分かれがちなポイントであると思っていて、例としてはフォームの入力値、ダイアログの開閉、ス... 続きを読む

React Hooks での状態管理と副作用の表現 - mizchi's blog

2018/10/26 58 users React Hooks mizchi's blog 副作用

React Hooks は Stateless Functional Component でも setState 的な状態操作や componentDidMount のような操作を可能にするための仕様提案です。 既に開発ブランチに入っていますが、 現時点で公式に採用されたものではないです。リリース時にはAPIが変わる可能性があります。 React のメイン開発者の一人である sebma... 続きを読む

マッチングアプリにつきまとう状態管理のつらさ/torte_state // Speaker Deck

2017/10/19 103 users Speaker Deck マッチングアプリ

All slide content and descriptions are owned by their creators. 続きを読む

React + RxJSで始める状態管理 - VOYAGE GROUP techlog

2017/08/31 145 users techlog React TypeScript Fluct

2017 - 08 - 31 React + RxJSで始める状態管理 Tweet こんにちは、fluctの @nekoya です。 今日は現在開発に携わっている、俗に言う「管理画面」のWebアプリケーションのアーキテクチャをご紹介します。 このアプリケーションは React と RxJS を軸として作られており、コードは TypeScript を使って書いています。 アプリケーションを流れるデー... 続きを読む

Vue.jsとvuex、Fluxについて - 猫型の蓄音機は 1 分間に 45 回にゃあと鳴く

2017/03/21 79 users Flux 蓄音機 インジケータ Vuex 立て続け

2017 - 03 - 21 Vue.jsとvuex、Fluxについて 最近立て続けにそのあたりの話をする機会があったので。わたしの意見です。 vuexというかFluxに手を出すタイミング Vue.jsを利用していて、相互に関連のある二つ以上の状態を扱う必要が出てきたら、それはもうすでに「十分に複雑な状態管理」である たとえば、 API との通信中はインジケータを出したいので「通信中かどうか」を管... 続きを読む

アプリ開発と状態遷移の管理 - ninjinkun's diary

2016/02/02 428 users ninjinkun's diary 状態遷移 iOS 管理

2016 - 02 - 02 アプリ開発と状態遷移の管理 CROSS2016 に出るので、最近の自分の考えを整理しておく。 最近Reduxの Swift 実装である ReSwift を使って開発している。使った感想なども最後の部分に書いたけれど、このエントリーの本題はアプリの状態管理の話。 アプリは大きなシングルトン iOS 、 Android 共にアプリを実装しようと思うと大抵シングルトンが必要... 続きを読む

Reactを用いたアプリケーションアーキテクチャ：Fluxを再考する | プログラミング | POSTD

2015/11/27 162 users Flux アプリケーションアーキテクチャ Facebook

この記事では、UIレイヤとしてReactを用いてJavaScriptのアプリケーションの状態を管理する方法を探り、OmのようなClojureScriptライブラリのアイデアを用いてFacebookのFluxの抽象的なフレームワークを作り変えてみたいと思います。他のフレームワークやライブラリからReactに乗り換える人たちは、「ReactはUIのレンダリングに関する問題しか解決しておらず、状態管理と... 続きを読む

プロセスとスレッドの違い | Wake up! Good night*

2014/10/14 266 users スレッド プロセス Wake Up Linux カーネル

linux上のアプリケーションはプロセスとして起動されます。 プロセスを管理することはOS（ここではlinux）の重要な役割であり、プロセスのスケジューリング、割り込み、シグナル制御、優先度の制御、プロセスの切り替え、状態管理、メモリ管理などを行っています。 プロセスとは何でしょう？ プロセスはCPU上で実行されるもので、タスクを完了するために、Linuxのカーネルが制御するあらゆるリソースを使う... 続きを読む

MVCの先、状態管理、ジェスチャー

2014/05/03 195 users MVC emacs GUI ジェスチャー プログラマー

MVCの先、状態管理、ジェスチャー Presentation Transcript MVCの先、状態管理、ジェスチャー id:kiwanami 2014/05/03 at hatena 今日のお話 MVCについて一言 GUIと状態の話 ジェスチャーの設計と実装 ※Emacsの話はありません id:kiwanami UIデザイン、プログラマー （※EmacsもGUI） タッチUIデモ MVCについて... 続きを読む

ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理 - それはBooks

2012/09/23 89 users MVCアーキテクチャ クライアントサイド BOOKS 本書

Home > Programming > ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理 Older 『ステートフルJavaScript ―MVCアーキテクチャに基づくWebアプリケーションの状態管理』 本書は、クライアントサイド（ブラウザ）で JavaScript を使ってリッチなアプリを作る際のプラクティスを説明しています。 前半では、Java... 続きを読む