ただNext.jsを使う - カミナシ エンジニアブログ
カミナシエンジニアの osuzu です。 私は職能柄、Webフロントエンド技術の選定に関わる機会が多く、これまで React Server Component や Next.js に関する発信なども過去にしていました。 そうした事情から2025年12月の React や Next.jsのセキュリティ問題 に対し心痛めています。 私は現在もプロダクションでNext.jsを運用していますが、選定した事を後悔しているかというとそう単純な話でもありません。 そこであらためて、Next.jsをプロダクションで採用するポイント、何を意識した構成にしているか記載します。 今回の記事では以降、ReactはRSC(React Server Component)を含むものとし、Next.jsは記載のない限りApp Routerを指した話となります。 BFFとして使う まず私はプロダクション運用するプロダクトに
Reactカスタムフックが可読性を損なうとき
この記事は React Advent Calender 2025 11 日目の投稿です。 可読性の高いカスタムフックを考える React 開発において、「ロジックはカスタムフックに切り出す」というプラクティスは、私たちの思考に深く根付いています。しかし、筆者の経験上、「なんとなく」でカスタムフックに切り出されたロジックは、かえってコードの可読性を下げることが多いと感じています。コンポーネントの挙動を理解するために別ファイルを行き来し、分断されたロジックを頭の中でつなぎ合わせなければならないコードは可読性が低く、改修や不具合の調査を難しくします。 本記事では、React のカスタムフックが、かえってコードの可読性を損なってしまうアンチパターンと、その回避策について考察します。「ロジックはカスタムフックに切り出す」という一般的なプラクティスの落とし穴を明らかにし、コンポーネントの凝集度と透明性
Astroでreact2shellのような脆弱性が起きない理由、そして脆弱にしないために
2025年12月3日に公開されたサーバー側での任意コード実行が可能となるReact及びNext.jsにおける脆弱性CVE-2025-55182。通称react2shell。この脆弱性は単なる実装バグとしては片付けられない、フロントエンド界隈全体に及ぶ議論を巻き起こしました。 結論 RSFで起こった脆弱性はAstro Actionsでは起きないように設計されている。 それ以外にもAstro Actionsはサイトを脆弱にしないための仕組みを持っている。 安全なサイトにするための手段は一つではないし、無数にある。 react2shellはなぜ起こるの？ RSCが有効になっているサーバーに細工されたリクエストを送ることで、サーバー側で攻撃者の指定する任意のコードを実行することができます。具体的にはReactのFlightプロトコルに関数の参照やプロトタイプ汚染などを仕組むことで、認証の有無に関係
RSC/Next.jsは信頼できないかもだけど、それで良いのかもしれない
背景 先日、RSCに重大な脆弱性が見つかりました。詳細については多くの記事が書かれていますので割愛しますが、Next.jsをただデプロイしているだけでもやられる重大さです。 RSCの設計自体も問題視されています。当初からセキュリティの議論が多く、今回の件とは直接関係がないものの、サーバとクライアントの境界が曖昧な点などが指摘されていました。この状況を見ていると最悪の場合、RSC/Next.jsのセキュリティを十分に高めることが現実的に不可能となる可能性も残されており、今後注視する必要があります。 でも本当にNext.jsってセキュリティが重要なのだろうか？ サーバはセキュアでなければならないと我々はずっと学んできましたが、これが先入観である可能性もあります。 私たちが日常的にウェブサイトを作るとき、「ブラウザからのデータは絶対に信用するな！」って教わります。ブラウザ等のHTTPクライアント
Reactの今まであまり触れてこなかった機能について試したことのまとめ
react18.2で検証 createPortal 以下はドキュメントの引用 ポータル (portal) は、親コンポーネントの DOM 階層外にある DOM ノードに対して子コンポーネントをレンダーするための公式の仕組みを提供します。 ポータルを使うと<div id="app">以下に書かれた<Modal>コンポーネントがDOM上では<div id="portal">以下にレンダリングされる。ただし、イベントは<div id="app">にバブリング(子要素で発生したイベントが親要素に伝搬)する。 import { FC, useState, ReactNode, useEffect } from "react"; import { createPortal } from "react-dom"; const Modal: FC<{ children: ReactNode }> = ({
ドキュメント作成ツールの決定版！Markdown + React の体験を Docusaurus で
What is Docusaurus ? Build optimized websites quickly, focus on your content - Docusaurus Keytar Docusaurus とは "最適化されたウェブサイトを迅速に構築し，本質に集中させる" というスローガンのもと Facebook 傘下のチームが開発している 静的サイトジェネレータです．特徴として，次の五つが挙げられています． Powered by Markdown => MDX Built Using React Content Search Ready for Translations Document Versioning ※ただし，まだまだアルファなので４，５については工事が進行中 追記：2021 年 5 月 12 日に β 版がリリースされ，2022/02/23 現在では beta.15
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
Reactを学ぶときに役立つ情報・本など
React公式ドキュメントのチュートリアルは古くなっているので、TypeScriptやReact Hooksで開発することも考えて参照するときにおすすめできるサイトを置いておく。 ほかにも有益な情報はあると思うが、あまり多すぎても大変なので、被りがなさそうかつ有益だと思っているリンクに絞っている。 2021年11月30日に編集 React公式ドキュメントのリニューアルが公開されるまでの繋ぎ。 New React Docs · Issue #3308 · reactjs/reactjs.org https://github.com/reactjs/reactjs.org/issues/3308 React公式ドキュメントがBeta版で公開されています。まずはこちらを参照するといいと思います！
リアルタイムにコンポーネントをプレビューできるReact Preview (beta) を試してみた | DevelopersIO
吉川@広島です。 Are you a React dev? Do you use Visual Studio Code? I just released the beta of React Preview for VS Code ?https://t.co/HnFpTpO9op pic.twitter.com/qU4sxTo30g — François Wouts (@fwouts) June 25, 2021 「お前らReactとVSCode使ってる？ React Preview for VS Codeのベータ版を出したぜ」 こちらのツイートが目に入り、「え、これすごくない？」ということで試してみました。 本記事ではReactアプリケーションの初期構築手順は割愛します。 環境 react 17.0.2 typescript 4.3.2 styled-components 5.3.0 VS
ReactのSuspenseListでお手軽CLS対策
みなさん、React のConcurrent Mode使っていますか？ まだという方もまだまだ遅くはありませんのでご安心ください。 この記事では、Concurrent Mode API の一つであるSuspenseListを使って、Core Web Vitalsの一つである Cumulative Layout Shift (CLS) の発生を抑制する方法を紹介します。 SuspenseList とは SuspenseList は React に組み込みのコンポーネントで、複数のSuspenseコンポーネントを子として持ち、それらが表示される順番を制御する機能を持ちます。Suspense についても一応復習しておくと、これは「内部でサスペンドしたコンポーネントがあった（＝中身がまだ読み込み中である）場合は中身の代わりに指定されたフォールバックコンテンツを表示する」というコンポーネントであり、
Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍 Zennに書くのは初めてなのでお手柔らかにお願いします🙏 最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻 冗談はさておき、スプレッドシート便利ですよね。 こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢 かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺 というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。 デモ で、出来上がったのがこちらです🤲 CodeSandboxからStackblitzに変えました(少し遅い) そのほかのサンプルは こちら 機能 ショートカットキーについては以下をサポートしてます👀 全選択
Reactチュートリアル2：レビューサイトを作ろう
本資料について 本資料は日本大学文理学部情報科学科の開講科目「Web プログラミング」の教材として作成されました。本資料は下記のライセンスの範囲内で、当授業以外でも自由にご利用いただけます。 対象読者 本資料は、以下の教材を学習済み、もしくはそれと同等以上の知識を持っていることを前提としています。 React チュートリアル：犬画像ギャラリーを作ろう 基本情報技術者試験レベルの関係データベースの知識 本資料で学ぶこと 本資料では以下の内容を学びます。 Express と Sequelize による API サーバー開発 React と API サーバーの連携 Cross-Origin Resourcer Sharing React によるルーティング Auth0 によるユーザー認証 Heroku による API サーバーの公開 ライセンス この作品はクリエイティブ・コモンズ 表示 4.0
たぶんこれが一番分かりやすいと思います React + Redux のフロー図解 - Qiita
【追記】 もうこれ古いから参考にしないでください https://t.co/mXtcc73Orf — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 Redux にはその昔 connect()() とかいうクソ API と， Redux-Saga とかいう宗教がありました という考古学です — もし Laravel が流行しなくなってこられてきてたとしたら、絶対に捨てられてこられてたと思うか (@mpyw) January 26, 2021 読者対象 Tutorial: Intro To React - React Example: Todo List · Redux 「チュートリアルそれぞれ一周した！Reactは何とか理解できたが，Reduxがさっぱりわかんねぇ！」 ぐらいの人向け。自分
ブラウザだけでできるReact・Reduxチュートリアル - Qiita
はじめに 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたJavaScriptライブラリです。 従来の一般的なWebアプリケーションだと、JavaScriptはJQueryなどのライブラリを使ってUIを生成していました。 ところが、従来のJavaScriptのライブラリで書かれたコードはJSのコードが大規模になるにつれてメンテナンスが難しくなるという欠点を持っていました。 それに対してReactは JS内にHTMLタグを埋め込むような記述ができ、「アプリケーションがどのように見えるか」を単純に表現できる データに変更があるときには更新の必要があるコンポーネントだけ更新する コンポーネントという単位でUIを管理することで複雑なUIでもUIを再利用したりテストしやすくする といった特徴を持つことで、複雑なUIを作成するときで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
