リッチテキストエディターはライブラリを活用した方が良い訳
リッチテキストエディター（RTE）触ってますか？ あまり聞き慣れない単語かもですが、意外にも皆さんの身近に沢山あります。 例えば、Notion・Note や はてな などのブログ・CMSなどがあります。他にも、意外と普段使ってるサービスのテキスト入力欄が実は RTE だったりします。 これらのサービスは Web 技術の HTMLを編集可能にするcontenteditable 属性を付与することで、見た目のまま編集することを可能にしています。 ただ、残念ながらこの属性をそのまま使うと確実に地獄を見ることになるでしょう。 世の中のエディタは contenteditable の辛いところを上手に回避して開発をしているのですが、どのようにしているか気になりませんか？ そこを、本記事では contenteditable の辛さに触れながら、それを解決するリッチテキストエディターの仕組みと使うべき理由
共同編集アプリが作れる新しいJSライブラリ「Loro」を紹介 - ICS MEDIA
Google DocsやFigmaのような複数人が同時編集できるアプリケーションを作るためには「ロックフリー」な共同編集の技術が必要です。誰かが文字を入力するたびにサーバーの更新完了を待つわけにはいきませんが、だからといって各自が好き勝手にデータを書き換えてしまうとテキストが混ざったり他のユーザーのアイテムを消してしまったり、さまざまな問題が発生するためです。 この問題を解決するための代表的なアルゴリズムがCRDTで、CRDTをベースに共同編集機能を提供するメジャーなJSライブラリがYjsです。CRDTとYjsについては以前の記事『共同編集を支える技術とライブラリの活用』でも紹介しており、ICSではYjsを利用した開発も行っています。 このYjsの有力なライバルとして、2024年に正式リリースされたのがLoro（ロロ：スペイン語でオウム）です。後発だけに、これまで実装が難しかった便利な機能
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 というクエリ言語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsと状態管理のプラクティス
GitHub - webtui/webtui
