Reactコンポーネントが「純粋である」とはどういうことか？ 丁寧な解説
Reactにおいては、コンポーネントは純粋であるべきだとされています。これはReactのルールの一部であり、ルールを守らずに非純粋なコンポーネントを作った場合、さまざまな不都合が発生する恐れがあります。 書いた通りの挙動にならない（ように見える） 今はうまく動いていたとしても、関係ない箇所を修正すると急に壊れる 最適化（React Compiler）によって挙動が変わり、バグの原因となる Reactの新機能と互換性が無くなり、新機能の恩恵を受けられなくなる Reactのアップデートで壊れてしまったり、破壊的変更の影響を受けたりする 単純にコードの可読性が低下し、保守性が悪化する では、コンポーネントが “純粋” であるとは、具体的にどういうことを指すのでしょうか。Reactを使いこなしている人は経験的にこのことを理解していますが、正確に説明しろと言われると困る人も多いのではないでしょうか。
Next.js 15 和訳
雑に翻訳しました。 意訳がめちゃくちゃ含まれているので注意です。 Next.js 15が正式に安定版としてリリースされました。 このリリースはRC1とRC2のアップデートをベースにしています。 安定性に重点を置きながら、気に入っていただけるようなエキサイティングなアップデートを追加しました。 今すぐNext.js 15をお試しください。 # 新しい自動アップグレードCLIを使用する npx @next/codemod@canary upgrade latest # もしくは手動でアップグレードする npm install next@latest react@rc react-dom@rc また、今週木曜日（10月24日）のNext.js Confでは、次の新機能についてもご紹介します。 Next.js 15の新機能は以下の通りです。 @next/codemod CLI: Next.jsとR
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita
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秒テックの「React 19 がでた」を見たので、チートシートを作成してみました
はじめに 今回は、いつも楽しく拝見させていただいている「100秒テック」のakiさんとコラボしました！ まずは、とにかく動画をご覧ください！ 他にも役立つフロントエンド関連の技術動画がたくさんあるので、いいねとチャンネル登録をよろしくね！（言いたかったｗ） この記事では、タイトル通り、React19のチートシートとして活用いただけるように仕上げました。またサンプルコードは、できるだけ理解しやすいようシンプルにして、React環境にコピー&ペーストするだけで動作するようにしました。 動画と合わせて、この記事もReact 19の理解を深めるのに役立てていただけると嬉しいです。ぜひ、最後までご覧ください！ アクション アクションは、React 19を理解する上で欠かせない重要な概念です。このアクションを基盤として、様々な機能が追加されています。そのため、React 19で追加された機能を活用する
【2025年版】ReactとVue.jsどちらを選ぶべきか？【アドベントカレンダー2025】 - Qiita
TL;DR Vue.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） アプローチ: ライブラリ（必要に応じて周辺ツールを追加） 学習曲線: 中
Next.jsのdynamicIOなど: Cybozu Frontend Weekly (2024-11-05号)
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/11/05のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 Add connection() as a new dynamic API by gnoff · Pull Request #69949 · vercel/next.js unstable_noStore()の代わりとなる新しいAPIである、connection()を導入するPRです。 connection()は、Dynamic APIを使用しないコンポーネントでも、実行時に動的にレンダリングしたい場合に使用します。通常Ma
React19で新しくなったuseTransition
はじめに 現在、React19 の RC 版がリリースされています。 React19 では様々な新機能が発表されていますが、その中でも新しくなったuseTransitionについて紹介してきます。 本記事では、 useTransition を使わない場合 React18 までの useTransition を使った場合 React19 で新しくなった useTransition を使った場合 の 3 つを比較して説明していきます。 useTransition とは useTransition は、React18 で導入されました。 useTransition は公式ドキュメントには「UI をブロックせずに state を更新するための React フック」と表現されています。ざっくりと「state 更新の優先度を下げるためのフック」と言い換えられるのではないかと考えられます。 ではuseT
useEffectの中でsetStateを使うときはアンチパターンを疑おう
結論 useEffectの中でsetStateを使いたくなったときは、まずは他の方法がないかを確認しよう！ 概要 React で開発を行う際、（useState の）setStateと、useEffectはほぼ必ず使います。 しかし、これらを適切に組み合わせないと、コードの複雑さが増し、予期しないバグが発生する可能性があります。 特に、useEffectの中でsetStateを使用することはアンチパターンに繋がる目印になりやすいです。今回の記事では、コード例を紹介しながら図や動画を交えて解説していきます。 useEffectの中でsetStateを使うアンチパターン 1.無限ループの発生 useEffectの依存配列にsetStateで管理する状態を指定すると、その状態が更新されるたびにuseEffectが再度実行され、再度setStateが更新されるという無限ループに陥る可能性があります
今話題となっているReact 19のSuspenseの変更内容を詳しく見てみました。
はじめに 以下のツイートが発端でした。 投稿者は、React Query のメインコントリビュータの tkdodo さんです。 React 19 に含まれる変更にある異変を気づきました。 変更は以下に該当します react: Don’t prerender siblings of suspended component #26380 リリースノートに隅っこにありました。 この変更は RFC なしで含まれました。該当 PR は以下 What React では、 Suspense を使って、非同期処理を行うコンポーネントやReact.lazyによってコンポーネントの遅延ロード時に、読み込みを完了するまでフォールバックを表示させることができます。 以下のような実装があるとします。 import { lazy, Suspense, useState } from "react"; const Av
実践Next.js - App Router への理解を深めるために -
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 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種類のロジックについて整理する。 レンダリング レンダリングをする際、コードはpropsとstateを受け取り、変換し、画面で表示したいJSXを返す。コードのレンダリングは結果のみを計算するべきでそれ以上のことをするべきではない。 イベントハンドラ イベントハンドラはコンポーネントの中にある関数で、Input Field の更新やユーザを他の画面へ誘導したり等、単純な計算以上の役割を担う。イベントハンドラはユーザの行動（ボタンクリック等）による、
useEffectEvent フックを使って useEffect ともっと上手く付き合おう
useEffectEvent という react フックをご存知ですか? まだ experimental なので、知らない方も多いと思います。しかし、このフックは 「なんで今までなかったんだろう?」と思ってしまうほど革新的 です。今回はその使い方の紹介などをします。 概要: useEffectEvent は useEffect とともに使うフック まず概要ですが、useEffectEvent は イベントリスナーを設定する useEffect とセットで使うフック です。 useEffectEvent を使うと、エフェクトとイベントリスナーを分離できます。そして、イベントリスナーの deps の変化時にエフェクトを再実行せずに済みます。 …とまあ、抽象的な説明だけでは分かりづらい と思うので、以降では useEffectEvent がどういう課題を解決するのか、また具体的にどういうケースで
Next.js 14まとめ
基本的には以下の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ルーターの両方でローカル開発のパフォーマンスを向上させるように取り組んでき
React + TypeScript: useMemoフックの使い方と使いどころ - Qiita
引数 calculateValue: キャッシュする値を計算する関数。純粋で、引数は取らず、任意の型の値を返さなければなりません。Reactは、まず最初のレンダー時に関数を呼び出し、値が返されます。次回以降のレンダリングについてはつぎのとおりです。 直前のレンダー時と依存値が変わっていないとき: Reactは前と同じ値を返します。 直前のレンダー時から依存値が変わった場合: calculateValueが呼び出され、返されるのは新たな結果です。値はあとで使えるように保存されます。 dependencies: CalculateValueのコード内で参照されるすべてのリアクティブ値の配列。リアクティブな値に含まれるのは、プロパティと状態、およびコンポーネント本体に直接宣言された変数と関数です。React用に設定されたリンターであれば、リアクティブな値がすべて依存関係に正しく指定されているかを
React + TypeScript: カスタムフックでロジックを再利用する - Qiita
React公式サイトのドキュメントが2023年3月16日に改訂されました(「Introducing react.dev」参照)。本稿は、応用解説の「Reusing Logic with Custom Hooks」をかいつまんでまとめた記事です。ただし、コードにはTypeScriptを加えました。反面、初心者向けのJavaScriptの基礎的な説明は省いています。 なお、本シリーズ解説の他の記事については「React + TypeScript: React公式ドキュメントの基本解説『Learn React』を学ぶ」をご参照ください。 Reactには、useStateやuseContext、useEffectなどさまざまな組み込みフックが備わっています。けれど、もっと特定の目的に応じたフックが必要になることもあるでしょう。たとえば、つぎのような用途です。 データの取得。 ユーザがオンラインかど
React の変数・状態をライフタイムで分ける――アクション/レンダー/コンポーネント/ファイル
yoshiko さんが提唱された 『React のステート 3 分類』 すなわち 「1. サーバーデータのキャッシュ, 2. Global State, 3. Local State」の 3 種類に分ける 考え方は、みなさんご存じかと思います。 この分類をさらに一般化かつ微細化して、React で登場する変数（または const, 引数）および状態が、それぞれ異なった長さのライフタイムを持っている、と捉えなおすことで、満たしたい仕様をシンプルな方法で、かつ精密に実現するコードを書けるようになります。 ライフタイムは大まかに 4 種類に分けられます。短→長（すなわちスコープの狭→広の順）に並べると、以下のようになります。 アクション ライフタイムは最も短い・スコープは最も狭い 「クリック」など、特定のアクションによる処理の間だけ 一度っきりの一時変数 レンダー React コンポーネントのレ
ReactのPropsのバケツリレーをなくす方法 - Qiita
はじめに Reactでは、コンポーネント間でデータを受け渡すためにprops（プロパティ）を使用します。しかし、複数のコンポーネントを経由してデータを渡す必要がある場合、いわゆるpropsの"バケツリレー"が発生します。この問題を解消するための方法を説明します。 バケツリレーとは？ propsの"バケツリレー"とは、親コンポーネントから子コンポーネント、その子コンポーネントからさらにその子コンポーネントへと、データを手渡ししていくような状況を指します。これはコードの可読性や保守性を下げ、バグの原因となりやすいです。 Context APIを用いた方法 Reactには、このバケツリレー問題を解消するための機能としてContext APIがあります。Context APIを使うと、コンポーネントツリー全体でデータを共有でき、各コンポーネントがデータを直接取得することが可能になります。 まず、新
Introducing react.dev – React
Today we are thrilled to launch react.dev, the new home for React and its documentation. In this post, we would like to give you a tour of the new site. tl;dr The new React site (react.dev) teaches modern React with function components and Hooks. We’ve included diagrams, illustrations, challenges, and over 600 new interactive examples. The previous React documentation site has now moved to legacy.
React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React＋Reduxによる状態管理とフロントエンドの技術的負債 ─ 長く継続するサービスのアプリケーション設計 遷移なく表示コンテンツを変更できるシングルページアプリケーションでは、ページの状態管理が重要になります。現在はReactによるUI構築とReduxによる状態管理を選択しているChatworkは、jQueryなどの技術的負債と共存しながら、フロントエンド設計の見直しを重ねてきました。クライアントサイド・アーキテクトの火村智彦（@eielh）さんと、エンジニア採用広報の高瀬和之（@guvalif）さんによる解説です。 クラウド型ビジネスチャットツール「Chatwork」は、2011年3月にローンチされて10年以上にわたり開発を継続してきました。このように長く続くサービスがユーザーに価値を提供し続けるには、時間経過による変化に適応するため設計の見直しが必要になります。 しかし、設計を
Reactパフォーマンス最適化まとめ - Qiita
はじめに 自分は2021年に新卒でWeb系の開発会社にフロントエンジニアとして入社し2022年で2年目になります。 実務ではReact×TypeScriptを利用したフロント周りの開発をメインで行なっています。 今回は、現場で経験したReactアプリのパフォーマンス最適化についてまとめていきます。 この記事の対象者 Reactの初心者から中級者 Reactのパフォーマンス最適化について学びたい人 この記事の目標 Reactのレンダリングの仕組みを理解する Reactのパフォーマンス最適化の方法を知る React.memo, useCallback, useMemoについて理解する おことわり React.memo, useCallback, useMemoを使うコストについての詳しい解説 パフォーマンスの数値的な計測は行いません 上記の2点に関しては参考記事を該当箇所で貼ります。 Reac
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
