React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦（@eielh）さんと、エンジニア採用広報の高瀬和之（@guvalif）さんによる解説です。 クラウド型ビジネスチャットツール「Chatwork」は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。 しかし、設計を
Reactにおける状態管理の動向を追ってみた
こんにちは、@nerusanです。 皆さんは、状態管理ツールなどは使っておられますでしょうか。 例えば、有名なところでは、Redux, Recoilなどがあります。 今回は、Reactにおける状態管理についての動向を知ることで、なぜ、Reduxが使われるようになったのか？何をReduxなどのグローバルな状態管理ライブラリで扱えばいいのか？現状どうなっているのか？を調べたので、記事にしたいと思います！ 自身の解釈なので、もしかしたら、誤ったことを言っている可能性もあるので、その際はご指摘いただければと思います m(- -)m SPAの流行り SPAとはSingle Page Applicationの略であり、新しいページに移動する際、サーバからページを再読み込みするのではなく、JavaScriptを使って、クライアント側のブラウザで動的にページを書き換えるアプリケーションを指します。ページご
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
Re-ducksパターン：React + Redux のディレクトリ構成ベストプラクティス
Re-ducks というディレクトリ構成のベストプラクティスについてまとめる。Re-ducksパターンを使うことで、React + Redux を用いた開発がよりメンテナンスしやすいものになる。 Ducks パターン 名前からもわかるように、Re-ducks は Ducks というパターンをベースにしている。 erikras/ducks-modular-redux Ducks パターンが解決すること： actionType、action、reducerが散らばっててつらい 結局のところ actionType、action、reducer は密結合なので、ducksパターンではこれら3つを1つのファイルにまとめる。 // widget.js // Actions const LOAD = 'my-app/widgets/LOAD'; const CREATE = 'my-app/widget
A Complete React Redux Tutorial for Beginners (2019)
Trying to understand Redux, it’s really confusing how it all works. Especially as a beginner. So much terminology! Actions, reducers, action creators, middleware, pure functions, immutability, thunks… How does it all fit together with React to make a working app? You can spend hours reading blogs and trying to sift through complex “real world” apps trying to piece it together. In this Redux tutori
Reduxで非同期処理を行う～ES2017のasync/await構文を使って実装する方法
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactに興味／関心があり、これから学び始める方 前提環境 筆者の検証環境は以下の通りです。 macOS High Sierra 10.13.3 Node.js v8.9.4／npm 5.6.0 React 16.3.1 redux 3.7.2 react-redux 5.0.7 async/awaitとは（1） async/await構文はECMAScript 2017で追加された、新しい文法です。その名の通り、 async キーワードと await キーワードの組み合わせで成り立っています。また、非同期処理の仕組みであるPromiseとも密接に連携しています。それぞれの要素について説明します。 Promiseとは async/await構文を説明するにあたり、Promiseは切り離すことができません。まずはPromise
JavaScript: Reduxが必要なとき/不要なとき（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: When (and when not) to use Redux – LogRocket 原文公開日: 2018/01/20 著者: Christian Nwamba サイト: LogRocket 2018/03/13: 初版公開 2021/06/03: 更新 Reduxが登場するまで、複雑なタスクを組むときのステート管理は相当つらい作業でした。Reduxは、Fluxというアプリケーションデザインパターンにヒントを得て、JavaScriptアプリでステートを管理するために設計されました。ReduxはReactと併用されることが多いのですが、ReduxはjQueryやAngular、Vueといった別のフレームワークとも併用できます。 Reduxのサイズは非常に小さい（依存関係も含めてわずか2KB）にもかかわらず、アプリの各コンポーネ
RailsエンジニアがReactを始めてSSRとReduxとTypeScriptを導入するまで | bitjourney Kibela
RailsエンジニアがReactを始めてSSRとReduxを導入するまで Roppongi.rb #3 "Rails x Frontend-Tech" 自己紹介 github.com/gfx BitJourneyでKibelaを開発 Speee, Inc. で技術顧問をしてる Reactは現職で初めて触った（2016年8月~） 今日の話 Kibelaのフロントエンドの話です。 読みはキベラ Markdownで書けて、フロー情報（Blog）とストック情報（Wiki）を区別して整理できる情報共有ツール これまでの話 新規Railsアプリに小さく導入するReact // Speaker Deck （dex1t, 2016/09/05） 小さく導入して学びながら開発を進める ⭕ Interactive UI componentをReactで＆jQueryも併用 ❌ viewをすべてReactで実装
[WIP] react-reduxについてドキュメントを読んだメモ - fukajun - DeepValley -
reduxの思想 統一されたデータストア アプリケーションの状態は1つのstoreオブジェクトが管理する stateはリードオンリー sateを変化させる唯一の方法はactionを発行すること 状態の遷移はただの関数によって行う stateを変更するための処理はreducersに定義します fluxの登場人物 actionCreator 最終的にactionを作るための処理 ajaxリクエストなどの処理を行い、その結果をのせたactionを作成する 例) 例えば、ajaxでコメント一覧を取得して { actionType: UPDATE_COMMENTS, comments: response.body.comments } のようなactionを作る action アプリケーションで何が起きたのかとそれに付随するデータ actionTypeと任意のデータを持つ単なるObject acit
ReduxとES6でReact.jsのチュートリアルの写経 - undefined
成果物 github.com 目的 ReduxとES6への入門。 React.jsを(ようやく)触る機会が出て、情報量の多いFluxxorとCoffeeScriptで入門してた。 いろいろ情報を集めると、flummoxが人気！！みたいなのを見て、覗いてみたら4.0 will likely be the last major release. Use Redux instead. It's really great.って書いてあってReduxを触ってみることにした。exampleとawesome-reduxを眺めたらどれも当たり前のようにES6で書かれていて、合わせて入門することにした。 Redux概要 まだかなり理解が怪しいんだけど、以下の図がイメージしやすかった。 André Staltz - Unidirectional User Interface Architecturesより S
モバイル上のJSフレームワークの実行可能性 – ReactとRedux | POSTD
私が好むと好まざるとに関わらず、誰もが私のWebアプリをiOS9の搭載されたiPhone 6SやNexus 6Pで、超高速Wifiに接続して使っているわけではありません。 現実は甘くありません。3Gでの接続や、古いハードウェアも珍しくありません。Googleのレポートによれば、 Androidのアクティブユーザは14億人 だそうです。彼らの多くは間違いなく、最先端ではないハードウェアを使っていることでしょう。 Androidのパフォーマンスについての Jeff Atwood氏の最近の記事 などを読んだことがあるなら、モバイルWebには希望がないように感じるかもしれませんね。 その記事からいくつか注目すべき文を引用します。 端的に言えば、今日最も高速なAndroidデバイスとして知られているものでも、新しいiPhone 6Sよりも5倍遅く、2012年代のiPhone 5上のEmberに比べて
人気のFluxフレームワークReduxをさわってみた - マルシテイア
fluxフレームワーク、今は Redux が一番アツい様子なので触ってみた。 github.com (追記 2015-10-03 18:15 APIや用語が大幅に変わったので更新した) Redux の経緯 2015-05-30 に公開された "The Evolution of Flux Framework" という記事がある。 medium.com Reduxはその PoC 的な実装だったんだけど、実用的ということでめっちゃ流行っているみたい。 Initial commit も 2015-05-30 だった。 Initial commit · rackt/redux@8bc1465 · GitHub 最近の flux フレームワークだと fluxible と flummox が人気だったけど、 flummoxのページには 4.0 will likely be the last major
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
DeNA Engineering - DeNAエンジニアのポータルサイト
［5］React.jsを使って、商用SNSアプリを作ってみた