React は次の10年を生き残れるか：3つのトレンドから考えるReact Tokyo ミートアップ #7 のメイントークのスライド。 https://react-tokyo.connpass.com/event/358171/
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
Announcing Vite 7
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 s
Announcing Oxlint 1.0
TL;DR: The first stable version Oxlint has been released! With a 50~100x performance improvement over ESLint, support for over 500 ESLint rules, and usage in major companies like Shopify, Airbnb, and Mercedes-Benz, you should give it a try. Get started now. Oxlint is a Rust-powered linter for JavaScript and TypeScript is designed to be fast and simple to adopt. Since its first announcement back in
ネイティブモジュールに依存しない node-canvas 代替ライブラリを使う - mizdra's blog
Web フロントエンドにて、Canvas を使った View のテストを書きたいことがたまにあります。ブラウザであれば以下のようにして Canvas を利用できますが、テストが実行される Node.js ではそのような API は生えていません。 const canvas = document.createElement('canvas'); canvas.width = 200; canvas.height = 200; const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.fillRect(10, 10, 150, 100); そこで Node.js では、node-canvas という npm パッケージがよく使われます。これを使うと、Web Canvas API 互換な API を用いて、Node.js
プロジェクトを壊さず安全に npm から yarn4 へ移行する
これはなに 長らく node パッケージマネージャーとして npm が使われてきたプロジェクトを yarn v4 に移行する手順をまとめたものです。 単純に移行するだけなら何も考えず yarn を導入して終わりですが、依存する node パッケージのバージョンを一切変更することなく移行するとなれば一筋縄ではいかなくなります。立ち上げ時から増改築を繰り返して膨大な数の node パッケージに依存しているプロジェクトですと、ほんの少しバージョンがズレただけで壊れてしまうことも珍しくありません。本稿ではそのような類のプロジェクトでも可能な限り安全に npm から yarn4 へ移行する手順をご紹介します。 前提 プロジェクトが依存するパッケージ情報は ^ 付きで package.json にバージョンが記載されているものとする。 プロジェクトには package-lock.json があるものと
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様)
気合の脱 create-react-app からの、AIによるフロントエンド改修の自動化 (株式会社イルシル様) 株式会社イルシル様の依頼で、フロントエンドの近代化とパフォーマンス分析を行った事例を紹介します。 「イルシル」は、生成AIでスライド資料作成を自動化し、誰でも簡単にスライドやパワポが作れるサービスで、スライドのデザインは1,000種類以上あり、入力したテキストからスライドを自動生成できるだけでなく、オリジナルで作成することも可能です。 いわゆる、複雑フロントエンドの事例です。ブラウザ上でAI経由でスライドを生成して、それをUIから編集でき、最終的には PDF や パワーポイントとしてエクスポートします。 LCP や CLS ではなく、 TBT やメモリリークの調査がメインになります。 長くなったので最初に要約します。以下の内容を含みます。 泥臭い CRA => Vite 移行
Why We Moved off Next.js - Documenso
Join the conversation on X: https://x.com/documenso/status/1907019629652058196 When we started building Documenso, choosing Next.js was a no-brainer. We wanted SSR (server-side rendering), easy routing, and the vibrant community that came with it. It helped us ship fast, iterate quickly, and provided all the essentials in one neat package. For a while, it was exactly what we needed. Early Adoption
LINEヤフーのフロントエンド技術を明らかにするState of LY Frontend 2024実施レポート
LINEヤフーでは、2024年の10月に社内のWebフロントエンド開発に携わる社内のメンバーを対象に、昨今のWebフロントエンド関連のトレンドや周辺ツールの利用状況について調査するアンケート「State of LY Frontend 2024」を実施しました。これは、以前は「UIT Global Survey」とも呼ばれていた取り組みの後継でもあり、毎年社内に向けて実施されているものです（昨年度の実施レポート）。同様の取り組みとして State of JavaScript や State of CSS が知られていますが、そのLINEヤフー版と想像していただけるとわかりやすいかと思います。 今回のサーベイは、合併会社誕生後1年がたち、新会社の体制が整って以来初めて広く周知されたものとなりました。そのため、Webフロントエンド開発者だけで 342人 という、単独のグループ社員としてはあまり例
2024 JavaScript Rising Stars
Welcome to the 9th edition of JavaScript Rising Stars, your guide to the top trends and projects shaping the JS ecosystem in 2024. The following graphs compare the number of stars added on GitHub over the last 12 months. We analyzed projects coming from Best of JS, a curated list of the best projects related to the web platform. Note that you can click on a project to get more info.
【レンダリング大全】CSR, SSR, SPA, MPA, PPRの意味、そもそもレンダリングとは【2025年始】
はじめに フロントエンド開発 においてレンダリングという言葉はさまざまな場面で登場します。さらに、Server-Side Rendering(SSR)のように「レンダリング」という言葉が名前に含まれているものを含め、Single-Page Application(SPA)など、レンダリングに関連した議論でよく使われる用語も数多く存在します。 そして、これらの用語の意味はフロントエンドの技術の進化に伴い、徐々にニュアンスが変化してきているように感じています。 他のエンジニアとこれらの用語について話す中で、「自分はそれをSSRとは呼ばない」「SPAにはいくつかの意味があるよね」といった意見を耳にし、人によって解釈が異なることを実感しました。 では SSR や SPAなどといった用語は今日どういった意味で使われているのでしょう。そもそも、「レンダリング」とはどういう意味なのでしょうか。SSR に
React Router から TanStack Router へ徐々に移行する技術
この記事は情報の提供のみを目的としています．今回紹介する方法はどちらのライブラリにおいても公式の手法としてサポートされていません．この方法を用いたことにより発生したいかなる損害について，私および弊社は責任を負いません． はじめに 世間では Next.js や Remix といったフルスタックフレームワークが話題となっていますが，皆さんはどのような環境で React アプリを開発しているでしょうか．Vite などのツールを使ってビルドされた，いわゆる SPA [1] を開発されている方もまだまだ多いのではないでしょうか． 私もその一人です．とくに弊社が提供する workhub では各組織の管理画面として Web アプリを提供しており，これは React + Vite の構成となっています． こうした SPA であって，かつ多画面を提供するアプリの場合，一般にルーティングライブラリが利用されま
State of JavaScript 2024
Let's take a second to consider something: 2024's top three front end framework were all launched over a decade ago. Now sure, all three have evolved a lot along the way, and the patterns of 2014 would seem downright antiquated today. But given the JavaScript ecosystems's reputation as a constantly-churning whirlwind of change, it can be nice to know that some things do remain constant. Speaking o
フロントエンドフレームワークからサーバーにアクセスするパターン | フューチャー技術ブログ
僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け
React系フレームワーク、何を使うべきか2024年秋 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 数年前までは Next.js 一強だった React 系フレームワークですが、最近では様々な対抗馬が生まれ混沌としてきています。 本記事では自分の思考整理も兼ねて、それぞれのフレームワークの特徴を洗い出したものです。フレームワークの選定に役立てて貰えたなら幸いです。 前提事項 ここにある全てのフレームワークについて筆者が精通している訳ではありません 間違っていたら優しく指摘してください React 系フレームワークには React / Preact の他、タイトル詐欺で怒られそうだなと思いつつ React 風の JSX が書けるフレーム
Framework reimagined for the edge! 📚 Qwik Documentation
Because Qwik skips hydration, your applications are instantly interactive. This is accomplished by resumability.
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
You Don't Need Next.js | ドクセル
[beta] Next.jsクイズ2 • <p>にはなにが表示されるでしょうか？ /app/page.tsx "use client"; import { useCallback, useEffect, useState } from "react"; export default function Home() { const [date, setDate] = useState(); const fetchDate = useCallback(async () => { const response = await fetch("/api"); const data = await response.json(); setDate(data.date); }, []); useEffect(() => { fetchDate(); }, [fetchDate]); return ( <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.solidjs.com/
フロントエンドの現在地とこれから
