サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説ReactreduxjotaizustandTanStackQuery 「Redux使ってるけど、もっと軽いの無いのかな...」 「Recoilって今でも現役なの？」 「ZustandとJotai、どっちがいいんだろう...」Reactの状態管理ライブラリ、みなさんも選択に悩んだことありませんか？確かに2025年の今、選択肢の多さに頭を抱えてしまいますよね。Redux、Zustand、Jotai、Recoil、Valtio、XState、TanStack Query...それぞれに「これがウリ！」というポイントがあって、どれを選べばいいのか正直迷っちゃいます。 特にReact 18の登場で状況が更
はじめに 今回は、いつも楽しく拝見させていただいている「100秒テック」のakiさんとコラボしました！ まずは、とにかく動画をご覧ください！ 他にも役立つフロントエンド関連の技術動画がたくさんあるので、いいねとチャンネル登録をよろしくね！（言いたかったｗ） この記事では、タイトル通り、React19のチートシートとして活用いただけるように仕上げました。またサンプルコードは、できるだけ理解しやすいようシンプルにして、React環境にコピー&ペーストするだけで動作するようにしました。 動画と合わせて、この記事もReact 19の理解を深めるのに役立てていただけると嬉しいです。ぜひ、最後までご覧ください！ アクション アクションは、React 19を理解する上で欠かせない重要な概念です。このアクションを基盤として、様々な機能が追加されています。そのため、React 19で追加された機能を活用する
TL;DRVue.jsはHTMLをJavaScriptの中に書かなくて済むので、可読性が高いですVue.jsは双方向バインディングをサポートしており、Reactみたいなsetter/getterみたいな無駄な作業は必要ありませんVue.jsはHTMLとCSSとJavaScriptを分けて記述することができるため、どこを修正すればいいか直感的ですReactはJSX内で{}と()が大量に出現するため、可読性が低く、タイピングミスしたときのバグ探しが大変です 2025年、ReactとVue.jsどちらを選ぶべきか？ 2025年、フロントエンド開発者にとってReactとVue.jsは引き続き主要な選択肢となっています。 1.ReactとVue.jsの基本的な違いReact 開発元: Meta（旧Facebook） アプローチ: ライブラリ（必要に応じて周辺ツールを追加） 学習曲線: 中
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/11/05のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Add connection() as a new dynamicAPI by gnoff · Pull Request #69949 ·vercel/next.js unstable_noStore()の代わりとなる新しいAPIである、connection()を導入するPRです。 connection()は、DynamicAPIを使用しないコンポーネントでも、実行時に動的にレンダリングしたい場合に使用します。通常Ma
はじめに 現在、React19 の RC 版がリリースされています。React19 では様々な新機能が発表されていますが、その中でも新しくなったuseTransitionについて紹介してきます。本記事では、 useTransition を使わない場合React18 までの useTransition を使った場合React19 で新しくなった useTransition を使った場合 の 3 つを比較して説明していきます。 useTransition とは useTransition は、React18 で導入されました。 useTransition は公式ドキュメントには「UI をブロックせずに state を更新するためのReact フック」と表現されています。ざっくりと「state 更新の優先度を下げるためのフック」と言い換えられるのではないかと考えられます。 ではuseT
結論 useEffectの中でsetStateを使いたくなったときは、まずは他の方法がないかを確認しよう！ 概要React で開発を行う際、（useState の）setStateと、useEffectはほぼ必ず使います。 しかし、これらを適切に組み合わせないと、コードの複雑さが増し、予期しないバグが発生する可能性があります。 特に、useEffectの中でsetStateを使用することはアンチパターンに繋がる目印になりやすいです。今回の記事では、コード例を紹介しながら図や動画を交えて解説していきます。 useEffectの中でsetStateを使うアンチパターン 1.無限ループの発生 useEffectの依存配列にsetStateで管理する状態を指定すると、その状態が更新されるたびにuseEffectが再度実行され、再度setStateが更新されるという無限ループに陥る可能性があります
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当しますreact: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 WhatReact では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
Next.js の App Router を中心に解説した書籍を執筆しました。「実践Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿するSNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、
useEffectEvent というreact フックをご存知ですか? まだ experimental なので、知らない方も多いと思います。しかし、このフックは 「なんで今までなかったんだろう?」と思ってしまうほど革新的 です。今回はその使い方の紹介などをします。 概要: useEffectEvent は useEffect とともに使うフック まず概要ですが、useEffectEvent は イベントリスナーを設定する useEffect とセットで使うフック です。 useEffectEvent を使うと、エフェクトとイベントリスナーを分離できます。そして、イベントリスナーの deps の変化時にエフェクトを再実行せずに済みます。 …とまあ、抽象的な説明だけでは分かりづらい と思うので、以降では useEffectEvent がどういう課題を解決するのか、また具体的にどういうケースで
基本的には以下のNext.js 14のブログを翻訳してまとめたものになります。 TL;DR Turbopack: App & Pagesルーター向けの5000のテストをパス ローカルサーバーの起動が53%高速化 Fast Refreshによるコードの更新が94%高速化 サーバーアクションの安定版: 進歩的に強化されたミューテーション キャッシュと再検証の統合 シンプルな関数呼び出し、またはフォームとネイティブに連動 部分的プリレンダリングのプレビュー版: 高速な初期の静的レスポンス+ストリーミングの動的コンテンツNext.js Learnの新規追加: Appルーターや認証、データベースなどを教える無料のコース アップデート詳細Next.jsコンパイラNext.js 13以降、Next.jsではPagesとAppルーターの両方でローカル開発のパフォーマンスを向上させるように取り組んでき
引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき:Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使えるように保存されます。 dependencies: CalculateValueのコード内で参照されるすべてのリアクティブ値の配列。リアクティブな値に含まれるのは、プロパティと状態、およびコンポーネント本体に直接宣言された変数と関数です。React用に設定されたリンターであれば、リアクティブな値がすべて依存関係に正しく指定されているかを
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducingreact.dev」参照)。本稿は、応用解説の「ReusingLogic with Custom Hooks」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React +TypeScript:React公式ドキュメントの基本解説『LearnReact』を学ぶ」をご参照ください。Reactには、useStateやuseContext、useEffectなどさまざまな組み込みフックが備わっています。けれど、もっと特定の目的に応じたフックが必要になることもあるでしょう。たとえば、つぎのような用途です。 データの取得。 ユーザがオンラインかど
yoshiko さんが提唱された 『React のステート 3 分類』 すなわち 「1. サーバーデータのキャッシュ, 2. Global State, 3. Local State」の 3 種類に分ける 考え方は、みなさんご存じかと思います。 この分類をさらに一般化かつ微細化して、React で登場する変数（または const, 引数）および状態が、それぞれ異なった長さのライフタイムを持っている、と捉えなおすことで、満たしたい仕様をシンプルな方法で、かつ精密に実現するコードを書けるようになります。 ライフタイムは大まかに 4 種類に分けられます。短→長（すなわちスコープの狭→広の順）に並べると、以下のようになります。 アクション ライフタイムは最も短い・スコープは最も狭い 「クリック」など、特定のアクションによる処理の間だけ 一度っきりの一時変数 レンダーReact コンポーネントのレ
はじめにReactでは、コンポーネント間でデータを受け渡すためにprops（プロパティ）を使用します。しかし、複数のコンポーネントを経由してデータを渡す必要がある場合、いわゆるpropsの"バケツリレー"が発生します。この問題を解消するための方法を説明します。 バケツリレーとは？ propsの"バケツリレー"とは、親コンポーネントから子コンポーネント、その子コンポーネントからさらにその子コンポーネントへと、データを手渡ししていくような状況を指します。これはコードの可読性や保守性を下げ、バグの原因となりやすいです。 ContextAPIを用いた方法Reactには、このバケツリレー問題を解消するための機能としてContextAPIがあります。ContextAPIを使うと、コンポーネントツリー全体でデータを共有でき、各コンポーネントがデータを直接取得することが可能になります。 まず、新
Today we are thrilled to launchreact.dev, the new home forReact andits documentation. In this post, we would like to give you a tour of the new site. tl;dr The newReact site (react.dev) teaches modernReact with function components and Hooks. We’ve included diagrams, illustrations, challenges, and over 600 new interactive examples. The previousReact documentation site has now moved to legacy.
React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦（@eielh）さんと、エンジニア採用広報の高瀬和之（@guvalif）さんによる解説です。 クラウド型ビジネスチャットツール「Chatwork」は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。 しかし、設計を
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっています。 今回は、現場で経験したReactアプリのパフォーマンス最適化についてまとめていきます。 この記事の対象者Reactの初心者から中級者Reactのパフォーマンス最適化について学びたい人 この記事の目標Reactのレンダリングの仕組みを理解するReactのパフォーマンス最適化の方法を知るReact.memo, useCallback, useMemoについて理解する おことわりReact.memo, useCallback, useMemoを使うコストについての詳しい解説 パフォーマンスの数値的な計測は行いません 上記の2点に関しては参考記事を該当箇所で貼ります。 Reac
少し前に話題になっていた以下のドキュメントをようやく読んだ。 beta.reactjs.org 記事を書いた時点でドキュメントはまだベータという位置づけ。 長いので先に目次を。 ⭐ は中でも特にへえ〜って思ったやつ。💬 はコメント。 How to remove unnecessary Effects Updating state based on props or state (props や state に応じて state を更新する) Caching expensive calculations (コストの高い計算をキャッシュする) ⭐ Resetting all state when a prop changes (props 変更時にすべての state をリセット) Adjusting some state when a prop changes (prop の変更時にある
初めに 何気にzenn初投稿なのでお手柔らかにお願いいたします。 業務でReactを使用しており、チャートツールの導入を行う際に良さそうなライブラリを調査しました。 ※スター数は調査時点での数です サンプル実装 全部ではないですが、棒グラフを自分で実装してみました。参考にどうぞ。 調査基準(選定基準)Reactベースであること 定期的にメンテナンスがされていること スター数がある程度多いこと チャートが見やすいこと できることが多いこと(チャート数が多いこと) 開発していてモチベが上がりそうなこと(モチベ大事) 今回調査したライブラリreact-chartjs-2 [特徴] Chart.jsベースのコンポーネント スター数: 5.3k Ant Design Charts [特徴] G2Plot, G6, X6, L7Plotベース(これらが何かは知らない) スター数: 1.2k マップ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
