テーブルの仮想スクロールとスクリーンリーダー向けのアクセシビリティ

2024/03/24 14 users アクセシビリティ レンダリング テーブル 負荷 テクニック

Webアプリケーションで、大量のデータを表示したいときに使われる、「仮想スクロール」と呼ばれるテクニックがあります。 大量のデータを素直にDOMに挿入してしまうと、レンダリングの処理に非常に負荷がかかり、場合によってはブラウザをフリーズさせてしまったりします。そこで使われるのが「仮想スクロール」です。ス... 続きを読む

100秒で理解する仮想DOM

2024/03/18 121 users 仮想DOM 本題 仮想 100秒 表現

そもそもDOMとは？ 仮想DOMについて知るためには、まずDOMについて知っておく必要があります。 以下の動画で、DOMについて100秒で解説しているので、そもそもDOMをよく知らないなぁという人はぜひ確認してみてください！ 仮想DOMとは？ では、本題です。 仮想DOMとは、UIの "仮想" 的な表現をメモリー上に保持して、実際... 続きを読む

iframe を使って安全にブラウザ拡張機能を実装する - mizdra

2024/02/27 9 users mizdra iframe スク フロントエンドエキスパート

DOMDOM トークス #1 mizdra (みずどら) です 株式会社はてな フロントエンドエキスパートやってます DOM をとりまく ブラウザのセキュリティ の話 DOM 成分ほとんど無いです 「iframe」がちょっと登場するくらい すみません... 皆さんご存知 ツールバーに機能を足したり Webページをカスタマイズしたり Webページにスク... 続きを読む

【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】 - Qiita

2024/01/26 94 users XPath Qiita querySelector ノート

