Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの

今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる

import React from 'react' import { render } from 'react-dom' import { createStore } from 'redux' import { Provider } from 'react-redux' import Button from './components/Button' import rootReducer from './reducers' const store = createStore(rootReducer) render( <Provider store={store}> <Button /> </Provider>, document.getElementById('root') ) connect of React-Redux connectの主な役割は、Providerにセットされた、Red

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 以前　React Redux を用いた SPA 新規サービスを運用して得た知見と実装例　と言うテーマで発表した内容に、加筆修正して記事にしてみました。2年半くらい取り組んで見ての結果や感想をシェアできればと思います。 対象読者 SPA の開発に興味がある方 最近の WEB フロントエンド開発に興味がある方 ある程度 React や Redux を触ったことがある方、触りたい方 目的 具体的な実装例をもとに知見を共有し、Web 開発の役に立ててほしい おかしな実装や、もっと良い方法があれば、教えてほしい 内容 コードベースでの実装例の紹介

Nextremer Advent Calendar 2017の２日目。 一年ほどReact/Redux使って開発してきたので、ここらで一度現在のReact/Redux環境周りを晒してみる 歴史 2016/4〜 流行りにのって、React/Reduxを採用 この頃はMiddlewareにはredux-thunkを利用 2016/6〜 激しくスパゲティ化してしまい、thunkでの運用に限界を感じたため、thunkの利用を諦め、redux-sagaに鞍替え この頃から複数のプロジェクトでReact/Reduxの運用を開始 2017/6〜 Reduxの通常構成（Action, Reducer, Saga）の冗長さに辟易していたので、Ducksパターンの採用を検討。 その際、Moducksという素晴らしいライブラリを発見したため、これを採用した。 同時に、Reducerから取得した値をViewで加工

はじめに JavaScriptの基礎知識がだいたいわかったので、スキマ時間(4時間くらい)で簡単なブログのフロントエンドをReact+Reduxで構築した。 といっても、Modern React with Reduxというコースのセクション9を見ながら手を動かしただけ。JavaScript初心者だが、セクション9から見始めても特に問題なかった。 ソースコード 実装時のメモも含めて、以下に保存してある。 github.com/tomoyamachi/react-blog-sample できるようになったこと SPAだが、URLごとで表示するDOMを分ける 非同期でAPI通信を行う 非同期処理が完了してから、表示処理を実行する 送信フォームの管理(バリデーション含む) ESの言語仕様がざっくりわかる 一人である程度のプロジェクトをつくる 今後 実践でそのまま利用できそうなことが詰まっていた。作

こんにちは、nishayaです。 管理部のエンジニアとして、社内向けのシステムを作ったり、 社内で開催されるイベントでコーヒーを淹れたりしています。 社内向けだからこそできる冒険もある、ということで、 現在はReact/Reduxを用いたSPA開発を行っています。 今回のSpeeeKaigi(下記の記事を参照)では、 ReactとReduxを使ってシンセサイザーを作る話をしました。 tech.speee.jp 発表資料 使用したもの React Redux Web MIDI API Web Audio API Web MIDI APIを使用しているため、今回のターゲットブラウザはGoogle Chromeのみとしました。 そのため、webkit プレフィクス付きのAudioContextにも対応していません。 モチベーション 業務でSPA開発にReact/Reduxを使用するという決定をし

はじめに ブラウザでGUIアプリケーションを作らなくても良い牧歌的な時代は終わりつつあります。個人的な意見としてはブラウザはドキュメントビューアのままでいて、複雑なGUIアプリケーションはネイティブアプリケーションとして実装されてほしいのですが、そうは言ってもお仕事で人間にとって負担の低いUIを作っていく必要があるのです。 Railsでサーバアプリケーションを書きつつ管理画面はネイティブでなんてことはコスト的に実現できません。かといって長期的に運用されるシステムを作ると、システムを運用するためのUIが操作しやすいに越したことはありません。Bootstrapを使っててきとうなフォームを並べただけの画面を作って怒られた経験はありませんか？ たとえサーバ開発者だとしても、我々は使いやすいUIを求め続ける必要があります。 react, redux 複雑なGUIを作るためのフレームワークも乱立の時代

React Reduxを使ってプロダクトを作りはじめて、かれこれ半年くらい経ちます。 しかし、どうもうまく書けていない気がすることがときどきあり、悩んでいたところ、ツイッターで次のような助言をもらいました。 @__tai2__ 達人かどうかは微妙なところがありますが、ある程度の規模のコードはここにリンク集あります https://t.co/B79B5s1DTe — Yuki Kodama (@kuy) 8 December 2016 この記事は、上記のリンク集でまとめられている実際のReact Reduxプロダクトのソースコードを調査することで、筆者がふだんReact Reduxで開発をしていて感じる疑問への答えを探る試みです。 筆者が答えを得たいと思っている疑問は次の3つです 1 Storeはどんな具合に階層化すべきか Store初期化(hydration)用データの定義はどうすべきか

