React の新しい概念「トランジション」で React アプリの応答性を改善する - 30歳からのプログラミング
React v18 には多くの改善や新機能が盛り込まれる予定だが、そのなかでも特に注目を集めると思われるのが、Concurrent Features と呼ばれる一連の機能。 これらの機能を使うことで、コンポーネントのレンダリングについてより柔軟な設定が可能になり、上手く使えばパフォーマンスや UX の向上を実現できる。 この記事では Concurrent Features のひとつであるstartTransitionと、それを使いこなす上で重要な概念である「トランジション」について説明する。 この記事ではコンセプトの説明や具体例の提示のみを行う。詳細を知りたい場合は以下を参照。 一年前の記事であるため古くなっている部分もあるが、根幹は大きく変わっていないと認識している。 なお、上記の記事には「Concurrent Mode」という用語がタイトルに入っているが、これは今後は使われなくなってい
「3種類」で管理するReactのState戦略
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく
Reactのメモ化と、メモ化できないケースについて
寒空のなか商戦に駆り出されているゆきだるまのみなさん、ことしもおつかれさまです。 この記事は、Money Forward Engineering Advent Calendar 2021 24日目の記事です。 私は、クラウド会計ソフトの画面をなんとかする仕事をしています。 React や TypeScript を使ってがんばっています。 この記事について この記事では、 React を使う話でたまに出てくる「メモ化」について書きたいと思います。 また、標準で使える useMemo などメモ化のためのフックは便利ですが、使えそうで使えない状況もあるようなので、一緒にここでまとめたいと思います。 新しい技術の話でもなければ、会社での独自の取り組みでもないアドベントカレンダーらしからぬ話ですが、ここ２年くらいずいぶん苦労したわりにあまり欲しい情報の記事がすぐ見つからず、もしかしたら有益かもしれな
react-router 作り方
history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re
React Suspenseで不要な描画処理をなくす
function ProfileDetails() { const user = resource.user.read(); // throw promise here return <h1>{user.name}</h1>; } この仕様自体、それだけで記事になるほど面白いです。（ここでは割愛します。） React Freeze React Freezeは、そんなSuspenseを利用したライブラリです。 元々React側は、データ取得の際に使うことが主なユースケースと言っていたのに対して、このライブラリの目的は、ある瞬間にユーザーに表示されていないアプリの部分について、不要な再レンダリングを避けることとなっています。 どうやって実現しているのでしょうか？ 実は、ライブラリの実装もシンプルで興味深いです。 // ref: https://github.com/software-mansi
TanStack Router
Modern and scalable routing for React applicationsA fully type-safe React router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs. Get Started Typesafe & powerful, yet familiarly simpleTanStack Router builds on modern routing patterns made popular by other tools, but has been re-engineered from the ground up to be 100% typesafe without compromising on D
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Reactステート管理ライブラリ Recoil入門（typescript）（UseContextの比較も） - Qiita
Recoilとは RecoilはReact向けのステート管理ライブラリです。 Reactを開発したFacebook製のライブラリです。 Reactのステート管理ライブラリといったらReduxですが、 プロジェクト途中で導入する場合、非常にコストがかかります。 一方、RecoilはReact Hooksライクにコーディングが行えるため、学習コストも低く、 コード量も非常に軽量なので、導入が容易に行えるのが特徴です。 やること Recoilを用いて、メモ管理Webアプリを作ります。 また、類似ライブラリであるUseContextとの比較も行います。 前提条件 環境情報は以下になります。 端末環境 OS チップ
React Hook Form はどのように再レンダリングを最適化しているのか？
【READYFOR×コミューン】業務に活かせるReact LT & 座談会 https://readyfor.connpass.com/event/224586/
A Visual Guide to React Rendering - Cheat Sheet
When does react component re-render? What can cause the re-render, and how to prevent unnecessary renders? Here is a quick cheat sheet you can refer to whenever you find yourself asking these questions. This article serves as a table of contents for a Visual Guide to React Rendering series. Every section of the cheat sheet links to the correspondent chapter of the guide that explores a topic in de
React+TSプロジェクトで便利だったLint/Format設定紹介
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「linter/formatter」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが 株式会社ナレッジワーク というスタートアップで開発・運用しているプロジェクトにおいて便利だったLint/Format関連の設定についてご紹介していきます。 使っているのは、TSのlintのためにESLint, CSSのlintのためにStylelint, 主なファイルのformatのためにPrettierです。 ESLint pluginsとextendsだけどんなもの入れてるか載せておきます。 "plugins": [ "strict-dependencies", // 後述 "unused-imports", // 後述 ], "extends": [ "a
ReactのCSSの選択肢を比較してみた
世はReact with CSS 戦国時代...! Pure CSS CSS Modules Styled Components(CSS in JS) Emotion(CSS in JS) Linaria(CSS in JS) Tailwind CSS Framework(Chakura UIなど) と、Reactと共に使うCSSの選択肢は非常に多岐に渡り、学習者を混乱に陥れることもしばしばかと思います。 私が実装経験がない Tailwind CSS Framework については今回語りませんが、それ以外のCSS実装方法を全く同じコンポーネントを実装することで比較してみました。 下記が実際にコーディングしたGitHubになります。 Pure CSS 通常のCSSです。 CSSは全てがグローバルで管理されてしまうので保守・管理にコストがかかり、崩壊しやすいです。 なのでBEMなどのCSS設
ログラスのReactの技術選定について🐳
はじめに こんにちはログラスのフロントエンドエンジニアの @Yuiiitoto です。 「次世代型経営管理クラウド」のSaaSを開発しています。 今回Reactを使って開発しているログラスのフロントエンドがどういう技術を使っているのか、なぜそれを選んだかについて解説していきます。 Reactはライブラリの数が豊富な反面で群雄割拠している領域が多く、技術選定がとても大変です。 同じ悩みを抱えるフロントエンドエンジニアの方に少しでも力になれればと思って記事にしました。 ログラスのフロントエンド 似たようなサービスの場合に特に参考にできる場合が多いと思うので、記事の前提としているサービスについて少し説明します。 ログラスはいわゆるtoBのSaaSの業務システムみたいな立ち位置です。 ほぼ全てのページに認証が入り、画面の中の要素はtoCのサイトより多めです。 Next.jsで構成されていて、SSG
すごいReactフック8選 - Qiita
はじめに React.jsは現在、フロントエンド開発者に最も人気のあるJavaScriptライブラリです。Facebookが開発し、オープンソースのプロジェクトとして提供されているReactは、世界中の開発者や企業が使用しています。 Reactは、シングルページアプリケーションの構築方法を大きく変えました。その最大の特徴の1つがフックです。フックは2019年に導入されたもので、状態処理の時に、クラスコンポーネントの代わりに関数コンポーネントを使用できるようになりました。組み込みのフックに加えて、Reactは独自のカスタムフックを実装する方法を提供しています。 ここでは、アプリケーションやプロジェクトで使用できる、カスタムフックとその実装に関するお気に入りをいくつか紹介します。 1. useTimeout 宣言型アプローチでsetTimeoutを実装できます。まず、コールバックと遅延を受け取
React 18とはなにか、Fiberの観点から理解する
React 18はα版で、主にライブラリ作者のために公開されています。ユーザーが急いで知る必要はありません。この記事は、いわばオタク向けです。 React 18とはなにか、Fiberの観点から理解する React 18では目新しい機能が多く導入されます。たとえば追加されるものにはConcurrent RenderingやstartTransition、SSRの改善やSuspenseの一部挙動変更などがあります。 私はこれらの機能について解説した記事をいくつも読みましたが、いまいちピンと来ませんでした。 これらが凄いのは伝わるけれど、どうして必要なのか？ なぜこれらの機能が一度に追加されたのか？ React Core Team はどこを目指しているのか？ おそらく、多くの方がこれと同じ疑問を抱いていると思います。これらの機能追加の基本コンセプトは何でしょうか。この記事では、主に上2つの疑問に
Airシフトにおけるパフォーマンス改善とリファクタリング事例 | Recruit Tech Blog
はじめに リクルートテクノロジーズの 辻 健人です． GitHub では maxmellon で活動しています． 今回は，『Airシフト』における パフォーマンス改善とリファクタリングの事例を一つずつ紹介したいと思います． 『Airシフト』とは 『Airシフト』は，やりとりも作成も楽になるシフト管理サービスです． 直感的に操作できるシンプルな画面で，カンタンにシフト作成が行えます． 技術スタックとしては， React/Redux ，チャット機能に WebSocket， SSR やユーザ認証，ファイルダウンロードにBFFアーキテクチャを採用しています． 『Airシフト』はシフト表の作成や管理ができるだけでなく，大きな機能の一つとして 『シフトボード』を活用したチャットを行うことも可能です． 例えば，急用で別のスタッフにシフトを変わってもらうときや，シフトの希望を提出する締め切り前にチャットを
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
組織フェーズを見据えたWebフロントエンドのアーキテクチャと変遷
より速い WEB を目指す Next.js / nextjs-make-the-web-faster
GitHub - alan2207/bulletproof-react: 🛡️ ⚛️ A simple, scalable, and powerful architecture for building production ready React applications.
