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

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

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

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

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

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

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

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

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

useSelectorとuseDispatchでcontainer componentを排除する

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

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

はじめに こんにちは、スタメンでエンジニアをしているミツモトです。 スタメンでは、Web アプリのクライアント側の状態管理に Redux というライブラリを採用しています。 Redux によって API のレスポンスやローカルで扱う値を自由に状態管理できますが、デ…

Redux Style Guide に学ぶ

はじめまして。株式会社スタメンでフロントエンドエンジニアをしている永井です。週5で筋トレをしています。 弊社のプロダクトであるTUNAGでは、フロントエンドをReact、Redux、TypeScript、サーバーサイドをRuby on Railsで実装しています。 今回の記事では…

Dynamic Reducerの実装方法

Recoil入門 こんにちは。フロントエンドエンジニアの渡邉です。 最近フロントエンド界隈で盛り上がっているRecoilについて学びました。 本記事は自分のRecoil入門のついでに記事にしたので、初級者向けになっています。 目次 Recoilとは 使ってみる API Refe…

Recoil触ってみた

はじめに こんにちは。スタメン エンジニアのミツモトです。 普段は弊社のプロダクトである「TUNAG」、「TERAS」の開発を行っており、プライベートではみそかつWeb(@misokatsu_web)というグループで活動しています。 みそかつウェブの活動として、5/30（土）…

GatsbyJS で みそかつウェブ の採用イベントサイトを作る

概要 はじめまして。スタメンでフロントエンドエンジニアをしている@0906kokiです。筋トレを週5でする筋肉エンジニアです。 普段はReactとTypeScriptで開発をしていますが、サーバーサイドのRailsもAPIを作成するタイミングで触ります。 弊社のプロダクトで…

redux-sagaと仲良くなろう！