【React】useIdの使い方を調べていたらアクセシビリティの世界に片足突っ込んだ話
概要 普段同じようなhooksを使っていてマンネリ化してきているため、今一度、Reactにはどんなhooksがあるのか調べているとReact v18から導入されたuseId()というものを見つけた。 コンポーネントごとに一意のIdを生成できるhooksらしいが、イマイチ使い所がわからなかったので、調べていくとアクセシビリティの世界に踏み入ることになりました。 深くて軽く溺れかけたので、ざっくりメモがてらまとめます。 useIdの構文について 構文 引数はなく、戻り値は一意のID文字列である。 注意事項として、useId()はコンポーネントレベルで一意のIdを生成するため、mapなどのリスト表示の際のキーの生成には使えない。 公式にも、キーはデータから生成される必要があると記述されている。 ❌ const Test = () => { const id = useId(); return (
Welcoming Javy: A new hosted project
We’re happy to announce the inclusion of Javy as a hosted project under the Bytecode Alliance. This post will delve into what Javy is, the motivation behind its adoption, and the process that led to its integration into the Bytecode Alliance. Javy Javy is a JavaScript-to-WebAssembly toolchain originally developed by Shopify to bring JavaScript support to Shopify Functions. It is based on the Quick
CommonJSからES Modulesへの移行する方法。トップダウンかボトムアップか
Secretlint v7でCommonJS からES Modulesへの移行を行いました。 Secretlint v7.0.0をリリースしました。Pure ESMへの書き直し この記事では、CommonJS(CJS)からES Modules(ESM)への移行を行った経緯と、移行する方法について紹介します。 CJSからESMへの移行は、率直に言えば単調な作業で、メリットが見えにくい作業です。 しかし、将来的にCJSよりもESMが主流になることは間違いないので、移行することは必要です。 移行の作業は、移行方法が決まれば大部分は機械的な書き換えが可能です。 では、実際にどうやって移行したのかを紹介します。 ESMへの移行の影響は依存元へと連鎖する Secretlintのリポジトリはmonorepoになっていて、だいたい40コぐらいのパッケージが含まれています。 そしてパッケージ間で依存関係があ
Popover API さわってみた
Chrome 114からPopover APIがサポートされました。 Popover APIは「トースター」などのコンテンツ上に別のコンテンツを表示しユーザーをサポートするようなコンポーネントをjavascriptを使うことなく実装できる便利な機能です。 基本的な使い方からdialogとの使い分けまで調べたのでまとめたいと思います。 基本的な使い方 Popoverを表示する方法は2つあります。 popover属性とpopovertarget属性を使用する方法 以下のように、ポップオーバーで表示したい要素に対して popoverとidを指定、トリガーとする<button>(もしくは<input>)に対して、popovertargetでpopoverで指定したid指定します。 これでボタンを押せば表示できます。 <div id="popover" popover>contents</div>
Speculation in JavaScriptCore
This post is all about speculative compilation, or just speculation for short, in the context of the JavaScriptCore virtual machine. Speculative compilation is ideal for making dynamic languages, or any language with enough dynamic features, run faster. In this post, we will look at speculation for JavaScript. Historically, this technique or closely related variants has been applied successfully t
Webアプリのパフォーマンス改善にも使える！Deopt Explorer について解説
Deopt Explorer とは Deopt Explorer は、V8 JavaScript エンジンのトレースログをもとに、インラインキャッシングに適していないプログラムを発見・可視化してくれる VSCode 拡張です。 本記事では Deopt Explorer 及びその周辺知識、Web アプリケーションのパフォーマンス改善への活用の仕方を解説します。 前提知識のインプットが不要な方は Deopt Explorer で Node.js の計測をしてみる の項目までスキップしてください。 Hidden Class とインラインキャッシング インラインキャッシングに適していないプログラムを発見・可視化してくれる はじめにこのような説明をしたと思いますが、日常の Web アプリケーションの開発でインラインキャッシングなんて言葉はあまり耳にする機会はあまりないと思います。 インラインキャッシ
Cookie Store API による document.cookie の改善 | blog.jxck.io
Intro JS から Cookie を操作する document.cookie の改善を目的とした Cookie Store API についてまとめる。 document.cookie document.cookie は、ブラウザの API における代表的な技術的負債の一つと言える。 HTML Standard https://html.spec.whatwg.org/multipage/dom.html#dom-document-cookie 基本的な使い方は以下だ。 document.cookie = "a=b" console.log(document.cookie) // a=b まず、この API の問題を振り返る。 同期 API 最も深刻なのは、I/O を伴いながら、同期 API として定義されているところだ。 この API は古くから実装されているため、I/O は非同期 A
【JavaScript】DataTablesが超便利すぎる - Qiita
DataTablesとは DataTablesは、HTMLテーブルを対話的なデータグリッドに変換するためのJavaScriptライブラリ。 簡単に言い換えると、HTMLテーブルをソートや検索などがおこなえる高機能な表にできるということ。 拡張性 や 柔軟性 が高く、また大規模なデータを持つテーブルを操作するのにとても便利である。 導入 下記のリンクから自分の環境に合ったやり方でダウンロードしよう。また、基本的に jQuery は必須である。 最もシンプルな例 とりあえず簡単な実装例を挙げてみる。 ここでは理解できなくてもOK！ See the Pen DataTables by Tomoki Ota (@odlqzyes-the-sans) on CodePen. 使い方 これからDataTablesの使い方を説明していく。 最初は以下のcssとjsファイルだけでOK! (CDN以外の書き
【俗・】Deno に“守り”のコントリビュートをしてきた話
Deno に“守り”のコントリビュートをしてきた話の続編です。読んでない方はまずそちらから御覧ください。 primordials.js について Deno が提供している API は多くが JavaScript で実装されています。もし何も考えずに単純な JavaScript のコードで API を実装してしまっていた場合、ネイティブのプロトタイプメソッドが変更されてしまったときに影響を受けてしまいます。 この問題を回避するため Deno の内部コードでは primordials.js というものが用意されてあります。 継続的な“守り”のコントリビュート 前回の記事から半年弱が経ちましたが、相変わらず継続的に primordials.js 周りの“守り”のコントリビュートを続けていました。また振り返っていきたいと思います。 5. for-of をやめてパフォーマンスの問題を緩和 前回 pr
Deno に“守り”のコントリビュートをしてきた話
この記事は Deno の内部コードについて述べています。一般的な JavaScript アプリケーションでは考慮しなくていい内容がほとんどを占めます。ご注意ください。 primordials.js について Deno が提供している API は多くが JavaScript で実装されています。もし何も考えずに単純な JavaScript のコードで API を実装してしまっていた場合、ネイティブのプロトタイプメソッドが変更されてしまったときに影響を受けてしまいます。 この問題を回避するため Deno の内部コードでは primordials.js というものが用意されてあります。一旦ネイティブのメソッドをキャッシュしておいて、通常のメソッド呼び出しを使わずにこちらを使うようになっています。 例えばコンソールで表示するために、Error オブジェクトの cause プロパティを辿って文字列化
AbortSignal.any(), AbortSignal.timeout(), そして addEventListener() の Signal | blog.jxck.io
Intro 最近 AbortSignal.any() が提案され、急速に実装が進んでいる。 すでに定義されている AbortSignal.timeout() や addEventListener() への Signal なども含め、非同期処理の中断を実装する際の API はかなり整備されてきた。 これら API のモチベーションと設計を中心にまとめる。 Abort 後のリソース解放 AbortSignal によって、非同期処理のキャンセルが可能になった。例として、Server 上での Fetch のタイムアウトの例を考えよう。 app.get("/entries", async (req, res) => { const perRequestController = new AbortController() const perRequestSignal = perRequestContr
undefinedとnullの違い | TypeScript入門『サバイバルTypeScript』
多くのプログラミング言語で「値がない」を表現する方法は、nullなど1通りです。しかし、JavaScriptでは「値がない」に相当する表現にnullとundefinedの2通りがあります。他の言語からJavaScriptに来た人が驚き、使い分けに悩む部分です。ここでは、nullとundefinedの仕様上の違い、実際のコーディングでどう使い分けるべきかについて説明します。 意味合いの違いundefinedとnullは大きなくくりで「値がない」ことを意味する点は共通しています。意味的な違いがあるとしたら、undefinedは「値が代入されていないため、値がない」、nullは「代入すべき値が存在しないため、値がない」という微妙な違いです。 この意味的な違いを厳密につきつめてコーディングするのは、入門者には難しいものです。使い分けに客観的な基準があるわけではないためです。もしどちらを使うべきか
Qwik Reaches v1.0
Frameworks such as React, Vue, Angular, Svelte, SolidJS, and their meta frameworks (Next.js, Nuxt, SvelteKit, SolidStart, Astro) have revolutionized web development by providing powerful tools and abstractions that simplify the process of building complex applications. These frameworks have inspired many developers to create innovative solutions that enhance the user experience, and developer expe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bun Releases Native Bundler and Introduces Macros
UnsuckJS
難しすぎると話題の「警視庁の音ゲー」、JavaScriptでベタ書きされていた→作り切る根性がすごいし参考になりそうな実装だった
GitHub - evanw/polywasm: A JavaScript polyfill for WebAssembly
GitHub - sindresorhus/safe-stringify: Serialize objects to JSON with handling for circular references
Webpack App
GitHub - qwikifiers/qwik-ui: Qwik's Headless and styled component library