タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直接利用して確認すると、「React Routerの最新バージョンはv6です」と返答が来る。しかし、最新版はv7だ。v7.0.0はちょうどこの時期にリリースされたため境界にあり、つまりv7の実践的な知識はない。これに限らず、LLMの世界ではNext.jsはv14、Flaskはv2、Railsはv7と一世代遅れたバージョンを認識していることになっている。 これらのアップデートによって入った変更は、既存のソースコードに記述していればLLMが空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
Update (Dec 2024): React Router v7 has been released! We now recommend starting all new projects with React Router v7 and upgrading existing Remix apps. We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Ro
この記事は情報の提供のみを目的としています．今回紹介する方法はどちらのライブラリにおいても公式の手法としてサポートされていません．この方法を用いたことにより発生したいかなる損害について，私および弊社は責任を負いません． はじめに 世間では Next.js や Remix といったフルスタックフレームワークが話題となっていますが，皆さんはどのような環境で React アプリを開発しているでしょうか．Vite などのツールを使ってビルドされた，いわゆる SPA [1] を開発されている方もまだまだ多いのではないでしょうか． 私もその一人です．とくに弊社が提供する workhub では各組織の管理画面として Web アプリを提供しており，これは React + Vite の構成となっています． こうした SPA であって，かつ多画面を提供するアプリの場合，一般にルーティングライブラリが利用されま
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL -
はじめに React Router は、React アプリケーションにおけるルーティングライブラリのデファクトスタンダードとして長年利用されてきました。v6 で Data API が導入され、フルスタックフレームワークとしての側面が強化されましたが、v7 ではさらに進化し、Vite との統合、Single Fetch、Lazy Loading といったモダンな機能がデフォルトで組み込まれ、より洗練された開発体験とパフォーマンスを提供します。 しかし、これらの機能がどのように連携し、ブラウザのリクエストがどのように処理され、最終的にページが表示されるのか、その内部構造は少し複雑に見えるかもしれません。 この記事では、React Router v7 で構築されたアプリケーションの動作フローを、主要なパッケージやコンポーネントの役割、データ取得の仕組み、レンダリングプロセスなどに焦点を当てて、内
年末にReact Router v7がリリースされましたね！ これによりWebフレームワークであるRemixとルーティングライブラリであるReact Routerが統合され、1つのプロジェクトとなりました。 React Router v7で実現する完全純粋コンポーネント開発 統合自体が一つの大きなニュースなのでそこに注目が集まりがちですが、当然書き方もいくつか変化しています。 私としてはこの書き方の変化からほとんどのコンポーネントを純関数で表現できるようになったことに大きく注目しています。 純関数とは 純関数とは、ひとことでいうと 隠れた入出力がない関数のこと です。 隠れてない入力は引数、隠れてない出力は戻り値で、それ以外の入出力がある関数と言えます。 いくつか例をあげると、以下のようなものが挙げられます。 // 純関数 function add(a: number, b: number
Cloudflare Workers + react router v7 でサクサクWebアプリを作る。 はじめに 皆様こんにちは、あかいけです。 最近ポートフォリオを改修したのですが、その際に Cloudflare Workers + react router v7 の組み合わせを使ってみました。 その結果アプリの拡張性やデプロイの簡易性などもろもろ開発体験がめちゃくちゃよかったので、ブログにしました。 まだCloudflareを使ってない人も、これを機に入門してみてください。 Cloudflare Workers is 何？ Cloudflare Workers は、Cloudflare のエッジサーバーで JavaScript/TypeScript/Python/Rust/WASM を動かすサーバーレス実行環境です。 すごく大雑把に言うと、「CDN にアプリロジックを埋め込んだ」よう
history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re
最近、Remix ……いつの間にか統合されて React Router v7 を触っている。最初はなかなかいい感じと思っていたのだけど、実際に使ってみるとなかなかに厳しい。 Remix の哲学と言えばどちらかと言えばSSG (Static Site Generation)はやめてエッジで動的に生成しましょうという部分が強調されていたように記憶しているが、Pre-Renderingの機能も搭載されており、そこはすでに微妙な話なのかもしれない。 むしろ特徴的なのが「UI を永続的なサーバー状態と自動的に同期させる」という部分。詳細はRemix時代の「Fullstack Data Flow」を読んでいただきたい。 remix.run 端的に言えば、HTML標準の動きをエミュレートするかのように旧来型のポストバック的な動作をReact で再現する設計になっている。ボタンを押し submit が行わ
はじめに みなさんこんにちは、Watanabe Jin(@Sicut_study)です。 Reactが大好きな私にとってReactの歴史が大きく変わる瞬間に出くわしました。 ついにReact 19が安定版としてリリースされたのです。 React19になってSSRなどサーバーコンポーネントが完全にサポートされます。 そんな中で真っ先に動いたのがRemixです。 Reactでサーバーでの処理ができるとなると「React + React Router」と「React + Remix + React Router」で実現できることの差がなくなりました。 そこでReact RouterとRemixが統合されて新たなフレームワークが生まれます。 それが「React Router v7」なのです！！！ React Router v7はいままで通りライブラリとして「ReactRouter」を利用することも
最近久しぶりに React Router を使う機会があった。 SSR不要な要件だったのでNext.jsではなく Vite を選んだら、ルーターが必要となり React Router を選定した。 React Router は Remix との統合もある通り、もはやただのルーターではなく、fetch や form action までもサポートされている。 採用にあたって考えるのはどこまで React Router の機能を使うかだ。 自分は router が欲しくて入れるので fetcher や action は不要だ。 一方で React Router を FW と考えると FW の標準に乗るのは自然な発想にも思える。 今回、React Router の機能に寄せて開発してみて、この機能使う・この機能使わないという土地勘ができたのでメモをしておく。 router ルーターライブラリなので
React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 [email protected] [email protected] [email protected] @mui/[email protected] @mui/[email protected] @emotion/[email protected] @emo
■ イベント TypeScriptを活用した型安全なチーム開発 2024 https://sansan.connpass.com/event/337268/ ■ 発表者 技術本部 Eight Engineering Unit Platformグループ 鳥山 らいか ■ Eight 開…
SPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、react-routerが代表格として知られています。 react-routerでルーティングが制御されている場合、その中のコンポーネントが現在のURLを表すオブジェクトであるlocationを得るための方法は大別して2つあります。一つはuseLocation、もう一つはuseHistoryです。なお、これらのフックはreact-routerのv5.1で追加されました。この記事ではこれ以前の方法は取り扱いません。 この2つの方法のどちらを使ってもlocationを得ることは可能ですが、どちらを使うべきかは場合によって明確に異なります。間違った方を使うと、パフォーマンスが低下したり期待通りに動かなかったりという問題が発生するこ
React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら
React Router の Server Components 対応 React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 React Router はプレビュー版として Server Components に対応しました。これにより以下のような機能が追加されました。 loader や actions を使用してデータを返す際にコンポーネント渡せる
tl;dr React Router has preview support for RSC! Clone this repo to try it out RSC content from loaders/actions in existing routes RSC-first "Server Component Routes" Client components with "use client" Server Functions with "use server" Check out the demo Live Demo Source Code Middleware for batching and caching queries Stable release blocked by RSC support in Vite The preview uses Parcel Alternat
React Router v6.4 が、破壊的変更を伴わないマイナーバージョンアップながら、機能追加の内容としてはかなり新しい世界観を追加してきたので、5 分くらい眺めて気づいたことをメモしておきます。 Routing と Data Loading/Mutation の統合 まずはリリースノートがこちら。 そしてリリースノート内に貼り付けられている動画がこちら。 1:45 しかない動画なので、動画を見ていただければこの記事はあんまり読まなくてもいいかもです。 さて、動画内では、次の 2 つの機能を <Route> コンポーネントへと統合した話題が語られています。 データ読み込み（Data Loading） 0:00〜 0:28〜 エラーハンドリングの話題もあり データ更新（Data Mutation） 0:52〜 <Route> に統合された API は、ざっくりと次のような形です。 <R
BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかけるようになり、ルーティング宣言から型を拾いやすくなった React Router v6.4 から createXXXRouter のAPIが追加され、コンポーネントではなく、プレーンオブジェクトでルーティングを書けるようになりました import { createBrowserRouter } from
Earlier this year we started an undertaking to Remix React Router with the aim of bringing all of the Remix Data API's (loaders, actions, fetchers, etc.) over to React Router. With the recent release of React Router v6.4.0 we're proud to report that we've completed that effort...and we think we've made them even better 😃. Not only have we fixed a few edge case bugs, but we've stabilized some APIs
The first versions of React Router actually had an async hook to help with data loading called willTransitionTo. Nobody really knew how the heck to use React at the time and we were no exception. It wasn't great, but it was at least going in the right direction. For better or for worse, we went all in on components for React Router v4 and removed the hook. With willTransitionTo gone, and component
こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう！ 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr
先日RemixとReact Routerがマージされ、React Routerv7で統合されるという衝撃的なニュースがありました。 React RouterはこれまでSPA開発におけるルーティングライブラリとして広く活躍してきました。しかし今回の統合の背景にReact Router自体がすでにRemixとの差分が無くなっていたという事情があったことからも分かる通り、React Routerは直感的にルーティングの域を超えた存在です。 またFrameworkを採用せずReactでSPA開発をする際にはReact Routerの存在は大きいものでしたが、昨年の12月にTanStack Routerがversion1系になったことでVite+Reactでルーティングを実装する選択肢が新たに1つ増えました。 TanStack Routerについてご存知でない方はこちらの記事で詳しく紹介をしています
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
はじめに React Routerとは何ですか？ React Router v6 スイッチコンポーネントをルートに置き換え 相対パスとリンク 正確なルートパスを指定するNavLink useNavigateに置き換え 最後に はじめに React Router v6は最新のバージョンであり、最近React Routerを学習し始めた方々にとっては、既にこのバージョンを使用しているかもしれません。 v6には多くの変更点が加えられており、v5との違いや変更点について初心者の方々に詳しく説明していきます。 以前の記事では、React Router v6でのルーティングの解説を行っていました。 dev-k.hatenablog.com ただし、この記事はReact Router v6が最近アップグレードされたばかりの頃に書かれたものであり、現在の最新情報とは異なる可能性があります。 そのため、読者
複数のページで構成されたReactアプリケーションを構築する際にはReact単独ではルーティングの機能をもっていないためルーティングライブラリが必要となります。数あるルーティングライブラリの中でReact Routerは最も人気の高いライブラリです。複数のページを持つということはブラウザからアクセスするためのURLが複数存在することになります。アプリケーションを構成するURLにアクセスした場合にどのページコンポーネントのコンテンツを表示させるのかといったルーティングの設定をReact Routerを利用して行います。ログインページやユーザ登録ページなど複数のページが必要なアプリケーションをReactを利用して構築したい場合にはReact Routerを利用することになります。 通常のWEBサーバではページを移動する度にサーバから送られてくるコンテンツをブラウザ上に描写させるためページ全体の
import { BrowserRouter, ParamParseKey, Route, Routes, useParams } from "react-router-dom"; import User from "./pages/users/[id]"; import "./App.css"; import Top from "./pages/top"; export const PATHS = { TOP: "/", ABOUT: "/about", USERS_ID: "/users/:id", } as const; // これでクエリパラメータの id が取り出せる export const useParamsUsersId = useParams<ParamParseKey<typeof PATHS.USERS_ID>>; function App() { return (
Today we are very happy to announce the stable release of React Router v6. This release has been a long time coming. The last time we released a major breaking API change was over four years ago in March 2017 when we released version 4. Some of you probably weren't even born then. Needless to say, a LOT has happened since that time: Downloads of React Router grew by over 60x (6000%) from 340k/mont
前回は React の基礎的なことをまとめましたが、今回は React アプリのルーティング設定をするうえでよく使われている React Router についてまとめました。 ※2021/08/22追記 TypeScript ベースで、全体的に大幅加筆修正を行いました。 ※2022/01/24追記 あくまでライブラリの記事であるとわかりやすくするために、記事タイトルを変更しました（旧：React入門 ～React Router(v5)編～） React Router とは？ 公式 5系 React で SPA を書くにあたって、DOM を書き換えて複数ページがあるように見せても URL が変わらないため、ブラウザからは1つのページとしてしか認識されません。 そこで、SPA の画面状態と URL とを紐づけ、さらにブラウザ履歴の同期を行います。 そうすることで、疑似的なページ遷移を実現できま
React Routerがv6.4で再び大きく変化するようです。まるでReactがCSR版のRemixになる？まず素振りがてらPre−release版をためしてみました。 はじめに こんにちは、CX事業本部MAD事業部の森茂です。 React Routerがv6.4で再び大きく変化するようです。3月末に下記Remix公式ブログで事前の案内はありましたがReact Routerと同じチームが開発しているRemixの思想がReact Routerに取り込まれ、そのPre-release版とData APIについてのドキュメントが先日先行して公開されました。 Release Remixing React Router · remix-run/react-router React Routerの安定版は2022年6月現在 v6.3.0となります。 React Router v6.4 Pre-rel
2022年01月28日 Windows11での情報です。 今回はReactでのルーティングについてです。 ルーティングとはリクエストされたURLに応じて処理を振りわけることです。 Reactでルーティングを実装するには、React Routerライブラリを利用するのがスタンダードなようです。 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 React Router v6 React Router は現在の最新はv6です。 v5とは書き方が変わったようですので、検索する際はバージョンの確認が必要です。 公式サイト React Router v6 をインストール まずはReact Routerをインストールします。 vscodeのターミナルで下記のコマンドを実行し
React router is a package that I use in almost all of my projects. Not too long ago, Michael Jackson tweeted this. This made me curious as to how difficult it would be to rebuild react router from scratch. Before we dig into this I want to clarify that if you need a router in your project you should just use react router. It has a lot more features, handles a lot more edge cases and is incredibly
はじめに Reactで開発を進める上で必ずと言っていいほど使用されているReact Router。 ドキュメントが充実しているので、目を通せば大体のことは、解決すると思いますが、使い方の整理の意味を込めて文章としてまとめます。 公式ドキュメント | React Router 対象読者 React初学者 SPAにおけるルーティングのおさらい さらっとですが、SPAにおけるルーティングについて整理します。 ※ここら辺、理解してる人は読み飛ばして下さい。 SPAにおけるルーティングを一言で説明すると、『DOMの動的な書き換えによってページ遷移を擬似的に実現するとともに、ブラウザのセッション履歴をそれに同期させる事』 です。 SPAはサーバーへの初回リクエストに対して、アプリ全体が記述されたJSのコードと、そこで使用されるアセットファイルがごそっと返されます。 以降、ページ遷移はアプリが動的にDO
React Routerは複数のページを持つReactアプリケーションを構築する際に利用されるライブラリです。複数のページが存在するということはブラウザからアクセスするためのURLが複数存在することになります。レイアウトなどの共通部分もありますがページ毎に異なるコンポーネントで構成されているためURLとコンポーネントを紐づける仕組みが必要となります。その役割を担うのがReact Routerです。React Routerを利用することで例えばブラウザからURLの/aboutにアクセスするとAboutコンポーネントの内容を表示、別のURLである/contactにアクセスするとContactコンポーネントの内容を表示させるといったことが可能になります。 また通常のHTMLでのページ間の移動ではページを移動する度にブラウザからサーバにリクエストを送り、サーバからHTMLを受け取りページ全体を描写
まさかこの「誰よりも先駆けて使い方を解説！」な記事を書いてから1年半もかかると思ってなかったのですが(笑)、ついにv6出ましたね。 https://github.com/remix-run/react-router/releases/tag/v6.0.0 はじめに ReactでSPAを作るときのおそらくデファクトスタンダードであろうreact-routerですが現在v6が開発中で、しばらくしたら単純にnpm install react-routerとするとv6がインストールされるようになります。 v6はAPIに破壊的な変更が入ります。つまり、今ある入門記事の通りに書いても動かなくなります。 というわけでこの記事では書き方がどう変わるか、そして個人的により重要な中身がどう変わったのかについて説明します。 第1部：書き方の変更編 v5での書き方 まずは前提知識としてv5での書き方です1。すでに
Today we are happy to announce the stable release of React Router v7. React Router v7 brings everything you love about Remix back into React Router proper. We encourage all Remix v2 users to upgrade to React Router v7. For the majority of the React ecosystem that has been around for the last 10 years, we believe React Router v7 will be the smoothest way to bridge the gap between React 18 and 19. U
Tutorial Welcome to the tutorial! We'll be building a small, but feature-rich app that lets you keep track of your contacts. We expect it to take between 30-60m if you're following along. 👉 Every time you see this it means you need to do something in the app! The rest is just there for your information and deeper understanding. Let's get to it. Setup If you're not going to follow along in your ow
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
After several months of development, the data APIs from Remix have arrived for React Router in v6.4. Feature Overview The web is a wonderful place where highly dynamic shopping experiences, creative productivity software, and super basic but excellent classified ads are all possible on the same platform. While these websites are all wildly different, they all have one thing in common: data coupled
JSer.info #716 - Angular v19がリリースされました。 Meet Angular v19. In the past two years we doubled down… | by Minko Gechev | Nov, 2024 | Angular Blog Release v19.0.0 · angular/angular Angular v19 Developer Event - YouTube Developer previewとして新しいIncremental Hydrationの仕組みを追加、ServerRouteでレンダリングモードを指定できるように、HMRのサポートが追加されています。 Incremental Hydrationは、@deferでHydrationを遅延実行でき、Hydrationがするまでは@placeholderでプレースホルダーを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![HDDの書き込み技術が20年ぶりに変わる。Seagateがいち早く製品化した「HAMR」技術とは ～BarraCudaやIronWolfなど、30TB時代の用途別の選び方も解説[Sponsored]](https://cdn-ak-scissors.b.st-hatena.com/image/square/72ffe67e99721b55b9c77f5650b29a41d89c7915/height=288;version=1;width=512/https%3A%2F%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%2Fpc.watch.impress.co.jp%2Fimg%2Fpcw%2Flist%2F2017%2F179%2F01.jpg)
