久しぶりに、いわゆるポエムを。 新規・運用ヘルプを問わず、受託や副業でよくフロントエンドをやってるWeb屋の見解、そして手札のお悩み。 この先、また技術選定する際なんかにも参考になるかと思ったので。 React 「いまフロントエンドやるなら最初に覚えるべき！」は、もう過去の話かなーと個人的には思ってる。 Reactは`UI = fn(state)`なのが良い！とか言われるけど、あなたが必要としてるのは`UI = Component(props)`かもよって。 一昔前までは、たしかにあらゆる面で頭一つ抜けてる印象はあったけど、今はそうでもないか、その差はだいぶ埋まってきてると思ってる。（もちろん先行者利益みたいなところで、エコシステムはまだまだ優位な差があるかもしれんけど、それもあまり実感できたことはないし、いまからはじめる人はそんなんで困らんやろうし） 原初の時代からReactな案件をそれ
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方、既
ジャンプTOON Next.js App Router の活用〜得られた恩恵と課題〜 | CyberAgent Developers Blog
目次 はじめに Colocation を意識した設計方針 Parallel Routes と Intercepting Routes を用いた設計パターン サーバー側に処理を寄せたことによる恩恵と課題 Next.js が抱える課題 おわりに 参考文献 はじめに ジャンプTOON のWeb版（以降、ジャンプTOON Web）の開発を担当している浅原昌大（@assa1605）です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON のフロントエンドには、Next.js を採用し開発をしています。 本記事では、Next.js の最新機能や設計パターン、Next.js を採用した恩恵と現在の課題について紹介します。 Colocation を意識した設計方針 Parallel Rou
Today we're releasing Connect, a slim framework for building browser and gRPC-compatible HTTP APIs. Connect is production-ready — focused, simple, and debuggable — and it's fully compatible with gRPC clients and servers. If you're frustrated by the complexity and instability of today's gRPC libraries, we think you'll find Connect a breath of fresh air. connect-go is available now under an Apache 2
仕様駆動開発を支える Spec Kit を試してみた
仕様駆動開発（Specification-Driven Development, SDD）は、AI コーディングエージェントを活用した新しいソフトウェア開発スタイルです。GitHub が提供する Spec Kit は、仕様駆動開発を支援するためのツールキットであり、AI との対話を通じて正確な受け入れ基準の定義とコード生成を支援します。この記事では Spec Kit を使用して仕様駆動開発を試してみます。 Kiro と呼ばれる AI IDE の登場は、仕様駆動開発と呼ばれる AI コーディングエージェントを活用した新しい開発スタイルの可能性を示しました。仕様駆動開発とは、まず AI と対話しながら要件定義・システム設計を行い、その後作成した設計書をもとに AI にコード生成を行わせる開発スタイルです。 ユーザーの要求をまず明確な仕様として定義することで、ユーザーが頭の中で思い浮かべていた要
ROUTE06 でソフトウェアエンジニアをしている @MH4GF です。 ROUTE06 ではエンタープライズ向けビジネスプラットフォーム「Plain」を開発しています。この記事では 2023 年 8 月に Plain クラウド EDI の Web フロントエンドで採用している技術について、その選定理由をまとめました。 現代の Web フロントエンド技術は領域ごとに選択肢が多く、プロダクトに最適な技術選定をする上で検討事項が多いと感じます。この記事がフロントエンド技術選定において参考になれば幸いです。 前提 プロダクトの特徴 技術選定に影響するプロダクトの特徴を箇条書きでまとめます。 エンタープライズ向け SaaS 現在開発中のプロダクトは商取引におけるクラウド EDI のドメインにフォーカス Plain が解決する課題は、元々フルスクラッチで開発すると 1 年かかるプロダクトの開発期間を
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて2024-03-28 この記事は 実践 Next.js の書評です。 見本誌を頂いた上での記事です。（PR記事？） tl;dr App Router のメリットを理解しつつも、学習コストに割り合わないと思っている人にオススメ！ドキュメントを読めるようになるし、学習コストが下がる。 はじめに 自分はどちらかというと今の Next.js に対しては否定的な感情の割合の方が高く、仕事で困らない程度の最低限の知識しか持っていない。 しかし、なんだかんだ勉強の必要性に駆られていて、そのキャッチアップとして同書の発売を楽しみにしていた。 そんな折に @takepepe さんから見本誌をいただいたことで、この週末に読んだので書評を書きたい。 俺は今のNext.jsが好きではない 書評を書く前にポエム書かせてくれ！
Developers are increasingly relying on AI coding assistants to accelerate our daily workflows. These tools can autocomplete functions, suggest bug fixes, and even generate entire modules or MVPs. Yet, as many of us have learned, the quality of the AI’s output depends largely on the quality of the prompt you provide. In other words, prompt engineering has become an essential skill. A poorly phrased
数週間前、私たちの本番アプリがハングし始めました。コンポーネントがランダムに読み込まれなくなったのです。ユーザーの画面ローディングスピナーの前で固まってしまいました。40時間デバッグした末に、私たちは気づきました。React Server Components（RSC）が問題だったのです。 イントロダクション：理想 vs. 現実 当初、React Server Components（RSC）は革命的であるはずでした。 Reactチームは以下を強調していました： ✅ パフォーマンスの向上 ✅ バンドルサイズの削減 ✅ 自動的なコード分割 ✅ コンポーネントからのダイレクトなデータベースアクセス 私たちは彼らを信頼し、Next.jsアプリ全体をServer Componentsと共にApp Routerへ移行しました。 3カ月後、私たちのアプリは以下の状況に陥りました： 初期ロードが遅い デバ
Vite 8.0 is out! March 12, 2026 We're thrilled to announce the stable release of Vite 8! When Vite first launched, we made a pragmatic bet on two bundlers: esbuild for speed during development, and Rollup for optimized production builds. That bet served us well for years. We're very grateful to the Rollup and esbuild maintainers. Vite wouldn't have succeeded without them. Today, it resolves into
GitHub - modelcontextprotocol/servers: Model Context Protocol Servers
Official integrations are maintained by companies building production ready MCP servers for their platforms. 21st.dev Magic - Create crafted UI components inspired by the best 21st.dev design engineers. 2slides - An MCP server that provides tools to convert content into slides/PPT/presentation or generate slides/PPT/presentation with user intention. ActionKit by Paragon - Connect to 130+ SaaS inte
かなり昔に Elasticsearch ベースの検索システム（Heineken）を作っていた。 Elasticsearch で部内 Wiki 検索高速化 - Speaker Deck 特に更新せず数年動かしていたのだけど、サーバーの置き換えに伴って Kubernetes に置きたいよねという話になり、ついでに Elasticsearch も新しくしたいよね、となった結果、現状のフロントエンドだと最新の Elasticsearch では動かないということがわかった。 nonylene.hatenablog.jp フロントエンドの改修が必要なわけだが、ここでフロントエンドの構成を見ると… FlowType create-react-app PureComponent Bootstrap 3 古すぎる！絶対アップデート難しいし触りたくない技術しかない。 フロントまわりの構成を変えたいとずっと思っ
公式ブログによると、Laravel Boostは17,000以上のベクトル化されたドキュメントにアクセスし、使用しているLaravelのバージョン固有（10.x、11.x、12.x）の情報を提供する仕組みになっているとのことです。 Laravelに特化したガイドラインを生成してくれる AIエージェントを活用したLaravel開発でよく起こる問題（バージョン差異によるディレクトリ構造の違いなど）を防ぐためのガイドラインを作成してくれます。 公式ブログでは、このガイドラインについて以下のように説明されています。 These are composable, version-specific rules that nudge the agent to follow conventions, add tests when appropriate, use the correct APIs, and
Next.js のリリースは追っておこう
この記事は Magic Moment Advent Calendar 2024 16 日目の記事です。 Magic Moment でフロントエンドエンジニアをやっている negishi です。 最近引っ越しをしたのですが、自宅から 10 分圏内にラーメン二郎・家系・中本があるのでラーメン好きな私の QOL が最高潮に達しています。 はじめに 弊社は React を採用しフロントエンド開発を行っています。 React でフロントエンドを開発する際には、公式ドキュメントでも推奨されているように Next.js や Remix (react-router-dom v7 に統合されましたね) などのフレームワークを用いることも選択肢として存在します。 弊社ではこうしたフレームワークは採用しておりませんが、最近 Next.js にフロントエンドメンバーで触れる機会がありました。 React のフレー
Vite 7.0 is out! June 24, 2025 We're happy to share the release of Vite 7! It has been 5 years since Evan You sent the first commit to the Vite repo, and nobody could have predicted how much the frontend ecosystem would change since then. Most modern frontend frameworks and tools are now working together, building on top of Vite's shared infrastructure. And they can innovate at a faster pace by
Turborepo is a high-performance build system for JavaScript and TypeScript codebases. We're reimagining build systems, taking inspiration from tools like Buck and Bazel, to make them accessible for everyone. At the heart of Turborepo is a very simple idea: never do the same work twice. We accomplish this through incremental builds, parallel execution, and Remote Caching. As usage has grown and pro
Claude Code Workflow Studio完全ガイド｜ビジュアルでAIワークフローを構築する新時代｜アイドリ | AI-Driven Lab
本記事の対象者主な対象者: Claude Codeを使っているがワークフロー機能を活用しきれていない方、AIエージェントによる自動化に興味がある開発者・ビジネスパーソンを想定しています。 技術レベル: 初級〜中級を想定しています。 前提知識: Claude Codeの基本的な使い方（ターミナルでの対話）とVS Codeの操作を理解していることを前提としますが、ワークフロー機能の知識は不要です。 この記事で得られるもの: Claude Code Workflow Studioのインストールから実践的なワークフロー構築まで一通り習得でき、複雑なAIエージェント連携を自力で設計できるようになります。 要約本記事の主要トピック: 本記事はClaude Code Workflow Studioの概要と解決する課題、具体的なインストール・操作方法、実践的なユースケースの三点を中心に解説します。 記事の
Vite 6.0 is out! November 26, 2024 Today, we're taking another big step in Vite's story. The Vite team, contributors, and ecosystem partners are excited to announce the release of Vite 6. It has been an eventful year. Vite adoption keeps growing, with npm downloads per week jumping from 7.5 million to 17 million since the release of Vite 5 a year ago. Vitest is not only being favored more by user
Storybook 7.0
Storybook is the gold standard UI workshop environment. It’s used across the industry by teams at Monday.com, The Guardian, Intuit, and many others due to its unparalleled framework compatibility and rich features for development, documentation, and testing. Today, I’m excited to announce Storybook 7 (SB7), our first major release in over two years and by far our largest ever. It includes: ⚡ First
The Web’s Next Transition
The web is made up of technologies that got their start over 25 years ago. HTTP, HTML, CSS, and JS were all first standardized in the mid-nineties (when I was 8 years old). Since then, the web evolved into a ubiquitous application platform. As the web has evolved, so too has the architecture for the development of these applications. There are many core architectures for building applications for
Open source and open development don't always go together. I know because I've personally done a lot of open source but not enough open development. OSS Capital's Joseph Jacks, who led our seed round of funding, said something that has stuck with me ever since he said it: You are building something that is generationally important (No pressure 😅) I believe it. But Remix can't become a generationa
こんにちは。ウォンテッドリーでフロントエンドチームのリーダーをしている原です。 先日「Next.js の Version Skew 問題に向き合う」というタイトルでブログを公開しました。詳細は該当記事に譲りますが、ざっくり内容をお伝えすると次のような内容になっています。 Next.js アプリケーションにおいて、ブラウザで動作しているバンドル中の buildId とサーバーで動作しているアプリケーションの buildId が異なると、getServerSideProps で受け取れるはずのデータが受け取れなくなり、アプリケーションが正常動作しないケースが存在する。SPA 遷移する際 router events で buildId がマッチするかどうかを確かめて、ミスマッチが起きていたらブラウザリロードをすることで解消できる。公開後、X にて「通常の Next.js の挙動と異なるのでは。他
5 Lessons Learned From Taking Next.js App Router to Production - Inngest Blog
Next.js 13 introduced the new App Router that offers several new features, including Nested Layouts, Server Components, and Streaming. It’s the first open-source implementation that allows developers to fully leverage the primitives brought by React 18. It was in beta for a while, but since Next.js 13.4, which was just released, it’s now considered production-ready. We recently redesigned the Inng
Next.js 15.5
Next.js 15.5 includes Turbopack builds in beta, stable Node.js middleware, TypeScript improvements, next lint deprecation, and deprecation warnings for Next.js 16. Highlights for this release include: Turbopack Builds (beta): Production turbopack builds (next build --turbopack) now in beta Node.js Middleware (stable): Node.js runtime support for middleware is now stable TypeScript Improvements: Ty
Next.js 15.4
Next.js 15.4 includes updates to performance, stability, and Turbopack compatibility. Highlights for this release include: Turbopack Builds: 100% integration test compatibility for next build --turbopack Stability Improvements: Numerous stability and performance improvements to Next.js and Turbopack This blog post also includes an early preview of what's coming in Next.js 16, our next major releas
Welcome to Solito | Solito
Solito is the missing piece for using React Native with Next.js to build powerful cross-platform apps. AboutThis library is two things: A tiny wrapper around React Navigation and Next.js that lets you share navigation code across platforms.A set of patterns and examples for building cross-platform apps with React Native + Next.js.MotivationIn 2021, I spoke at Next.js Conf about how I built beatg
Date: June 23, 2023 | Estimated Reading Time: 31 min | Author: Lilian Weng Building agents with LLM (large language model) as its core controller is a cool concept. Several proof-of-concepts demos, such as AutoGPT, GPT-Engineer and BabyAGI, serve as inspiring examples. The potentiality of LLM extends beyond generating well-written copies, stories, essays and programs; it can be framed as a powerfu
WP REST API × NuxtJS で SSG するサイト作り｜TechRacho by BPS株式会社
ebi です。定期ネタの WordPress 芸をやっていきます。 今回は一度やってみたかった WP REST API を利用したサイトに少し手出してみます。 React より Vue.js の方がまだ触ったことあるので NuxtJS を使ってみます。 また、 SSR だとホスティングするサーバをどうするかの問題が出てくるので SSG 前提のサイト構成にしてみようと思います。 そんなわけで実験がてらこう言う構成のサイト作りをやってみることにしました。 GitHub にコードも晒しておくので最終的なコードの細かい詳細見たい方は後で確認してください。 CMS として WordPress を採用している理由 正直自分自身にとって馴染みがある以外の理由は特にないです。 近年、 ContentFul や microCMS などのヘッドレスCMSが台頭してきているので、好みでそう言う CMS を選
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson Detailed thoughts on how React has been developed over time, and explanations for common community confusion and concerns Introduction 🔗︎ Today, the state of React and its ecosystem is complicated and fractured, with a mixture of successes, skepticism, and contention. On the positive side: React is the most wide
Blogged Answers: My Experience Modernizing Packages to ESM
Random musings on React, Redux, and more, by Redux maintainer Mark "acemarke" Erikson This is a post in the Blogged Answers series. Details on the painful experiences and hard-earned lessons I've learned migrating the Redux packages to ESM Table of Contents 🔗︎ Introduction Redux Packages Background Packages and Configurations Issue History Early Attempts Migrating to Vitest Initial Alpha Testing
Turbopack Dev is Now Stable
Back to BlogMonday, October 21st 2024 Turbopack Dev is Now StablePosted by It's been a long road, but we are happy to announce that next dev --turbo is now stable and ready to speed up your development experience. We've been using it to iterate on vercel.com, nextjs.org, v0, and all of our other applications with great results. Since its release 8 years ago, Next.js has been used to build everythi
はじめに こんにちは。ここ最近、React v19が注目を集めているように感じます。 最近ではついにReact v19のRCバージョンもリリースされました。 Just published React 19.0.0-rc.0. This is the exact build we'll release as 19.0, unless an issue is reported that requires a breaking change. Thank you to everyone who helped us get the release into shape!— Andrew Clark (@acdlite) 2024年6月3日 そう遠くないうちにReact v19がリリースされる可能性もありそうです。そこで、React v19のリリースによる周辺ライブラリへの影響などについて、弊社で採
Vite 8 Beta: The Rolldown-powered Vite December 3, 2025 TL;DR: The first beta of Vite 8, powered by Rolldown, is now available. Vite 8 ships significantly faster production builds and unlocks future improvement possibilities. You can try the new release by upgrading vite to version 8.0.0-beta.0 and reading the migration guide. We're excited to release the first beta of Vite 8. This release unifi
How Functional Programming Shaped (and Twisted) Frontend Development A friend called me last week. Someone who’d built web applications back for a long time before moving exclusively to backend and infra work. He’d just opened a modern React codebase for the first time in over a decade. “What the hell is this?” he asked. “What are all these generated class names? Did we just… cancel the cascade? W
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でプレースホルダーを
ウェブアプリケーションフレームワークとして最近注目度が少しずつ上がっているのがSvelteです。以前、Svelteをちょびっとサンプルを触ってみた感じ、コードの雰囲気は<script setup> 版のVue 3っぽいなー、という感じです。あとはプロパティ入力のあるコンポーネントでHTMLを生成するという基本構成はReactもAngularもみんなそうなので、今時のウェブフロントエンドのフレームワークを触ったことがあれば難しくはない気がします。 1コンポーネントでおさまる範囲ではちょっと前にかんたんなアプリの試作をしてみました（毎週何回も使ってるので手間の割に活躍してます）が、じゃあ、一本分のアプリを作るときはどうなんだ、ということでSvelteKitでプロジェクトを新規で作ってみたけど、いろいろな未知の要素がでてきて、これはどうなんだ？ というのをドキュメントから探す、という学び方もまあ
TanStack Router is an incredibly exciting project. It’s essentially a fully-featured client-side JavaScript application framework. It provides a mature routing and navigation system with nested layouts and efficient data loading capabilities at every point in the route tree. Best of all, it does all of this in a type-safe manner. What’s especially exciting is that, as of this writing, there’s a Ta
@neshca/cache-handler を利用した Custom Next.js Cache Handler の実装
はじめに こんにちは、READYFOR のテックリード兼フロントエンドエンジニアの菅原（@kotarella1110）です！ 最近、Next.js App Router アプリケーションの実運用化に向けた PoC を実施しました。 この中で構築したアプリケーションはセルフホスト環境にデプロイするようにしており、Custom Next.js Cache Handler を使って Redis にキャッシュを保存するようにしました。Custom Next.js Cache Handler の実装には @neshca/cache-handler というライブラリを利用しています。実際にこれらを使用してみると、Next.js 標準のキャッシュ挙動との違いや、考慮すべき課題がいくつか明らかになりました。 そこで本記事では、これらの課題を踏まえつつ、Custom Next.js Cache Handle
Advanced React in the Wild
Advanced React in the WildProduction Case Studies from Ambitious Web Projects (2022–2025) Introduction React and Next.js have powered some of the web’s most ambitious projects in the last few years. In this period, teams have pushed the envelope on performance (achieving dramatic gains in Core Web Vitals like LCP and the new INP metric), balanced server-side and client-side rendering trade-offs, d
Michael Jackson, co-creator of React Router, said it best: React Router isn't just mine and Ryan's baby anymore. It is a mature OSS project with millions of dependents. We want everyone to have a say in how the project moves forward. React Router has been around for over 10 years under the development and oversight of Michael and Ryan. When they obtained funding for Remix in 2021 and built a team
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のフロントエンドフレームワークに対する認識とお気持ちの整理 - console.lealog();
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Connect: A better gRPC
Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog
Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて
The Prompt Engineering Playbook for Programmers
React Server Componentsの本番運用上の課題について | POSTD
Vite 8.0 is out!
検索システムのフロントを SSR・Remix で作り直した - Unyablog.
なぜSerenaからLaravel Boostに変えるとAIの精度が上がるのか
Vite 7.0 is out!
Why Turborepo is migrating from Go to Rust - Vercel
Vite 6.0 is out!
Open Development for Remix
Next.js Version Skew 真相解明編 | Wantedly Engineer Blog
LLM Powered Autonomous Agents
The State of React and the Community in 2025
React v19に関する周辺ライブラリへの影響と対応状況について - RevComm Tech Blog
Vite 8 Beta: The Rolldown-powered Vite
How Functional Programming Shaped (and Twisted) Frontend Development
2024-11-26のJS: Angular v19、Deno 2.1(LTS)、React Router v7(from Remix)
SvelteKitのデフォルトプロジェクトから学ぶ | フューチャー技術ブログ
Introducing TanStack Router – Frontend Masters Blog
React Router Open Governance