const getNodesByXPath = (xpath) => { const evaluator = new XPathEvaluator(); const expression = evaluator.createExpression(xpath); const result = expression.evaluate( document, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, ); return [...Array(result.snapshotLength)].map((_, i) => result.snapshotItem(i)... 続きを読む

もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita

2024/01/18 313 users Qiita htmx SSE WebSocket 発火

HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応してい... 続きを読む

えぇっ、Nx Cloud を知らない！？――後編：「実際の導入の仕方とハマりどころ」―― - Techtouch Developers Blog

2023/12/26 14 users 後編 Techtouch Developers Blog

おはようございます、テックタッチの canalun(@i_am_canalun) と言います👶 DOM 大好きエンジニア(DOMDOMタイムス、みんなも読んでみてね)ですが、DOM 以外のこともやっている毎日です。 というわけで、今日は Nx Cloud を実際に導入する時のやり方とハマりどころについて書いてみます✌ なお、この記事は、Nx Cloud につ... 続きを読む

data-testidはいつ使うべきか？そもそも使うべきなのか？ | フューチャー技術ブログ

2023/11/28 16 users クエリー playwright フューチャー技術ブログ 要素

Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、... 続きを読む

えぇっ、Nx Cloud を知らない！？――前編: 「CIで分散並列実行とキャッシュ利用ができるだって！？」―― - Techtouch Developers Blog

2023/09/19 24 users canalun 前編 テックタッチ タイトル 普段

さあさあ、面白そうなタイトルに惹かれて(?)やってきたそこのあなた！ありがとうございます！！ はじめまして、テックタッチの canalun と言います👶 普段は DOM について考えたり、CI/CD の改善をしたりな毎日です！ DOM が好きすぎて週刊DOMDOMタイムスというのをやってますので、興味がある方はぜひ見てみてください... 続きを読む

JavaScript: 所望のイベントリスナの発火を妨げているイベントリスナを特定する | Wantedly Engineer Blog

2023/07/26 180 users イベントリスナ イベントハンドラ 所望 発火 干渉

Webアプリケーションでは、DOMの要素にイベントリスナ(イベントハンドラ)を取り付けることで、ユーザーによる様々な操作 (クリックなど) に応じて処理を行うことができます。 しかし、イベントリスナを登録しても、他のイベントリスナとの干渉によって意図した通りに発火しないことがあります。ここではその調査方法を紹... 続きを読む

Flutterが進化する方向とは？ WebAssemblyサポート、コンポーネントとしてWebアプリに組み込み可能に。Flutter Forward 2023

2023/01/29 17 users Flutter Dart コンポーネント 方向 アフリカ

GoogleでFlutter & DartのプロダクトとUX担当ディレクターTim Sneath氏は、アフリカのケニア共和国ナイロビで開催された「Flutter Forward 2023」の基調講演で次のように話し、Flutterの進化の方向性を示しました。 「Flutter for Webは汎用目的でデザインされてはいないことを明確にしておきたい。すでにDOMの分野で上... 続きを読む

業務ができる中級者になるためのJavaScript入門（DOM編）

2022/02/25 309 users JavaScript入門 中級者 edit 業務 文法編

✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっ... 続きを読む

WebAssembly Reference Typesで、WasmでDOMを操作する壁がここまで下がった

2021/11/14 19 users Tweet WebAssembly wasm 公約どおり 訂正

きっかけ（となったtweetの訂正） もう1ヶ月以上も経ってしまったが、こちらのtweetの公約どおり、WebAssembly (Wasm)におけるDOMの操作について知っている限りのことを書こう。 まずこの節の見出しのとおり、上記の発言は大きく間違えている。私はReference Typesがもたらすパフォーマンス的なメリットや、JavaScriptの... 続きを読む

partytown の Worker からの同期的メインスレッド操作を実装してみる

2021/10/09 7 users worker Sandbox Partytown mock

Partytown とは GitHub - BuilderIO/partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker. ? 今Partytownがヤバい。JavaScript Sandboxの未来はどっちだ？ 要は 3rd party script を安全に隔離するため、 WebWorker + DOM の mock で動かす。 GitHub - ampproje... 続きを読む

mouseover 中に表示される DOM のデバッグ | blog.jxck.io

2021/08/20 144 users INTRO デバッグ GitHub jxck.io 後輩

Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっていたのを見て、たまには小ネタもということで、いくつかのテクニックを紹介する。 実際には、発生しているイベントを制御するというテクニックなので、応用すると色々使えるだろう。 mouseover tooltip 対象として、 Github のユーザア... 続きを読む

ブラウザのタブをファイルシステムとして扱えるChrome・Firefox拡張機能「TabFS」レビュー - GIGAZINE

2021/01/10 16 users GIGAZINE ディレクトリ タブ ブラウザ レビュー

ブラウザのタブをファイルシステム上で扱えるようにするChrome・Firefox拡張機能が「TabFS」です。TabFSを使うと、ディレクトリを消去することでブラウザのタブを閉じたり、ページのDOMを操作したりすることが可能とのことなので、実際に使ってどんな感じでタブを操作できるのかを確かめてみました。 TabFS https://omar... 続きを読む

有料記事の技術ライターで食っていけるか | Zenn

2020/09/22 107 users Qiita Zenn 経緯 概念 仮想

2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、あのときの俺達の魂を震えさせたのか | Zenn という記事を500円で販売しました。その経緯と現時点での結果について。 なぜ書いたか Qiita の開発から離れて久しいのですが、 もし Qiita で有料記事を出せたらどういう体験になるんだろう、というのは当時からずっと考... 続きを読む

2020-09-21のJS: Moment.jsのステータス、PostCSS 8.0.0、Vue 3.0.0、DOMの順序と表示順序の一致 - JSer.info

2020/09/21 5 users ライブラリ ライ JSer.info 代替 順序

JSer.info #506 - Moment.jsのウェブサイトにProject Statusが追加されています。 Moment.js | Docs Moment.jsに新しい機能の追加などはしないメンテンスモードであることが書かれています。 互換性保ちつつ新しい機能や仕組みを入れるのは難しい状態であるため、別のライブラリの利用を推奨しています。 代替となるライ... 続きを読む

2020年版: なぜ仮想 DOM / 宣言的 UI という概念が、俺達の魂を震えさせたのか | Zenn

2020/09/20 185 users mizchi React Zenn items リライト

本記事は、 「なぜ仮想 DOM という概念が俺達の魂を震えさせるのか」 https://qiita.com/mizchi/items/4d25bc26def1719d52e6 の 2020 年版のリライトです。 2014 年当時、日本においては React は未だ知る人ぞ知るライブラリ、という位置づけでした。それが、この記事によって一気にメジャーになったように思います。 こ... 続きを読む

ノンフレームワークなJavaScriptでもDOMとうまく付き合う方法 - Qiita

2020/07/24 10 users Qiita 方法

ReactやVueなどのフロントエンドフレームワークが全盛期を迎えているJavaScriptですが、様々な制約から導入を足踏みしているプロジェクトは多々あると思います。 そして、そのようなプロジェクトではおそらくjQueryが現役で使われており、フロントエンドのコードはスパゲッティと化し、ネストされたコードは可読性を落と... 続きを読む

ep.53 Vue 3 Study「Vue.js にもやってくる Fragment」 | UIT INSIDE - LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

2020/07/10 8 users Podcast RFC UIT Fragment キャッチ

@spring_raining が @potato4d に、 Vue 3 の Fragment について聞いてみました。 ゲスト @potato4d フロントエンド開発センター フロントエンドエンジニア UIT で行っている Vue 3 についての勉強会 Vue 3 の RFC を読みながら新しい機能を紹介 Vue 3 Fragment Vue 3 で導入される、実際には描画されない DOM 要素のよ... 続きを読む

アンカー上の target=_blank が rel=noopener を暗示するようになりました | Firefox サイト互換性情報

2020/06/08 15 users rel area noopener target blank

リリース: Firefox 79 カテゴリー: DOM, HTML, プライバシー & セキュリティ 概要Firefox 79 以降、target="_blank" を伴った <a> や <area> 要素は、現行の HTML 仕様 に従い、rel 属性が設定されていない限り暗黙的に rel="noopener" を適用します。noopener リンクタイプは新たに開かれたウィンドウ内の window.opene... 続きを読む

TypeScript Compiler APIとmdn-browser-compat-dataとbrowserslistを使ってサポートされていない呼び出しを見つける - hitode909の日記

2020/03/01 6 users browserslist ライブラリ 差異 API プロダクト

IE11で動かしたいコードでelement.prepend()してたら怒ってほしい ライブラリを使っていたらブラウザ間の差異を気にする必要があまりないけど、最近開発しているプロダクトではDOMのAPIを直接触っているので、このメソッドIEにもあるんだっけ、呼んでいいんだっけ、というのをレビューで確認したりしていて苦労していた... 続きを読む

翻訳：Rich Harris「形而上学とJavaScript」に関する見解（ReactによるDOMの抽象化の不完全性について） - yuhei blog

2020/01/25 10 users React Svelte 形而上学 yuhei blog 見解

この記事は「Thoughts on Rich Harris’ “Metaphysics and JavaScript”」の日本語訳です。記事内で言及しているスライドの内容も参照しなければ理解しづらい部分がいくつかあります。 公開にあたっては著者のJim Nielsen氏に許諾をいただいています。 Svelteの考案者であるRich Harris氏は、Reactのプログラミングの側面... 続きを読む

DOMにおける「Illegal Invocation」エラーの一例とその原因・対処法 - Qiita

2020/01/18 11 users Qiita 一例 エラー 原因 対処法

Help us understand the problem. What is going on with this article? 続きを読む

2020 年、 React 軸で学ぶべき技術 - mizchi's blog

2020/01/04 551 users Qiita React TypeScript Vue 概念

なぜ仮想 DOM という概念が俺達の魂を震えさせるのか - Qiita から 5 年経ち、 仮想 DOM を備えた React やそれを採用した Vue や他のライブラリも市民権を得たように思います。 有用な技術が市民権を得る、というのはエコシステムが花開くことでもあります。新しいプロダクトを作る際の技術選定において、 TypeScript +... 続きを読む