Next.jsと状態管理のプラクティス2025-05-14 技術選定を突き詰める ～ Online Conference 2025 ～
バーチャルスクロールの限界を突破する
はじめに 私は今、CSVエディタ SmoothCSV 3 を開発しています。フレームワークとして Tauri を採用しており、レンダラーにはWebの技術（React + TypeScript）を使っています。 CSVエディタは大量の行・セルを表示する必要がありますが、Webの技術ではこのようなシーンではバーチャルスクロールを使うのが定石です。 SmoothCSVでもバーチャルスクロールを使っていましたが、どうやらこのバーチャルスクロールにも限界があるらしく、数百万行のような極端に大量のデータを表示する場合に最後まで表示しきれない問題に遭いました。 ここではバーチャルスクロールの基本と、その限界をどう乗り越えたかを紹介します。 About Me 株式会社ヘンリーでソフトウェアエンジニア & アーキテクト的なことをしつつ、個人開発してます。 Social accounts: kohii on
Rails vs Node.js
Previous slideNext slideToggle fullscreenOpen presenter view Rails vs Node.js 最終章 「Prisma」 @mizchi Cloudflare Meetup 2024/10/02 今日の Prisma + Cloudflare の様子 About https://x.com/mizchi Node.js とフロントエンドの専門家 100万円*達成率で御社のフロントエンドの高速化をやります 前書き フロントエンド/Node.js 視点のポジショントークです Railsに対するチャレンジャーとして Node.js を使ってきた話 Rubyの開発者やRubyのユーザーを否定する意図はありませんが、好き嫌いは否定しません。型が好きです 「Rails」は 2010年前後に流行っていた任意なWAFに置き換え可能 Symfony
TanStack Routerでサクッと始める型安全ルーティング
はじめに こんにちは。calloc134 です。 自分は普段 React を利用してフロントエンドの開発をしています。 SPA のルーティングを実装する上で、TanStack Router を利用することが多いです。 この使い方について、簡単にまとまったドキュメントが思ったより少なく感じたため、まとめていきたいと思います。 TanStack Router とは TanStack Router は、React のルーティングを行うためのライブラリです。 当初は React Location として、TanStack の Tanner Linsley 氏によって開発されました。 その後、改名や設計のし直しが行われ、TanStack Router として開発されており、2023 年のクリスマスに v1 がリリースされました。 現在は色々な機能が追加されており、React のルーティングを行うため
Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
React Server Componentsを理解する | POSTD
私も年を取ったと感じるのは、今年Reactが10年目を迎えたからです。 混乱していた開発コミュニティにReactが初めて紹介されてから10年、以来いくつもの進化を遂げてきました。Reactチームは、急進的な改革ということに関しては躊躇しませんでした。問題に対して、より良い解決策が見つかれば、それを実行してきました。 数か月前、Reactチームは最新のパラダイム・シフトであるReact Server Componentsを発表しました。史上初めて、Reactコンポーネントがサーバーでのみ実行できるようになったのです。 このことに関連してオンライン上では、きわめて大きな混乱が起きています。それが何なのか、どのように機能するのか、利点は何か、そしてSSR（Server Side Rendering）などとどのように連携するのか、多くの人が多くの疑問を抱いています。 私はReact Server
JavaScript なしで動作するモダンなコードの書き方
Next.js、Remix、SvelteKit といった近年のフレームワークは、JavaScript がなくても動作することを一つの価値として提供しています。 例えばSvelteKit のフォームではプログレッシブエンハンスメントとして、JavaScript が利用できる環境ではリッチなユーザー体…
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
そんなに有名じゃないけど、このReactライブラリは面白い！
¡Hola! こんにちは！テラーノベルのオスカルです。Webの開発をしてます。いつも言うんだけど、日本語はまだまだ勉強してますので、応援してください！ ᕦʕ •ᴥ•ʔᕤ 今回、Reactのライブラリについてこの記事を書こうと思いました。そんなに有名じゃないライブラリなので、たぶん良い読み物だと思います！ 1- sweetalert2 🔗 懐かしい！！。。。これはReactだけじゃなくて、Javascriptのライブラリです。結構前から使ってます、jQuery時代からも！ユーザーにさまざまなメッセージを表示するために使用できるUIライブラリです。 このコードだけで： Swal.fire({ icon: 'error', title: 'オイ！！', text: '押さないでって言ったじゃん！', }) このクールなメッセージを示しています： エラーかお知らせだけじゃなくて、ユーザーに入力を
Astroを選ぶ理由 🚀 Astroドキュメント
ようこそ！ Astroを選ぶ理由 アイランドアーキテクチャ コース 新規プロジェクトの作成 インストール ディレクトリ構成 開発とビルド 設定ファイルの構成 設定の概要 エディタのセットアップ TypeScript Environment variables Working with integrations AIで構築 開発ツールバー ルーティングとナビゲーション ページ Routing Endpoints Middleware Internationalization (i18n) Prefetch View transitions UIの構築 コンポーネント レイアウト Styles and CSS Fonts シンタックスハイライト Scripts and event handling フロントエンドフレームワーク コンテンツの追加 Markdown Content collect
プロトタイピングツールとしての RedwoodJS
本稿は、Webアプリのプロトタイプを作るための道具として RedwoodJS を紹介する記事です。 前説：プロトタイピングにおける技術選定 シンプルなWebアプリのプロトタイプを作るとき、みなさんはどのような技術選定を行うでしょうか。 プロトタイプと言えど UI の検証もある程度は含んでいる場合がほとんどなので、筆者としては UI の構築には React を利用したい[1]ところです。テンプレートエンジンでは著しく開発効率が落ちるので、フルスタックフレームワークとしての Rails や Django はこの時点で選べないことになります。 しかし、React を選んだとしても大半のアプリケーションでは永続層が必要ですし、フロントエンドで計算させたくないロジックも多々あります。バックエンドを別で作る場合に直面するのは、クライアント側とのAPIスキーマの整合性をどう取るかという問題です。できれば
qwik の発明、及びマイクロフロントエンドへの活用について - mizdra's blog
最近調べた qwik というライブラリが結構面白かったので、実際どういうものなのかとか紹介してみます。 qwik とは qwik は Web 向けの View ライブラリです (React や Vue.js の仲間)。パフォーマンスオタクがパフォーマンスの最適化 (Web Vitals の改善) にこだわって作ったライブラリです *1。 すでにいくつも良い紹介資料があるので、まずはこれらをいくつか読んでみると良いと思います。 Resumable な JavaScript フレームワーク Qwik を学ぶ Qwikの基本概念である Resumable を理解する Qwikというフレームワークについて - console.lealog(); Qwik調べてみたら結構面白かった qwik の詳しい使い方などは先人の記事に譲ることにして、以降は id:mizdra が個人的に面白いと思ったことを書
Guides: Testing | Next.js
In React and Next.js, there are a few different types of tests you can write, each with its own purpose and use cases. This page provides an overview of types and commonly used tools you can use to test your application. Types of tests Unit Testing involves testing individual units (or blocks of code) in isolation. In React, a unit can be a single function, hook, or component. Component Testing is
Reactベースのスプレッドシートのようなライブラリを作った話
あけましておめでとうございます🎍 Zennに書くのは初めてなのでお手柔らかにお願いします🙏 最近 お金がもらえる とても良いプラットフォームがあると聞いたのでこちらに書いてみることにしました👻 冗談はさておき、スプレッドシート便利ですよね。 こんなに便利なものなのでWebアプリケーションにも組み込みたいくらいなんですが、要望を満たしてくれるような高機能なライブラリはだいたい有料です😢 かねてより使いたいと思っていたHandsontableも有料版だけになってしまいました🥺 というわけで文句ばっか言っていても始まらないので自分で作ってみることにしたというのが事の経緯です。 デモ で、出来上がったのがこちらです🤲 CodeSandboxからStackblitzに変えました(少し遅い) そのほかのサンプルは こちら 機能 ショートカットキーについては以下をサポートしてます👀 全選択
究極のReact向けルーターライブラリ「Rocon」を作った - uhyo/blog
こんにちは。先月くらいからReact向けのルーターライブラリ「Rocon」を作っていて、この度alphaリリースという形で公開まで漕ぎ着けたので宣伝します。 現在のところ、以下のURLでチュートリアルを読むことができます。 このチュートリアルサイトはRoconを用いて作られています。 Roconチュートリアル: https://rocon.uhyohyo.net/Roconの特徴は非常に型安全であることです。 何よりも型安全性・型周りの快適性を優先してAPIが設計されています。 当然、TypeScriptと一緒に使うことが前提です。 また、Roconはreact-router-domの代替となることを意図しています。 そのため、Roconを使うべきとき・使うべきでないときをまとめると以下のようになります。 Roconを使うべきとき: 今react-router-dom等を使ってSPAを作っ
バックエンドエンジニアのためのVue.js、React、Angular入門（2025改訂版） - Qiita
解説のバージョン（2025年3月時点） Vue3.5 React19 Angular19 WEBシステム、WEBプログラム開発において昨今ではVue、React、AngularなどのJSフレームワークが主流となってきています。ただ、これらの活用は学習コストが高いといわれていました。その原因について、自分はフロントエンドありきで話が進みすぎていたからだと考えています。したがって、自分の投稿記事はバックエンド処理をメインにこなしてきたWEBシステムエンジニアに向けた、フォーム操作をメインに置いた半備忘録兼自分なりに解釈した解説となります。 ちなみに自分はサーバ構築からフロントエンド、バックエンドまでこなしているワンオペエンジニア（フリーランス、非正規雇用に非ず）です。それから自分は根っからの文系なので、公式チュートリアルの抽象的な説明(加えて、原本の英文ドキュメントに対し、日本語に慣れない人が
同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。 CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。 Tailwind Starter Kit Tailwind Starter Kit -GitHub Tailwind Starter Kitの特徴 Tailwind Starter Kitのデモ Tailwind Starter Kitの使い方 Tailwind Starter Kitの特徴 Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できま
Revery - Outrun Labs
Revery Building the Future of Software — One Line of Code at a Time. React in Native Code Intuitive. Revery is inspired by React, and built with Reason. Build native-code apps with your ReactJS skills! Cross-Platform. Windows, Mac, and Linux? No problem. Our focus is native, but Revery can run in the browser with WebGL, too. And mobile is next! Open Source. Revery is MIT Licensed, and built with t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
Inertia.js - The Modern Monolith
