Fetching data in React applications has traditionally required useEffect and state management, often leading to boilerplate code and UI flickering. With the introduction of React Suspense, handling asynchronous operations like data fetching has become more efficient and declarative. React Suspense allows components to pause rendering until a specific condition, such as data availability, is met. I
Step2：UI仮構築とJSONデータ連携 今回は、診断アプリの Step2 として以下の実装を行いました。 ✅ 今回の目的 ハードコーディングではなく、外部JSONファイルから質問データを読み込む仕組みを作る JSXにベタ書きしていたUIを、動的に表示される構成へ変換 質問と選択肢の管理が柔軟になるように構造化する ✅ 追加・変更した内容 1. UIコンポーネントの作成（仮質問画面） return ( <div style={{ padding: '2rem' }}> <h2>質問：{question.text}</h2> <div style={{ marginTop: '1rem' }}> {question.options.map((option, index) => ( <OptionButton key={index} label={option.label} /> ))} <
JSer.info #732 - Zod 4 betaがリリースされました。 Introducing Zod 4 beta | Zod Docs パフォーマンスとBundle Sizeの改善が行われ、Tree Shaking可能なAPIを提供する@zod/miniと@zod/coreパッケージが公開されています。また、再帰も可能なオブジェクトの定義をするz.interface() API、メタデータを管理するz.registry() API、JSONスキーマ変換のためのtoJSONSchema() APIなどが追加されています。その他にも文字列のTop Level APIの追加や変更、エラーメッセージをmessageからerrorパラメータへ変更など多くの変更が含まれています。 Next.js 15.3がリリースされ、Rspackをビルドツールとしてサポートするようになりました。 Next
This blog site has been archived. Go to react.dev/blog to see the recent posts. Just three and a half years ago we open sourced a little JavaScript library called React. The journey since that day has been incredibly exciting. Commemorative T-Shirt In order to celebrate 50,000 GitHub stars, Maggie Appleton from egghead.io has designed us a special T-shirt, which will be available for purchase from
Cloudflare Workers、フルスタックアプリの構築とホスティングが可能に。新たにNext.jsやAngularなどに対応、MySQLへの接続も Cloudflareは、同社が提供するグローバルなコンテンツデリバリーネットワーク（CDN）のエッジにおいてJavaScriptのランタイムを提供する「Cloudflare Workers」の新機能や機能強化を発表しました。 You can now deploy static sites and full-stack applications on Cloudflare Workers – the primitives are all here. https://t.co/lDgcd4kh9j #DeveloperWeek — Cloudflare (@Cloudflare) April 8, 2025 Next.jsサポート、MySQ
初めまして。Qitta初投稿です。 2ヶ月で「Draw.ioとCacooを足して200で割ったアプリ」をReactで作った話です。ポエムはNoteに（ChatGPTがあることないこと）書いたので良ければ。 きっかけ 小さなSIerにいるんですが、いつまで経っても仕事でAI使う機会が出てず（大丈夫かSI業界）、ChatGPT-4oみて流石にマズいなと思い、個人開発で試したというところです。 Clineが良さそうですが、まずはスタンダードにGithubCopilot + ChatGPTでどれだけ効率変わるか、実際触って試してました。 あと、図形エディタのような高頻度なレンダリングにReactが耐えれるか試したかったのもあります。 できたもの 何かできるって段階にはまだ至ってないんですが、それらしく動くようになっています。それがこちら。 機能は大体こんな感じです。 四角形・円・線の作成 図形の移
Reactでリストをレンダリングするとき、ほとんどの場面でmapメソッドを使いますよね。公式ドキュメントでもそうだし、ネット上の記事やチュートリアルもほぼすべてがmapで実装しています。 JavaScriptの基本的なループ構文であるforループは使うべきではないのか？とまとまっている記事がなかったので、まとめてみたのと、実際に検証してみることにしました。 基本的な実装方法 まずは両方の実装方法を見てみましょう。 mapメソッドを使う方法 function ListComponent({ items }) { return ( <ul> {items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); } これが最もよく見かける方法です。JSX内に直接mapを書いて、配列の各要素に対応するJSX要素を返します。とて
「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに フロントエンド開発において、適切なライブラリやツールを選択することは、プロジェクトの成功を左右する重要な要素です。 特に React を中心としたエコシステムでは、UI コンポーネント、状態管理、フォーム、データ通信、スタイリング、テストなど、さまざまな分野で数多くのライブラリが存在します。 それぞれのライブラリには独自の特徴や強みがあり、プロジェクトの規模や要件に応じて最適なものを選ぶ必要があります。 しかし、これだけ多くの選択肢がある中で、どのライブラリを選ぶべきか迷うことも少なくありません。 特に、初めてプロジェクトを立
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
3月29日、海外のテクノロジーメディアAIMが「Why Companies Are Moving Away from Next.js」と題した記事を公開した。この記事では、企業がNext.jsから離れつつあるという実情とその背景について紹介されている。 3月29日、海外のテクノロジーメディアAIMが「Why Companies Are Moving Away from Next.js」と題した記事を公開した。この記事では、企業がNext.jsから離れつつあるという実情とその背景について紹介されている。 以下に、その内容を紹介する。 Next.jsに対する不満の高まり 最近、複数の企業がNext.jsに関する問題を発表している（例: Northflank公式ブログの記事）。特に、フレームワークの脆弱性を悪用される事例（例:CVE-2025-29927）や深刻なパフォーマンス低下に直面する企業
従来のようにCSSファイルでスタイルを定義するのではなく、HTMLに直接スタイルを付けられるため、デザイン作業のスピードアップが期待できます。 書こうと思ったきっかけ ITスクールの制作課題で「短期間で見栄えのするUIを作りたい」と思ったことがきっかけです。 CSSの記述量を減らしながらデザインの自由度を保てるTailwind CSSを知り、その仕組みを自分用にまとめておくことにしました。 Tailwind CSSとは？ Tailwind CSSは、ユーティリティファーストなCSSフレームワークで、HTMLに直接クラス名を記述することでスタイルを適用していくのが特徴です。 一般的なCSSのようにクラスを定義してから使うのではなく、既に用意された小さなスタイル単位（ユーティリティクラス）を組み合わせてUIを構築します。 参考文献 特徴 ユーティリティファースト：細かいスタイルごとにクラスが存
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が空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
A technique that hostile nation-states and financially motivated ransomware groups are using to hide their operations poses a threat to critical infrastructure and national security, the National Security Agency has warned. The technique is known as fast flux. It allows decentralized networks operated by threat actors to hide their infrastructure and survive takedown attempts that would otherwise
はじめに 今回は、現代のWEB開発で最も使用されている言語/フレームワークであるTypeScript/React/Next.jsについて学ぶために、私がおすすめしたい学習資料についてご紹介したいと思います。 非常に有用で、初心者から中級者、上級者まで幅広い層に向けた内容が含まれていますので、時間を見つけて是非読んでみてください。 ※TypeScript/React/Next.jsって何？という方のために、簡単に以下にそれぞれご説明いたします。 TypeScript Microsoftが開発した、JavaScriptを拡張したプログラミング言語。JavaScriptに比べ、型安全性の向上によるエラーの早期発見や、型注釈でコードの意図を明確にすることによる可読性/メンテナンス性の向上が期待できる。現代のWEB開発においては、ほとんどの開発者がJavaScriptからTypeScriptへ移行し
JSer.info #730 - Next.jsがLTSポリシーを公開しました。現在のメジャーバージョンをActive LTSとし、それ以前のメジャーバージョンは最初のリリースから2年間はMaintenance LTSとしてメンテナンスされます。 Next.js Support Policy | Next.js by Vercel - The React Framework このLTSポリシーは、Next.jsのミドルウェアバイパスに関するポストモーテムの一環として公開されています。 Postmortem on Next.js Middleware bypass - Vercel Rsdoctor 1.0がリリースされました。webpack-bundle-analyzerのようにbundle sizeの分析やビルドの分析が行えるツールです。rspackまたはwebpackで利用できます。
はじめに Cognitoを使ってみようと思い、サンプルコードで動作確認していたところ困った挙動に遭遇したので、その対処法です。react(react+vite)のケースになります。 経緯 アプリケーションタイプはSPAで作成し、マネージドログインページを利用しています。 作成が終わると「Quick Setup ガイド」が出てくるので、手順通りコピペしました。 App.jsの全文はこのようになっています。 // App.js import { useAuth } from "react-oidc-context"; function App() { const auth = useAuth(); const signOutRedirect = () => { const clientId = "********"; const logoutUri = "http://localhost:30
はじめに 皆さん、こんにちは。 私は業務でデータ利活用基盤を取り扱っていること、2024 AWS Japan Top Engineer に選出されたということから、AWS GenU およびそれに必要なデータ基盤の探求 (Snowflake, dbt, Iceberg, etc) に取り組む必要があると考えています。 本投稿では、GenU のバックエンドである CDK コードを詳細に解説します。 自身そして閲覧して頂いた皆様の GenU への理解が少しでも深まり、生成 AI の民主化につながっていければと考えています。 GenU とは GenU は生成 AI を安全に業務活用するための、ビジネスユースケース集です。 バックエンドは AWS で、フロントエンドは Vite + React で動作します。 2025/3/10 時点の GenU のバックエンドについては、14 回に分けて解説してい
目標 Next.jsアプリのスケーラビリティを向上させる方法を学ぶ。 Redisを使ってキャッシュを実装する。 ブログの読み込み速度を最適化し、大規模運用に備える。 1. 企業向けアプリにおけるスケーラビリティの重要性 企業向けアプリでは、ユーザー数の増加やトラフィックの急増に対応する必要があります。Redisを使ったキャッシュは、データベースへの負荷を軽減し、高速なレスポンスを実現します。このエピソードでは、ブログの投稿リストをキャッシュします。 2. Redisのインストールと設定 Redisをプロジェクトに導入します。 手順： ローカルRedisのインストール（オプション）： Dockerを使用する場合：
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
