サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
はじめにReact Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で DataAPI が導入され、フルスタックフレームワークとしての側面が強化されましたが、v7 ではさらに進化し、Vite との統合、Single Fetch、Lazy Loading といったモダンな機能がデフォルトで組み込まれ、より洗練された開発体験とパフォーマンスを提供します。 しかし、これらの機能がどのように連携し、ブラウザのリクエストがどのように処理され、最終的にページが表示されるのか、その内部構造は少し複雑に見えるかもしれません。 この記事では、React Router v7 で構築されたアプリケーションの動作フローを、主要なパッケージやコンポーネントの役割、データ取得の仕組み、レンダリングプロセスなどに焦点を当てて、内
なぜ不変なオブジェクトを useEffect, useCallback, useMemo の依存配列に含めるのか:react-hooks/exhaustive-deps のフェイルセーフ ESLint のreact-hooks/exhaustive-deps ルールを使っているときにフェイルセーフの大切さを見出す場面があったので書き記しておきます。 不変のオブジェクトは依存配列に含める必要がない ESLint でreact-hooks/exhaustive-deps ルールを有効にすると、useEffect や useCallback 、useMemo といったフックの依存配列に漏れがある場合に検知してくれます。 ただし、これらのフックの依存先に不変のオブジェクトがあるとき、不変のオブジェクトを依存配列に含める必要はありません。 例えば、以下の useCallback では setCo
こんにちは、 Webフロントエンドエンジニアの @progfay です。 この記事は Recruit Engineers Advent Calendar2022 の 12 日目の記事です。 今回はプロジェクト内で使っている @graphql-codegen/typescript-react-apollo package との思い出を書き綴っていきます。 出会い 私の所属するスタディサプリ中学講座の開発プロジェクト (通称: tara) では通信にGraphQL を採用しています。 また、GraphQL Code Generator を使ってGraphQL にまつわる型や関数の生成を行なっています。 Web Frontend ではAPI Client としてApollo Client を使用しており、TypeScript とReact とApollo Client を合わ
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
はじめに 先日、React の勉強会で、React Flow の実装について取り上げました 🫐 フローチャート、マインドマップ、ネットワーク図など、 視覚的にわかりやすいUI/UX は、モダンな Web アプリケーションにおいて重要な要素です。 今回は、ReactFlow について調査したので、基礎的な内容をまとめました！ 時間の節約になれば、嬉しいです 🙌React Flow とは？React で、インタラクティブなダイアグラムを、簡単に実装できるのが、React Flow です。figma やmiro のような、ドラッグ＆ドロップ可能なGUI で、 フローチャートやマインドマップが構築できます！ Webermes という会社によって、 活発に開発・メンテナンスされており、多くの機能を提供してくれるのが、特徴の一つです。React Flow の使い方React Flo
Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約ReactはMetaの大規模開発を支えるべく開発され、シ
React Server Components を手軽に扱うフレームワークreact-server 2025.02.01react-server は Node.js でJavaScript ファイルを実行するかのようにReact Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。 2025 年 2 月現在React Server Components を扱う方法として最も知られているのはNext.js を利用する方法でしょう。実際にNext.js はReact Server Components がReact の Canary の機能である段階で、すでに安定した機能として提供されていました。このためReact Server Components が N
Recoil 終了のお知らせ Recoilが2025年始にarchivedされたようです。 冗長的な書き方をせずにglabal stateを扱えるライブラリだったので、度々使用していましたが、何かしらの影響で開発停止となりました。 This repository has beenarchived by the owner on Jan 2, 2025.It is now read-only. 理由を調べてみた 元Metaのメンテナーの方が、以下のようなポストをしていました。 翻訳すると、 これは言われていることですが、まったく予想通りです。Meta が Douglas Armstrong を解雇した後、私は Recoil の唯一のメンテナーになりました。その後、私も解雇されました。社内の多数のプロジェクトでまだ使用されていますが、誰も責任を引き継ぎたくありませんでした (これはパフォー
1リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