【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分

前書き このエントリーは Recruit Engineers Advent Calendar の 1日目の記事です。 www.adventar.org リクルートテクノロジーズのフロントエンド開発 リクルートテクノロジーズではいくつもの並行するタスクが走っていて、プラットフォーム基盤と呼ばれる基盤技術開発とインフラソリューションと呼ばれるインフラ開発、後はアプリケーション開発支援などのタスクが存在します。 アプリケーション開発支援の中でもウェブフロントエンド開発は目下のところ重要タスクとされており、色んなやり方をトライアルしています。 基本的には、 React Redux Node.js という組み合わせでフロントエンド開発をしています。 主には以前 ubb.jp というイベントで発表したこの資料に記載されている内容でやっていますが、諸々補足します。 リッチなウェブアプリケーションを作るた

はじめに 今回の記事は「電卓アプリで学ぶReact/Redux入門(実装編)」を読む前に知っておいたほうがいいReact.jsとReduxの概要についてまとめた記事になります。 特に状態管理の部分がReact/Reduxのアプリケーションを作成する上で重要になってくるので、React.jsの話は最小限にとどめ、Reduxの話を中心に説明をしたいと思います。 React.jsとは まずReduxの説明をする前にReact.jsについて説明をします。 React.jsとは、**MVCモデルでいうところのV(View)の部分の役割に特化したJavaScriptで書かれたライブラリです。**よくReact.jsと比較されるAngular.jsはMVC全ての役割を担います。 Viewのみの役割を提供するということもあり、学習コストが低く、それがReact.jsのメリットでもあります。 Compone

東京Node学園祭2016で話したブッキングテーブルのやつ

React Redux Starter Kit の概要を意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文：https://github.com/davezuko/react-redux-starter-kit/blob/master/README.md 廃止予定の警告 Reduxエコシステムの到来により始まったこのプロジェクトは、ユーザーのクイックスタートを支援することが目的でした。 それ以降、ツール群やベストプラクティスは劇的に進化しました。可能な限り最新の経験を得るために、多くのReactとReduxのコア開発者がサポートするcreate-react-appのようなものをチェックすることをお勧めします。 React Redux Starter Kit このスターターキットは、素晴らしいフロントエンドテクノロジーを多数搭載して稼働させるために設計されています

みなさんこんにちは、サイバーエージェントでフロントエンドを中心に開発しています原(@herablog)です。 アメブロでは、2016年9月にフロントエンドをJavaベースのアプリから、node.js・Reactベースのアプリへとシステムの移行をおこないました。本記事では、その移行へといたる経緯やゴール、システム設計、その結果についてお伝えします。 リリース直後に気づいているツワモノな方もいらっしゃいました。 アメブロのSP版がReactのSSRでフルリニューアルしたのを観測した — hr (@hrloca) 2016年9月1日 システム移行へといたる経緯 2004年から始まり、日本国内で最大規模のブログサービスとなったアメブロは、システムの肥大化や多数の関係者が存在したことによるモジュール・導線の急増などの理由により、ページ表示スピードが遅くなり、ページビュー数にも明らかに影響を与えるよう

時系列順に書いているので、話題がアッチコッチいきますが 現場のライブ感を重視しています！ プロジェクトの後半で、すごい優秀な方が入ってきてくれたのでそこからの受け売りも結構混じっています。神様ありがとう。 プロトタイピング 何は無くともまずはプロトタイプを作成しました。 今回はUIライブラリとしてMaterialUIを採用。 superagentを使って外部JSONファイルを読み込んで、Reactコンポーネントとして表示するだけ。 この時点でのコードレビューでの話題は主に、CSSをどうするのか問題。 MaterialUIにコンポーネント自体のstyleは既に定義済みだが、それだけでは足りないレイアウト調整が発生しそうという懸念でした。 結論は、コンポーネント内に直接定義してしまってOK。 実際作業を進めてみたところ、最初の想定よりは補助的なCSS記述は不要でした。 reduxの導入 作成す

編集履歴 ※ SessionStorage→LocalStorage（永続化される方はこちらだった） ※ OPTIONメソッド→OPTIONSメソッド ※ JWTについて少し調べたのでLocalStorage欄を追記 概要 Frontend Meetup vol.1 - SPAを語り尽くす会!のLT資料です。 フロントエンドのガチ勢には当たり前の内容になるかもしれません。 SPA探り探りなので、ご指摘あればコメントなどで頂ければと思います。 自己紹介（後で消す） 名前：しばたこ/uryyyyyyy 所属：株式会社オプト 得意分野：Scala/Play2/Spark/React 最近はReact/Redux/TypeScriptで書いてます。 materializeを導入したのですがjQueryなかなか辛い。。。 この資料で話すこと SPAでのセッション管理 CSRF対策 CORS SPAで

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?