Temporalのpolyfillをゼロから実装した
要約 軽量なTemporalのpolyfillであるtemporal-polyfill-liteを実装しました。 最終版（最新）の仕様を実装しており、TypeScript公式の型定義とも互換性があります。 大半の（グレゴリオ暦しか使わない）開発者にとっては、2026年4月現在これが一番バンドルサイズの小さいpolyfillとなっています。 Temporalの現在地 Temporalはこの3月にstage 4に到達しました。Firefoxは去年5月に、Chromeは今年の1月にTemporal対応のバージョンをリリースしています。Node.jsは今年5月にリリース予定のv26でTemporalに対応する予定です[1]。Safariの実装は遅れていますが、実装は進行中なので時間の問題でしょう[2]。 今年はTemporal元年なのでどんどん使っていこう……と言いたいところですが、今のところpo
乗り換えるなら今！ Prettier から Oxfmt への移行を試してみた - ANDPAD Tech Blog
ANDPAD フロントエンドエンジニアの小泉（ @ykoizumi0903 ）です。あけましておめでとうございます。 この年末年始に、 Vue / Vite の関連ツールの現状をまとめる記事（【2026年最新】Nuxt 4 アプリに入れておきたいオススメ設定集）を書いていたのですが、その中で1つの発見がありました。 それは、Oxfmt のステータスがかなり実用的なところまで進んでいるらしいということです。 Oxfmt は、Rust製の超高速な JavaScript ツールチェーン Oxc の一部として開発されているフォーマッターであり、Vue.js や Vite の生みの親である Evan You 氏が設立した新会社 VoidZero が開発を主導しています。 2025年11月に Alpha 版がお披露目された Oxfmt 、その後もアップデートが続いていたのですが、つい先日リリースされた
Zustand、Jotai、Valtioの作者はなぜReact状態管理OSSを3つ開発したのか【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスZustand、Jotai、Valtioの作者はなぜReact状態管理OSSを3つ開発したのか【フォーカス】 React状態管理ライブラリ開発者 加藤 大志（Daishi Kato） OSS開発者。React状態管理ライブラリ「Zustand」（v3以降）「Jotai」「Valtio」の作者。大手電機メーカーでのリサーチャーを経て、フリーランスエンジニアとして国内外の複数の企業でソフトウェア開発に携わる。OSS活動では主にJavaScriptやReactに関連したライブラリ開発に携わり、現在は特にReactフレームワーク「Waku」に注力。 GitHub X:@dai_shi Zustand Jotai Valtio React開発においてSPA（Single Page Application）を効率的に構築するために、アプリケーション全体の状態をどう管理するか――。すなわ
2026年版：JavaScript/TypeScriptのロギング入門
本番環境で障害が発生したとき、手がかりになるのは結局ログだけだった——という経験は、多くのエンジニアが持っているのではないでしょうか。ところが、開発中に書き散らしたconsole.logは肝心なときに役に立たないことが多いものです。「ここ通った」「動いた」といったメッセージや、巨大なオブジェクトがそのまま出力されているだけでは、原因特定は困難です。 かといって、本格的なロギングライブラリを導入するのは大げさに感じることもあります。winstonやPinoは高機能ですが、設定項目が多く、エッジ環境では動かなかったり、依存関係が増えたりと、ちょっとしたAPIサーバーには重たい選択肢かもしれません。 本記事では、console.logの限界を整理した上で、実用的なロギング環境の構築方法を紹介します。サンプルコードにはLogTapeを使います。依存ゼロで軽量、Node.js・Deno・Bun・エッ
異世界JavaScript
最近は異世界転生も珍しくなくなりました。もしも異世界にJavaScriptがあったら、それは我々の知るJavaScriptとどう違うでしょうか？ この記事では、ECMAScriptまたはその亜種に実装された機能で、標準化に至らなかったものを取り上げます。モダンなECMAScriptしか知らない方には、きっと異世界を見るように新鮮に感じていただけることと思います。 異世界の typeof 演算子 「13.5.3 The typeof Operator - ECMAScript® 2025 Language Specification」によると、typeof 演算子の返しうる値（文字列）は undefined object string symbol boolean number bigint function のちょうど8通りです。しかし、異世界のJavaScriptでは typeof がこ
Why are 2025/05/28 and 2025-05-28 different days in JavaScript?
Why are 2025/05/28 and 2025-05-28 different days in JavaScript? 2025-05-28 While setting up this site itself, I ran into the following oddity: console.log(new Date('2025/05/28').toDateString()); // Wed May 28 2025 console.log(new Date('2025-05-28').toDateString()); // Tue May 27 2025 // Bonus: (omit leading 0) console.log(new Date('2025-5-28').toDateString()); // Wed May 28 2025 You may get differ
プロファイラを利用して Node.js サーバーのレスポンス時間を 200 秒 → 20 秒に短縮した話｜ogino
どんな問題を解決したのかこんにちは、ダイニーの ogino です。 ダイニーでは、飲食店向けのクラウド POS レジを開発しています。その機能の一つとして、一ヶ月分の売上などの情報を印刷できる「月締伝票」があります。 月締伝票のサンプル月締伝票に記載するデータは、Node.js バックエンドで集計をしています。この API はダイニーのバックエンド全体の中で最も重く、最近では一部店舗でレスポンスに 200 秒以上かかりタイムアウトエラーが発生していました。 その結果、月締伝票を発行することができないため顧客の業務に支障をきたし、複数の問い合わせが来ている状態でした。 プロファイラやログを手掛かりに調査したところ、ボトルネックを 2 行のコードだけに特定し、ほぼコストをかけずにレスポンス時間を 20 秒ほどに改善することができました。 改善リリース前後のレスポンス時間の変化ボトルネック 1:
ISO-2022-JPの自動判定によるクロスサイト・スクリプティング(XSS)
サマリ ISO-2022-JPという文字エンコーディングの自動判定を悪用したクロスサイト・スクリプティング(XSS)攻撃について説明する。これは、文字エンコーディングを適切に指定していないウェブコンテンツに対して、文字エンコーディングをISO-2022-JPと誤認させることでバックスラッシュが円記号と解釈されることによりエスケープ処理を回避する攻撃である。本稿で紹介する攻撃は、従来からのセキュリティベストプラクティスである「文字エンコーディングの明示」に従っていれば影響を受けることはない。 はじめに クロスサイト・スクリプティング対策として、記号文字のエスケープ処理に加えて、コンテンツの文字エンコーディングをレスポンスヘッダやmetaタグで明示しましょうと言われてきました（参照）。その背景として、UTF-7という文字エンコーディングを悪用したXSSの存在がありました。この攻撃については以下
Next.js App Router セキュリティ
Impact Scores and Hybrid Strategies: The future of link building
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
仕組みと嬉しさから理解するeslint FlatConfig対応
重い腰を上げて FlatConfig 対応をした ESLint が新しい設定形式として FlatConfig を導入してから随分と経ち、最新バージョンの v9 では FlatConfig がデフォルトになりました。一方で利用者の多い plugin でもなかなか対応が進まず、周りでは思ったよりも FlatConfig への移行が進んでいない印象を受けます。 とはいえ次のバージョンである v10 では FlatConfig しかサポートしないことが予定されており、今まで移行を見送ってきた方も「さすがにそろそろ移行するか...」と思っているのではないでしょうか。自身の所属チームで管理している ESLint の rule セット : @cybozu/eslint-config でも遅ればせながら FlatConfig 対応を進めています。（現在はアルファ版で提供中です） そんな @cybozu/e
Object.keys() が返す配列の順序における数値キーの昇順には上限がある - カミナシ エンジニアブログ
はじめに こんにちは。昨年の10月にカミナシに入社したソフトウェアエンジニアの tokuse です。 気が付けば入社してから既に半年以上経っており、光陰矢の如しで驚愕しています！ カミナシではフロントエンドを TypeScript で開発しています。そんな中、先日 Object.keys() の仕様に起因する不具合が発生し、その際に Object.keys() が返す配列の順序に関する仕様について詳しく知りました。当稿ではその仕様について説明します（ECMAScript 最新前提です）。 はじめに 問題となった処理 Object.keys() の仕様 まとめ 余談 おわりに 問題となった処理 まず、問題となった処理をサンプルコードで紹介します。次のコードは、オブジェクトの数値キーのうち最大値を取得しようとした処理です。 type UserId = number; type User = {
TypeScript の型検査にかかる時間を短縮した話
こんにちは。ナレッジワークの torii です。 最近、プロジェクトで使用している TypeScript の型検査にかかる時間を 3 割ほど短縮することに成功しました。 参考までにどのようにボトルネックを調査して改善に繋げたのかを書いてみます！ きっかけ 改善のきっかけは、たまたまネットを徘徊していて見つけた Zenn 記事でした。 （素晴らしい記事をありがとうございます！） これを読んで「自社のプロダクトでも型検査にかかる時間を短縮できるのでは？」と思い立ち、試してみたところ実際に改善に役立てることができた、というのがこの記事の概要になります。 改善対象 改善対象は、弊社のメインプロダクトであるナレッジワークのフロントエンドです。現在マルチプロダクト化に向けたコード分割に取り組んでいる最中ですが、執筆時点はモノリシックな構成となっています。 改善前の TypeScript ファイルは自動
Go を Wasm にビルドして Google Apps Script で動かす
Go のコードで文字列の変換をする関数があり、これが Google スプレッドシート上の関数としても利用できれば検証[1]に便利かもしれないと思いました。 Google スプレッドシートでは Apps Script の関数をセル上で実行できるので、Go のコードを Wasm にビルドして JavaScript から呼び出すことができれば良いのではないかと考え、実際に試してみることにしました。 動作環境 Go 1.22.2 Apps Script の設定 Chrome V8 ランタイムを有効にする その他 macOS の pbcopy コマンド[2]を利用した手順を記載していますが、Linux 環境でも pbcopy を他の手段に置き換えることで同様に動作しました。 事前調査 Go を Wasm にビルドして GAS で動かす事例は見当たりませんでしたが、Rust を Wasm にビルドして
Promise や Context から値を読み取る use React フック
React の Canary および experimental チャンネルでのみ利用可能な `use` フックについて解説します。`use` フックは Promise や Context から値を読み取るためのフックで、Promise の値を同期的に読み取ることができます。その他の React フックと異なり、`if` 文やループ内で呼び出すことができる点が特徴として挙げられます。 use は、Promise や Context から値を読み取るための React フックです。以下のコードのように Promise の値を同期的に読み取ることができます。 import { use } from "react"; const fetchUsers = async () => { const response = await fetch("/api/users"); return respons
過激派が教える！ useEffectの正しい使い方
ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者が考えるReactの基本原則を紹介します。 筆者がもっとも重要視する原則は、ReactはUIライブラリであるということです。つまり、ReactにはUIの管理をさせるべきであって、その他のことはReactの役目ではないということです。Reactが難しいと思う人がいる場合、何でもかんでもReactにやらせようとするから余計に難しくなっているのだと思います。 例えばアプリケーションのロジックの管理やそれに付随するステートの管理はReactの役目ではないので、Reactの外部で処理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ONNX Runtime WebとPaddleOCRを使ってブラウザ上でOCRを実行する
エッセイ: React with React Compiler は "Just JavaScript" であるか · ubugeeei/work-log · Discussion #429
async/await 比較（C#, JavaScript, Python） - Qiita
漢は黙ってjQuery
