Modern Node.js Patterns for 2025
Node.js has undergone a remarkable transformation since its early days. If you’ve been writing Node.js for several years, you’ve likely witnessed this evolution firsthand—from the callback-heavy, CommonJS-dominated landscape to today’s clean, standards-based development experience. The changes aren’t just cosmetic; they represent a fundamental shift in how we approach server-side JavaScript develo
p5.jsによるクリエイティブコーディング入門 - ICS MEDIA
ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。
Immer はどのように実装されているか - カミナシ エンジニアブログ
はじめに こんにちは。カミナシでソフトウェアエンジニアをしている tokuse(@stomy_13) です。 私が所属するチームが開発している現場帳票システム『カミナシ レポート』では、一部のアプリケーションで状態管理ライブラリの Zustand を使用しています。併せて Zustand の Immer middleware も使用しています。開発を進める中で Immer の内部実装を調査する機会がありました。 Immer は React の状態管理や Redux などと組み合わされて使われることが多く、多くの開発者に愛用されています。しかし、その便利さの裏にある仕組みについて詳しく知っている方は意外と多くはないと思います。 この記事では、Immer がどのように実装されているのか、その内部構造や仕組みのコア部分を簡単に解説します。 Immer とは Immer は「不変性を持つデータ構造
Webサービス+Discord BotのCloudflare移行記録(個人開発)
こんにちは、sugar-catです。 この記事はとある個人開発のWeb/DiscordサービスをVercelからCloudflareへ移行した際の記録です。 個人開発の内容については下記のスライドもご参考ください。 はじめに 開発したWebサービスについて サービスの内容 配信者（Vtuber）の配信スケジュールを一覧で確認できるWebサイトと、Discord Botを組み合わせたキュレーションサービスです。 利用状況 Webサイト：月間PV 20万〜30万程度 Discord Bot：370サーバーで稼働中（2025年6月1日現在） システムの特徴 リアルタイムでのコンテンツ更新（約1分間隔） YouTube/Twitch/ツイキャスの外部APIを大量利用 Discordの各サーバーに1分ごとに配信情報を通知 なぜ移行することになったのか 最初は2022年ごろにVercel + Fire
プロファイラを利用して Node.js サーバーのレスポンス時間を 200 秒 → 20 秒に短縮した話
どんな問題を解決したのか こんにちは、ダイニーの ogino です。 ダイニーでは、飲食店向けのクラウド POS レジを開発しています。その機能の一つとして、一ヶ月分の売上などの情報を印刷できる「月締伝票」があります。 月締伝票のサンプル 月締伝票に記載するデータは、Node.js バックエンドで集計をしています。この API はダイニーのバックエンド全体の中で最も重く、最近では一部店舗でレスポンスに 200 秒以上かかりタイムアウトエラーが発生していました。 その結果、月締伝票を発行することができないため顧客の業務に支障をきたし、複数の問い合わせが来ている状態でした。 プロファイラやログを手掛かりに調査したところ、ボトルネックを 2 行のコードだけに特定し、ほぼコストをかけずにレスポンス時間を 20 秒ほどに改善することができました。 改善リリース前後のレスポンス時間の変化 ボトルネック
shadcnを理解する
※shadcnさんの経歴などの話はしないです。 shadcn/uiは従来のUIライブラリとは一線を画した設計思想で構築されています。Radix UIのアクセシブルなプリミティブとTailwind CSSのユーティリティを活用した再利用可能なUIコンポーネント群です しかしこれは単なるパッケージ化された「コンポーネントライブラリ」ではなく、プロジェクトにコードをコピーして組み込む形式を採っています。おっと、コンポーネントライブラリとかRadix UIとかなんぞやと思った方、解説もあるのでちょっと待ってください。 ※Tailwind CSSの解説は省きます。 本記事では、shadcn背後にある設計哲学に焦点を当て、Buttonなど基本コンポーネントの内部構造や、CVA（Class Variance Authority）によるクラス管理、Tailwind CSSとの統合方法、Radix UIとの
Vitestの実行時間を8倍高速化：同一環境での実行によるパフォーマンス改善
はじめに Vitest はデフォルトの設定では、テストファイルごとに分離された環境を使用してテストを並列実行します。 この設定はグローバルな状態や副作用に依存した実装やライブラリなどを含むテストを並列実行するために有効です。 しかし、この設定は各テストファイルごとにテスト環境の起動や破棄を行うためテスト実行時間が長くなります。 この記事では React アプリケーションのテストコードを、環境の分離設定をやめて同一環境で実行することにより、実行速度を向上させた方法とそれに伴って発生した問題の修正方法についてご紹介いたします。 背景 弊社は microCMS というヘッドレス CMS を開発しており、その管理画面は React で開発されています。 大まかな構成としては、Vite を使用した SPA で、テストコードは testing-library/react を使用したコンポーネントテスト
Webフロントエンドでのリアクティビティからalien-signalsを知ろう
近年のWebフロントエンド開発において「リアクティビティ」という概念が非常に重要になっています。今回は、このリアクティビティにまつわる歴史を辿りつつ、2025年の1月にv1.0となったリアクティビティライブラリである「alien-signals」についてを解説していきます。 リアクティビティとは何を実現するものか そもそも「リアクティビティ」とは何かについてを説明します。 リアクティビティを日本語にすると「反応性」と訳されることがあります。この「反応性」とは、ある状態の変化に対してシステムが適切な対応をすることを指します。 Webフロントエンドにおける「反応性」は、アプリケーションの状態（データ）が変化した際に、その変化を検知し、関連するUIや他の状態を自動的に更新する仕組みのことです。 分かりやすい例としてあげられるのがスプレッドシートのようなUIです。あるセルの値が変更されると、そのセ
Node.js, Deno, Bun 最新動向とその所感について
2025/3/14 toranoana.deno #20 で発表した内容です。
バックエンドNode.js × フロントエンドDeno で開発して得られた知見
toranoana.deno #20 発表資料
フロントエンドで日時処理と戦うために 2025 ver
JSConf.jp おかわり Node学園46時限目 - https://nodejs.connpass.com/event/344588/ X - https://twitter.com/sajikix
Deno + Pglite + Drizzle で依存の少ないDBアプリを作る
CI まで一式動いてるのがここ pglite は postgres を wasm コンパイルしたもの。 これを deno + drizzle からマイグレーションして叩く。 なぜこの組み合わせか ローカルにAIエージェント用の簡単なDBツールを量産したかった。deno でスクリプトを書きまくってるので、 deno を前提に色々試した。 色々試したのだが、最終的に Pglite で Postgres を叩くことにした。インストールが不要で、DB周りのセットアップが一番手数が少ない。手数の少なさを最重要とした。 最低限これだけでいい。 import { PGlite } from "npm:@electric-sql/pglite"; const db = new PGlite(); // `{dataDir: ...}` で初期化パスを渡せる await db.exec("create ta
UnJS製のライブラリ・cittyを使ってNode.jsでさくっとCLIを作る - 空の箱
cittyを使ってみたところめっちゃ良かったのでメモがてらエントリを書く。 citty unjs.io Nitroとかh3とかいろいろいい感じのライブラリを作ってるUnJSのライブラリの一つ。いい感じにCLIツールを作れる。 準備 npm install citty 公式のサンプルソースを拝借。 import { defineCommand, runMain } from "citty"; const main = defineCommand({ meta: { name: "hello", version: "1.0.0", description: "My Awesome CLI App", }, args: { name: { type: "positional", description: "Your name", required: true, }, friendly: { ty
全員開発時代のaquaで実現するローカル環境爆速セットアップ - LayerX エンジニアブログ
バクラク事業部エンジニアの id:upamune です。最近、ローカル開発環境構築に対して人より熱意があるということに気がつきました。 ということで、この記事ではバクラク事業部での、ローカル開発環境構築の今について書きます。 はじめに 近頃、AIの発展により開発、特にコーディングのハードルは大きく下がりました。弊社でもプロダクトマネージャーやデザイナーがエンジニアに混じってPRを出しています。 詳しくはバクラクビジネスカードでプロダクトマネージャーをしている原山がnoteを書いているのでご覧ください。 note.com しかし、ここで開発の障壁となるのが最初のローカル開発環境の構築です。セットアップドキュメントは存在しますが、主にソフトウェアエンジニア向けに書かれており、ローカルでアプリケーションを動かすだけなら不要なツールまでまとめてインストールするため、時間のかかるものになっていました
DeepDive Lighthouse
Lighthouse のコードを読んだので、その実装を解説していきます。CLIの使い方から、直接APIを叩く方法、そして個別のAuditの実装を理解する流れを解説します。 これは Lighthouse を理解するための資料で、Lighthouseの使い方ではありません。 とはいえ、内部実装を理解することで Lighthouse についての理解が深まることでしょう。 Chrome Devtools Protocol Puppeteer が Chrome に向けて喋っているもの。Lighthouse も基本的に CDP を直接操作します。 Lighthouseの実装自体も、あんまり Puppeteer に依存せずに直接 CDP を操作する方向性を感じます。 CLI でデータを収集/解析 まず、lighthouse は計測対象である audits が存在します。これらの一覧を見てみましょう。 $
BiomeのPluginについて
こんにちは、mehm8128 です。 最近、Roadmap 2025 and Biome 2.0 | Biomeが公開されました。 その中でも一番気になっているのはやはりプラグイン機能です。そこで、RFC を簡単にまとめて寄り道などしながら、Biome のプラグインについて理解している範囲で紹介します。 間違いなどありましたらコメント欄にて教えていただけると助かります。 Biome のプラグイン そもそも Biome のプラグインとは、ESLint のプラグイン機能のように、Biome 自体が提供している lint ルール以外にもユーザーが独自のルールを作成できるようにするものです（format に関してもサポートされる可能性があります）。 RFC は以下の discussion で提案されています。 issue はこちら。 Biome のプラグインには主に GritQL というクエリ言語
なぜあなたのウェブサイトは遅いのか
自己紹介 https://x.com/mizchi Node.js とフロントエンドの専門家 経歴 ゲームクライアント開発 Electron アプリ開発 サードパーティスクリプト フリーランス(2回目) 現在: 1ヶ月でパフォチュする傭兵 Core Web Vitals CI/CD 今日のスコープ 話すこと 主にフロントエンド/アプリケーション視点での計測 とくにエンドユーザーから見たウェブパフォーマンス体験 話さないこと 各クラウドやDBに特化したチューニング 結果として観測できるが、最初からターゲットにはしない パフォーマンス傭兵を始めた経緯 前職でサードパーティがサイト全体に与える影響(CWV)について調査 とにかくいろんなサイトを外部から計測 真の問題を特定しても「弊社とは無関係」で打ち返す以外なく、歯痒い コスパよく直せる部分をみんな放置している！！！ 非機能要件の優先度が上がら
then() を export した結果ｗｗｗ - Object.create(null)
Promise と Thenable Promise が ECMAScript の言語仕様に追加されたのは ES2015 ですが, Promise ライクなオブジェクトはそれ以前からも広く使われてきました (jQuery の Deferred など). そういった Promise ライクなオブジェクトとの互換性のため, Promise の仕様は本物の Promise と Promise ライクなオブジェクトを混ぜて使えるようになっています. 具体的には, Promise ライクなオブジェクトは一般に Thenable という共通のインターフェースを持つことになっています. オブジェクトが Thenable であるために必要なのは「then() という名前のメソッドを持っている」という一点のみです. もし Promise を解決 (resolve) するときに使われた値が Thenable
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsと状態管理のプラクティス
GitHub - webtui/webtui
