サーバーの無いReactフレームワークFUNSTACK Static
皆さんこんにちは。この記事では、筆者が最近開発した新しいReactフレームワークであるFUNSTACK Staticについて紹介します。 ドキュメント FUNSTACK Staticの概要 FUNSTACK Staticは、React用のサーバーを立てる必要がなく、静的なファイルサーバーにデプロイできる古き良きSPAを作ることに特化したフレームワークです。 それでいて、React Server Components (RSC) による最適化をしっかり効かせることができるのが特徴です。 以前の記事で説明したように、RSCはサーバーというくらいだからサーバーをデプロイしないといけないと思われがちですが、実はそうではありません。RSCの恩恵を受けつつも、サーバーを立てずに静的ホスティングで動かせる方法があります。 Next.jsなど既存のフレームワークもそのようなモードをサポートしています。しか
「State of JavaScript 2025」公開。フロントエンドライブラリはReactがシェアを伸ばして1位、ビルドツールはついにwebpackにviteが追いつく
「State of JavaScript 2025」公開。フロントエンドライブラリはReactがシェアを伸ばして1位、ビルドツールはついにwebpackにviteが追いつく 回答者の国別分布を見ると米国が16％、ドイツが8％、フランスが7％、イギリス（UK）が5％、ロシアが3％、スペインが3％、日本も3％（回答者340人）でした。 発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドはReactがシェアを伸ばして1位 フロントエンドフレームワークの利用率ランキングは、引き続きReactが他を引き離して85％の1位。2位はVue.jsで52％、僅差で3位がAngularで48％、4位がSvelteで27％。以下、Preact、Solid、HTMXなどが並んでいます。 メタフレームワークの1位はNext.js
フロントエンド分割やめました
こちらは株式会社ココナラ Advent Calendar 2025 19日目の記事です。 こんにちは。ココナラ法律相談で開発を担当している高崎です。 以前、こちらの記事でRailsのモノリスから管理画面をReactへ段階的に移行する取り組みについて書きました。 結論から言うと、現在のチームフェーズと事業優先度を鑑み、この「フロントエンド分割（リプレイス）」という方針を中断し、Rails（ERB）主体の開発体制に戻す決断をしました。 今回は、なぜ一度始めたリプレイスを中断するに至ったのか。その背景にある「事業優先の力学」と「合意形成の難しさ」について、自戒を込めて振り返りたいと思います。 理想的なスタートと、現実の壁 当初の計画は、いわゆる 「ストラングラー・フィグパターン」 のようなアプローチでした。 巨大なレガシーシステム（モノリス）を一度に作り直すのではなく、「新しいシステムを少しずつ
React Server Componentsの脆弱性 CVE-2025-55182（React2Shell）についてまとめてみた。 - piyolog
2025年12月3日、JavaScriptライブラリ Reactを開発するThe React Teamは、React Server Componentsに深刻な脆弱性が確認されたとして脆弱性情報を公開し、修正版への更新を案内しました。ここでは関連する情報をまとめます。 どんな脆弱性が確認されたの？ React Server Function のFlightプロトコルにおいて、信頼できないデータのデシリアライズに関する脆弱性 が確認された。この脆弱性は認証不要でリモートから悪用が可能であり、リモートコード実行（RCE） に至る恐れがある。深刻度は 緊急（CVSS 基本値 10.0） と評価されており、開発元は利用者に対して速やかな対応を呼びかけている。 React はエンタープライズ環境を含む幅広いシステムで採用されており、日本国内でも React を用いたシステムを公開しているホストが多数
React の状態管理の歴史と、最新 API に込められた React の思想
はじめに React が誕生して10年以上が経ちましたが、「状態管理」の議論は今も終わりません。Redux、Recoil、Zustand、そして useSyncExternalStore。なぜこれほど多様なライブラリが生まれ、React 公式はついに"標準 API"を出したのでしょうか？ 本記事では、「状態管理の歴史」と「React が見ている世界」を整理しながら、最新 API が登場した背景まで深く掘り下げます。また、この内容は JSConf.jp 2025 Pre Event で話した内容の補足や詳細です。 この記事の読み方 記事全体を通して読むことで状態管理の歴史が体系的に理解できますが、すでに知っている部分は読み飛ばしても問題ありません。 あなたの状況 おすすめの読み始め tl;dr 状態管理は UI = f(state) という React の思想を支える根幹 Redux → R
Next.jsの脆弱性を数日放置したら暗号通貨マイナーを仕込まれた話 - Qiita
やったら動作が遅いなと思ったら、いつの間にか CPU 使用率が100%に。 これはもしや...と思ったら、まさにでした。 PM2にログが残っていたのが救い。 後は、Claude Code におまかせしました。 以下、備忘録： はじめに 2025年12月、運用していた複数のNext.jsアプリケーションがサイバー攻撃を受け、暗号通貨マイナーを仕込まれました。CVE-2025-55182が公開されてから2日後のことでした。 Note: この記事はインシデント調査レポートを基に、Claude Codeが執筆しました。 TL;DR CVE-2025-55182公開から2日後に攻撃を受けた Next.js 15.x / 16.x のServer Actions脆弱性でRCE（リモートコード実行）された 暗号通貨マイナー（Monero）と複数のバックドアを仕込まれた サーバー内部の認証情報が漏洩した可
Reactコンポーネントの不要な再レンダリングを制御する。useMemo/useCallbackの使いどころとPropsの粒度管理 | レバテックラボ（レバテックLAB） - レバテックLAB
執筆 中川 幸哉 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表：山田祥寛）に所属するテクニカルライター。新潟県上越市出身。会津大学コンピュータ理工学部卒業後、現在は新潟市に在住。ReactやAndroidを軸に、モバイルアプリ開発やWebサイト制作、Webメディア編集部の業務改善や、プログラミング技術記事の執筆等に携わっている。著書に『たった1日で基本が身に付く! Androidアプリ開発超入門』、『基礎から学ぶ React Native入門』 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表
自己補正するコンポーネント: レンダリング中に状態更新する公式テクニックの解釈
Reactにおいてプロダクトの品質を高く保つには、Reactのやり方に合ったコードを書くことが重要です。公式ドキュメントの名物ページ「そのエフェクトは不要かも」には、useEffectの望ましくない使い方と、それに代わるテクニックが紹介されています。 この記事で取り上げるのは、その中でも「props が変更されたときに一部の state を調整する」のセクションで紹介されている、レンダリング中にステートを更新するテクニックです。 このテクニックは一見すると奇妙で、知ってはいるけど使っていいのかよく分からないという方も多そうです。しかし、一見突飛に見える記述でも、深く理解すれば実はReactのデザインに完璧に則っているというのがReactの公式ドキュメントの特徴です。技術に対する向き合い方として、公式の説明であっても妄信せず批判的に見ることはとても重要です。しかし、Reactの場合は最終的に
【結論】TypeScriptの型定義はtypeよりinterfaceを使うべき理由
はじめに TypeScriptでコンポーネントのPropsやオブジェクトの型を定義するとき、typeとinterfaceのどちらを使うべきか、一度は悩んだことがあるのではないでしょうか。 巷では「どちらでも良い」「チームで統一されていればOK」といった意見もよく見かけます。 しかし、私は 明確な理由をもって「基本的にはinterfaceを使うべき」 だと主張します。 この記事では私の実体験で遭遇したReactのPropsの深刻なパフォーマンス問題を例に交えながら、なぜinterfaceが優れているのか、そしてtypeはどのような場面で使うべきなのかを解説します。 type aliasを使いたくなる魅力と、その裏に潜む罠 まず、なぜ多くの開発者がtypeを選びがちなのでしょうか。 それは、開発体験の良さにあります。 typeで定義した型は、VSCodeなどのエディタでホバーすると、最終的に解
Remix 3 発表まとめ - React を捨て、Web標準で新しい世界へ
はじめに 2025年10月10日、カナダのトロントで開催されたイベント "Remix Jam 2025" で Ryan Florence と Michael Jackson が Remix 3 を発表しました。このセッションは、React Router の生みの親たちが、なぜ React から離れ、独自のフレームワークを作ることにしたのか、その理由と新しいビジョンを語った歴史的な発表です。 本記事では、1時間47分に及ぶセッションの内容を詳しく解説します。 なぜ Remix 3 を作るのか 💡 動画で確認する (3:17:30~) React への感謝と決別 Michael Jackson と Ryan Florence は、React に対して深い敬意を持っています。React は彼らのキャリアを変え、Web 開発の考え方を一変させました。React Router を10年以上メンテナ
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
小手先に見えるテクニックでも、実はReact的に考えられる
皆さんこんにちは。React、使っていますか？ Reactを″正しく”使うことは難しいと感じる方も多いのではないでしょうか。 特に筆者はReactの正しい使い方に厳しく、こんな記事も出しています。熟練のReact使いでもなければ、この記事を読んで難しいと思うのも仕方がありません。 useEffectに関しては、React公式のドキュメントでも「そのエフェクトは不要かも」というページがあり、useEffectを使ってしまいがちだが、useEffectの使用が適していない場面について解説されています。 この記事の目的 上記の公式ドキュメントで解説されている中でもkeyを使うテクニック（あとでこの記事でも説明します）に関しては、今より未熟だった昔の筆者は、あまり良く思っていませんでした。なぜなら、それが 「Reactらしくない、小手先のテクニック」 に見えたからです。 しかし、よくよく考えれば、
モダンなフロントエンドにおけるテストについて ［Modern Featured Test］ | gihyo.jp
本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームのnus3です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。 本記事では、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します[1]。 モダンフロントエンドでのテスト ここ数年のWebフロントエンドでは次のように、さまざまな変化がありました。 ReactやVue.jsといった宣言的UIを採用したライブラリの普及 TypeScript中心としたエコシステムの発展 ES Modulesの採用の広がり ViteやSWC、RspackやTurbopackなどの新しいビルドツールの登場 この変化に合わせて、Webフロントエンドを対象にしたテストのツールや手法も増えてきました。
React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
React Router v7でコードを書いてくれSonnet
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が空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 AIにフルスタックアプリの生成を指示できるサービス「Bolt.new」を提供するStackBlitzは、Bolt.newの新機能としてFigmaで作ったデザインのインポートに対応したと発表しました。 Introducing Figma to Bolt Go from Figma to pixel-perfect full stack app — just put bolt․new in front of the URL & start prompting! pic.twitter.com/r78vjraVms — bolt.new (@boltdotnew) March 13, 2025 Figmaで作成した画面デザインをBolt.newへインポート可能に これまでBolt.ne
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - millionco/react-doctor: Let coding agents diagnose and fix your React code
GitHub - pdfme/pdfme: Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities. Create custom PDFs effortlessly in both browser and Node.js environments.
React は次の10年を生き残れるか：3つのトレンドから考える
TanStack Routerで型安全かつ効率的なルーティングを実現
