Canvas 内に直接 HTML を描画できる HTML in Canvas API について
HTML in Canvas API は WICG の提案段階にある実験的な API です。現時点では Chrome Canary の chrome://flags/#canvas-draw-element フラグを有効にすることで利用できます。 HTML in Canvas API の使用方法 HTML in Canvas API は以下の 3 つの要素で構成されています。 layoutsubtree 属性 drawElementImage() メソッド paint イベント canvas 要素に layoutsubtree 属性を追加することで、canvas 内に描画したい HTML を定義できます。この段階ではまだ canvas 内には描画されません。 <canvas id="canvas" width="400" height="300" layoutsubtree> <div i
Inertia.js (inertia-rails) を触っているので所感を書いておく - id:onk のはてなブログ
まだ触り始めて1ヶ月ぐらい。困りが発生する程度には使ってきたとは思う。 Inertia.js とは inertiajs.com 主に Laravel コミュニティで管理されている OSS。ひと言で言うとフロントエンドをモダンに書けるようになるアダプタ……かなぁ。GitHub でも 7000 star 集めているぐらい。ちょうど先週 v3.0.0 が出ましたね。元気に開発されています。 概要は僕もこの後説明するけど、作者のブログ記事 を見るのが一番イメージ沸くと思う。 間違いなくいつもの MPA Inertia.js は、古き良き Web アプリケーションフレームワークの View 層のみをモダンな UI フレームワークに差し替えられるもの、という理解をしている。決定的なのは Routing をサーバが持つこと、レスポンスをサーバが返しているかのような感覚で書けることだろう。 具体例は 公式
npm audit の限界と本当に必要なセキュリティ対策【2026年版】
この表示を見て安心していないでしょうか。 残念ながら、npm audit が検出できるのはサプライチェーン攻撃のごく一部です。2025年9月にはchalkやdebugなど18パッケージ（合計週間20億ダウンロード超）が侵害され、同年11月にはShai-Hulud 2.0と呼ばれる自己増殖型ワームが796パッケージに感染しました。いずれも npm audit では検出できない類の攻撃です。 この記事では、npm auditが「何をチェックして、何をチェックしていないのか」を明確にし、2026年の開発現場で本当に必要なセキュリティ対策を具体的な設定ファイル付きで解説します。 npm audit の仕組みと限界 npm audit が実際にやっていること npm auditは、依存ツリーのパッケージバージョンをGitHub Advisory Databaseと照合し、登録済みCVEと一致するバー
GitHub - chenglou/pretext
Pure JavaScript/TypeScript library for multiline text measurement & layout. Fast, accurate & supports all the languages you didn't even know about. Allows rendering to DOM, Canvas, SVG and soon, server-side. Pretext side-steps the need for DOM measurements (e.g. getBoundingClientRect, offsetHeight), which trigger layout reflow, one of the most expensive operations in the browser. It implements its
AIバグ発見システム「Sashiko」をJS/TS用にカスタマイズして使ってみる - プププなテクブ
ソフトウェア開発におけるコードレビューは品質保証の要です。しかし、レビューの質はレビュアーの専門知識と集中力に大きく依存し、人間のレビューでは見落としが避けられません。 この課題に対して、Linuxカーネル開発コミュニティから生まれたのがSashikoです。 sashiko.dev 本記事では、Sashikoの仕組みを詳しく解説し、それをJavaScript/TypeScriptライブラリのレビュー向けにカスタマイズしたSashiko JSについて紹介します。 Sashikoとは何か？ Sashiko（刺し子）は、Google社員のRoman Gushchin氏が開発したAIを用いたバグ発見システムです。特にLinuxカーネルのパッチをAIで自動レビューします。名前の由来は日本の伝統的な補修刺繍技法で、「布の弱い部分を補強する」という意味が、コードの脆弱な部分を見つけ出すという使命に重ねら
Node.js互換でコンテナよりも高密度と高速起動を実現する「Edge.js」、Wasmerが発表
WebAssemblyランタイム「Wasmer」を開発提供するWasmer社は、Node.js互換かつコンテナよりも高密度な集約と高速起動を実現する「[Edge.js](https://edgejs.org/)」を発表しました。 What if you could run ANY Node.js app unmodified, safely anywhere… without Docker, containers, or security headaches? Introducing Edge.js • Fully compatible with Node.js • Sandboxed by design • Pluggable with any JS engine Node.js, but actually safe. And everywhere pic.twitter.com/Zh9
JavaScriptの統合ツールチェーン「Vite+」がオープンソースで公開
JavaScriptのESモジュールに対応した高速なビルドツール「Vite」などを開発しているVoidZeroは、Viteを含むJavaScriptの統合開発ツールチェーン「Vite+」アルファ版をオープンソースで公開しました（GitHubのリポジトリ）。 Announcing Vite+ Alpha. Now open source. To make JavaScript developers more productive than ever before. A single binary that: Unifies your frontend toolchain. Manages your runtime and package manager. Has caching and monorepo support built-in. Works with every… pic.twit
「State of JavaScript 2025」公開。フロントエンドライブラリはReactがシェアを伸ばして1位、ビルドツールはついにwebpackにviteが追いつく
「State of JavaScript 2025」公開。フロントエンドライブラリはReactがシェアを伸ばして1位、ビルドツールはついにwebpackにviteが追いつく 回答者の国別分布を見ると米国が16％、ドイツが8％、フランスが7％、イギリス（UK）が5％、ロシアが3％、スペインが3％、日本も3％（回答者340人）でした。 発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドはReactがシェアを伸ばして1位 フロントエンドフレームワークの利用率ランキングは、引き続きReactが他を引き離して85％の1位。2位はVue.jsで52％、僅差で3位がAngularで48％、4位がSvelteで27％。以下、Preact、Solid、HTMXなどが並んでいます。 メタフレームワークの1位はNext.js
開発フローの変更しやすい・しにくい部分を理解してから改善を実施すると良い - $shibayu36->blog;
開発フローを改善したいとき、目的や目指したい姿を明確にするのは大前提だが、さらに開発フロー全体の変更しやすい・変更しにくいところを理解してから設計と改善を実施した方がいいと考えている。 開発フローには、事業の特性上もしくは組織の歴史的経緯でその組織特有の変更しにくい部分が存在している。状況によって様々だが、例えば、リリースの曜日、レビューやリリース承認プロセス、ミーティングの頻度などがあり得るだろう。 そして改善を実施するときのよくある失敗は、いきなり理想のフローを設計し、変更しにくい部分も含めてたくさん変えてしまうことだ。変更しにくい部分を同時に一気に変えようとすると、その変更の関係者が増え、反発が起きやすくなる。反発が起きると、良い方向に向かうはずの変更まで含めて「全部失敗だった」となってしまい、何も変えられずに失敗するケースが多い。 そこで次の2つを意識すると良い。 まず、変更しにく
なぜJavaScriptのfetchはawaitを2回しないとレスポンスを取れないのか | maguro.dev
const resp = await fetch("https://api.example.com/data"); await を2回書いているのが気になったことはありませんか？1回の await で一気にレスポンスボディまで取れたら楽なのに、と思ったことはないでしょうか。 とある休日の午前中、いつものようにYouTube上でライブコーディング動画を見ていました1。そこで配信者の方が、fetchを使ってレスポンスボディを取得する際に2回目のawaitが必要であることに対して、「なんでfetchはこんなにめんどくさいんだろう」と言っていました。言われてみると、確かにめんどくさいような気もします。 この記事では、なぜ fetch がこのような設計になっているのかをいろいろな観点から掘り下げてみます。 fetch の使い方おさらい まずはJavaScriptのfetchの基本的な使い方を確認して
Node.jsとJavaScriptアプリを単一の実行ファイルにする「Single Executable Applications」機能、Node.js 19.7.0で実験的機能として搭載
2月21日にリリースされたNode.jsの最新バージョン「Node.js 19.7.0」で、Node.jsとJavaScriptアプリケーションを単一の実行ファイルにパッケージングする新機能「Single Executable Applications」が実験的機能として搭載されました。 一般にNode.jsのアプリケーションをデプロイするには、Node.jsのインストールや環境設定をするところから始めなければなりません。 今回新しく実験的に搭載されたSingle Executable Applications機能を使うと、そのまま実行可能な単一の実行ファイルを作ることができるため、それを配置するだけで簡単にデプロイができるようになる見通しです。 Single Executable Applicationsでは、postjectと呼ばれる新しいコマンドが用意されます。これを用いてNode.
Node.jsでネイティブにTypeScriptを実行できる「Type Stripping」機能が安定版に到達。Node.js v25.2.0
Node.jsでネイティブにTypeScriptを実行するための機能「Type Stripping」が、11月11日にリリースされた新バージョン「Node.js v25.2.0」で安定版になったことが発表されました。 これにより本番環境などでもType Stripping機能を用いたTypeScriptファイルの実行が安心してできるようになりました。 Node.jsはTypeScriptをサポートしていなかった Node.jsはもともとサーバサイドのJavaScriptランタイムとして開発されたため、JavaScriptのスーパーセットであるTypeScriptの型指定や高度な命令などには対応していません。 Node.jsでTypeScriptファイルを実行するには、TypeScriptトランスパイラを用いてJavaScriptに変換するなどの方法があります。 この方法を用いたts-nod
【JavaScript】配列を二重配列に分解する提案 - Qiita
[1, 2, 3, 4, 5, 6, 7, 8] ↓ [ [1, 2, 3], [4, 5, 6], [7, 8] ] // chunking [ [1, 2, 3], [2, 3, 4], [3, 4, 5], [4, 5, 6], [5, 6, 7], [6, 7, 8] ] // sliding TC39でIterator Chunkingという提案がなされていました。 ステージは2.7であり、仕様はおおむね固まっていて検証段階というところです。 Iterator Chunking TC39の提案。 イテレータを重複する、もしくは重複しないサブシーケンスに分割します。 presentations to committee 過去のプレゼン ・September 2025 ・July 2025 ・May 2025 ・October 2024 ・January 2024 motivatio
npm ciのキャッシュ方式の検討
結論から言うと、node_modulesをキャッシュしてnpm ciの実行を省略するのが、多くの場合には有効そうです。 はじめに CIで npm ci を使うとき、実行時間短縮のためにキャッシュの利用を検討することになると思います。このとき、どのようにキャッシュするのが良いのでしょうか？ よく知られているキャッシュ方式として、以下の二通りの方式があります。 ~/.npmをキャッシュする方式 node_modulesをキャッシュする方式 それぞれの違いについて、詳しく見てみましょう。 ~/.npmをキャッシュする方式 npm ci を実行すると、POSIX系のOSではデフォルトで ~/.npm にキャッシュデータが書き込まれます。package-lock.json をキーにこのディレクトリをキャッシュしておくことで、次回以降の npm ci 実行時にこのキャッシュデータを利用しよう、というの
Nxからnpmトークンを窃取した攻撃手法を実験してみる - プププなテクブ
2025年8月26日、JavaScriptエコシステムで最も広く使用されているビルドツールの一つであるNxにおいて、複数の悪意のあるバージョンが攻撃者によって公開されてしまったことが話題になった。 socket.dev github.com 攻撃の概要 簡単に説明すると、 攻撃者が悪意のあるコードを含むNxライブラリを作成 Nx公式のnpmトークンを盗む 攻撃者がNx公式になり代わり、あたかも公式リリースかのように悪意のあるコードを含む最新バージョンを公開 利用者が最新版をダウンロードすることで、悪意のあるコードが実行される という感じだ。攻撃の影響や詳しい流れは本記事の守備範囲外のため、NotebookLMに簡潔にまとめてもらった内容を記載する。 1. GitHub Actionsワークフローの脆弱性悪用 攻撃者は pull_request_target トリガーを持つワークフローのBa
React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Stagehand
Guides: Next.js MCP Server | Next.js
GitHub - pdfme/pdfme: Open-source PDF generation library built with TypeScript and React. Features a WYSIWYG template designer, PDF viewer, and powerful generation capabilities. Create custom PDFs effortlessly in both browser and Node.js environments.
React は次の10年を生き残れるか：3つのトレンドから考える
