FANTS ダッシュボードを支えるフロントエンド技術

こんにちは、株式会社スタメンで FANTS のフロントエンド開発を担当している @0906koki です。今回の記事では、本日リリースした FANTS ダッシュボードのフロントエンド開発で選定したフレームワークやライブラリ、ディレクトリ構成について解説します。目…

2021-06-30

Reactive variables【Apollo Client】による local state 管理

React GraphQL

はじめにはじめまして、株式会社スタメンのミツモトです。普段は、REST API をベースに React + Redux で開発しています。最近になり開発者体験の向上、プロジェクトのスピードアップという観点から、社内でスキーマファーストな開発に関心が集まっていま…

Redux/Storeのデータを正規化しパフォーマンスの向上を狙う

React redux

はじめにこんにちは、スタメンでエンジニアをしている手嶋です。普段は、React+TypeScriptでフロントエンドメインで開発をしています。弊社のプロジェクトではフロントエンドの状態管理ライブラリとしてReduxを使用していますが、直近のプロジェクトにおい…

react

Redux

2021-03-31

Reactでコンポーネントを実装する際に意識している4つの話

TypeScript React Redux

こんにちは。フロントエンドエンジニアの渡邉です。普段はReactとTypeScriptを書いています。今回は自分がコンポーネントを実装する際に意識していることについていくつか紹介できればなとおもいます。 ※ スタイリングに関して話すときはstyled-components…

2021-02-22

Reactでメモ化によるパフォーマンス改善を狙う

React frontend

はじめにはじめまして。株式会社スタメンでエンジニアをしております永井です。今回の記事ではReactでメモ化によるパフォーマンスを意識した実装方法について書きたいと思います。なぜパフォーマンスを意識した実装が大切なのでしょうか。なぜなら、ユー…

Rails+React環境下における、Hot Module Replacementの導入

Rails React Webpack

はじめにはじめまして。株式会社スタメンでエンジニアをしております、永井(@0906koki)です。以前の記事では、筋トレを週5でしていると書いていましたが、今は週2に減らして体をメンテナンスしています。今回の記事ではRailsとWebpack、そしてReactを使っ…

自動で画像最適化してくれるのうれしいよね(Next.js)

Next.js React

こんにちは。フロントエンドエンジニアの渡邉です。普段はReactとTypeScriptを書いています。今回の内容はタイトルにも記載されていますが、Next.jsを使った画像の最適化です。画像の最適化でやるべきことは多々あります。例えば、画像のサイズ・重さ調…

Next.js

react

2020-10-29

useSelectorとuseDispatchでcontainer componentを排除する

frontend TypeScript redux React

はじめにこんにちは。株式会社スタメンでフロントエンドエンジニアをしております@0906kokiです。 React Hooksが2019年にリリースされてから、Reduxの実装でコンポーネントがstoreと接続する方法に選択肢が増えました。具体的に言うと、今までconnect関数…

2020-09-30

Lighthouseを使ってパフォーマンス監視する

frontend React Lighthouse

こんにちは。フロントエンドエンジニアの渡邉です。普段ReactとTypeScriptを書いています。目次 Lighthouseとは Lighthouseを導入しようとした経緯使ってみる最後に Lighthouseとは Lighthouse is an open-source, automated tool for improving the per…