ReactコンポーネントをブルブルさせながらReduxのパフォーマンスチューニング - カミナシ エンジニアブログ
はじめに こんにちは、カミナシ社でソフトウェアエンジニアをやっている浦岡です。 我々は「ノーコードでユーザー独自の現場アプリを作成できる」サービスを開発しています。 そのサービスのフロントエンドの開発にはReact×Reduxを使っているのですが、 サービス特性のため「Reduxのstateがファットになりがち」であったり「コンポーネント間のデータの依存関係が多くなりがち」といった状態に陥ります。 その結果、アプリの反応速度が遅くなりがちです... この記事では、上のような状態に陥った「React×Redux」アプリの高速化の一例をサンプルアプリを用いて説明します。 サンプルアプリについて 今回、Reduxのチュートリアルにあるカウンターアプリを改良し、下のような「モンスターの捕獲記録」アプリを作ります。 サンプルアプリについて Version1(コンポーネントをブルブルさせてみる) まず
若手エンジニアを不幸にしないための開発の「べからず」集 - Qiita
若手エンジニアを不幸にしないための開発の「べからず」集を書いてみました。 「若手エンジニアを不幸にしないため」とは書いていますが、若手に限った内容ではありません。 いろんな開発の「べからず」のために不幸になるのは、とりわけ若手が多いということを意識したためだと思ったからです。 ・若手には、方針の決定権がない。 ・若手は、組織の中で道具のように扱われてしまう場合がある。 ・(今の）若手は、将来も働き続けるための力を付けるための組織内での教育が、（昔ほど）なされなくなってきている。 ・コスト意識が乏しいので必要性が乏しいことについてまで残業前提の仕事のスケジュールを組織がたてることが多い。（その分野の理論を知っていれば自明のことを実験で証明することを要求されるのは苦痛である。） 設計指針の「べからず」 何ができれば十分かを明確にしない 開発目標は、何ができれば十分なのかを明確にしないまま、追加
AWS Lambda + API Gateway + CloudFrontでサーバレスに画像を配信する - matsukaz's blog
前回説明したLINE BOT（画像スタンプBOT）ですが、画像表示のためのアーキテクチャはいろいろ応用が効く部分なので、今回はもう少し詳しくご紹介します。 matsukaz.hatenablog.com 実現したいこと 画像スタンプBOTの場合、LINEのトーク上に画像を表示するためには HTTPS JPEG 縦横最大1024px 最大1MB という要件を満たす必要がありました。 インターネット上の画像はHTTPであったり画像サイズや容量が大きかったりと、必ずしも上記の要件を満たしているとは限らないです。 そこでAWS Lambda + API Gateway + CloudFrontを組み合わせることで、これらの要件を満たした画像配信を実現しました。 前回の図で言うと、右下の CloudFront → API Gateway → AWS Lambdaの流れです。 アーキテクチャ構築手順
End to End (e2e) Testing React Apps With Selenium WebDriver And Node.js is Easier Than You Think
End to End (e2e) Testing React Apps With Selenium WebDriver And Node.js is Easier Than You Think End to end (e2e) testing is the process of executing a tests scenario against a real browser to test the entire stack of a multi-tier application. The best tool for the job is Selenium, which can pilot any web browser using a standardized API, and is actively maintained. But writing e2e tests that work
レトロエンジニアのための近代Webフロントエンド事情 - Qiita
フロントエンド開発という言葉があちらこちらから聞こえてくる。 「反対語はバックエンド開発だから、サーバとかCUIじゃない、アプリとかGUIあたりのことを指す広い意味の言葉だよね。」 ・・・とか思ってたらとんでもない。 世の中ではJavaScript界隈を限定している風な使われ方をしている。 私のような C/C++ メインのレトロエンジニアは肩身が狭くなるばかりである。 本文は、近年のWeb技術に追いつこうと調査した結果のメモ書きである。 n番煎じの内容だが、Web業界にいない人間の視点 なので、私と同類のレトロエンジニア等、一部の人には新しい気付きが与えられるかもしれない。 詳しい人の添削・ツッコミは大歓迎。 詳細はリンク先に任せ、私が思う「わかりやすい順序」で、調べたことをざっと紹介していく。 きっかけ 読み飛ばしてもよい。 Reactを使うとなぜjQueryが要らなくなるのか 数年前、
The SoundCloud Client in React + Redux
Follow on FacebookIn the beginning of 2016 it was time for me to deep dive into the ReactJs world. I read tons of articles about React and its environment, especially Redux, so far. Several of my colleagues used it in side projects and on a theoretical level I could participate in the discussions. In my company we relied heavily on Angular 1 at this point. Since we are using it in a quite large co
JavaScriptでニューラルネットワーク : synaptic.jsですぐに作れる手書き数字分類器 | POSTD
ニューラルネットワークは複雑な非線形問題を解決する可能性を提供してくれるもので、信号の分類や時系列的な予測、パターン認識など様々な領域で利用できます。ニューラルネットワークは人間の脳から着想を得たモデルで、接続された複数のニューロンから構成されます。ネットワークには入力ニューロンの層(情報が入ってくるところ)と出力ニューロンの層(結果が得られるところ)、そしてその間にある「隠れ層」と呼ばれるいくつかの層があります。 より深い理解のために、 Neural Networks and Deep Learning をチェックすることをお勧めします。 ここ数年、ニューラルネットワークを色々な目的のために作成・訓練・利用する助けになるJavaScriptフレームワークがいくつも開発されました。このブログ記事では、画像の分類のためにネットワークをセットアップする方法を学んでいきます。 ニューラルネットワ
JavaScript(ES2015)でvarやletを使う必要はほぼ無い - id:anatooのブログ
ES2015でvarやletを使う場面はほとんど無いので、まずconstを使う。constだとダメな場合にはletを使う。 背景 ES2015では、変数を宣言するための文法としてconstとletが導入された。 const foo = 'foo'; let bar = 'bar'; constは再代入できない変数を宣言できる。letは再代入できる変数を宣言できる。 const foo = 'foo'; foo = 'hoge'; // ERROR let bar = 'bar'; bar = 'hoge'; // OK あれ、じゃあvarとletは同じなの？っていうとそうではなく、letやconstはvarとは違って、関数スコープよりも細かなブロック単位のスコープを提供する。例えばconstやletを使うと、if文やfor文などのブロック中でのみ有効な変数を宣言できる。 で、プロジェクトに
ReduxでlocalStorageにstateのスナップショットを保存する - Qiita
localStorageにstateのスナップショットを保存するRedux middlewareを作りました。 インストール import {createStore, applyMiddleware} from "redux"; import saveState from "redux-save-state/localStorage"; // combineReducersされたreducer達 import reducers from "./reducers"; // 保存先キー名 const key = "app-state-snapshot"; const store = applyMiddleware(saveState(key))(createStore)(reducers); // React Componentでdispatchが呼ばれるたびに保存 store.dispatc
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - jaredpalmer/formik: Build forms in React, without the tears 😭
https://github.com/airbnb/javascript/tree/master/react