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

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の "仮想" 的な表現をメモリー上に保持して、実際... 続きを読む

【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の... 続きを読む

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年版: なぜ仮想 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が現役で使われており、フロントエンドのコードはスパゲッティと化し、ネストされたコードは可読性を落と... 続きを読む

アンカー上の 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... 続きを読む

翻訳：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 +... 続きを読む

PlainDraggable - SVG/DOMのドラッグ&ドロップライブラリ MOONGIFT

2019/11/09 19 users MOONGIFT SVG ローカルアプリケーション 操作

Webアプリケーションが多機能になるにつれて、ローカルアプリケーションライクな操作が求められるようになっています。例えばドラッグ&ドロップはローカルアプリケーションであれば良くある操作と言えます。 そんなドラッグ&ドロップをスムーズに行えるライブラリがPlainDraggableです。 PlainDraggableの使い方 ベジュ... 続きを読む

HTML標準仕様の策定についてW3CとWHATWGが合意 今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に - ITmedia NEWS

2019/06/09 16 users WHATWG 両者 策定 合意 混乱

W3CとWHATWGは、HTML標準仕様の策定について合意したことを発表しました。 いわゆるHTML5と呼ばれるHTMLの最新仕様には、WHATWGが公開しているものとW3Cが公開しているものが併存しており、しかも両者には一部で異なる仕様があったために混乱を招いているところがありました。 今回の合意によりW3CはHTMLとDOMに関する標... 続きを読む

window.localStorage がプライバシー設定によってブロックされた場合に SecurityError を投げなくなりました | Firefox サイト互換性情報

2019/05/13 13 users null プロパティ Java Firefox 例外

バージョン: Firefox 67 カテゴリー: DOM, プライバシー & セキュリティ 概要 window.localStorage は従来、ユーザーのプライバシー設定によって使用できない場合、具体的には Cookie が無効となっている際に SecurityError 例外を投げていました。Firefox 67 以降、このプロパティはそうした場合単に null となり、Java... 続きを読む

infobox.jsを使って、画像なしで連番のオリジナルマーカーを作ってみよう！ | 東京上野のWeb制作会社LIG

2019/04/22 11 users GoogleMap 連番 マーカー 本稿 Web制作会社LIG

準備するもの Googlemapのinfowindowをカスタマイズする「infobox.js」 基本的な使い方については、以前別の記事で書いているので参考にしてください。 本稿のinfobox.jsの使い方は、吹き出しだけでなく、マーカーもオリジナルのDOMで作って、テキストも自由に置けるようにしてしまおうというものです。 機能を洗い出し... 続きを読む

AMP で任意の JS を実行できる amp-script を試してみた - Qiita

2019/04/16 41 users Qiita WebWorker ampproject AMP

明日の AMP Conf のための事前に動かしてみた。 amp-script とは何か 今まで https://github.com/ampproject/amphtml に登録された一部のJSしか出来なかったAMPだが、amp-script を使うと任意の JS を実行できる。ただし、 WebWorker コンテキストの中でのみ。 本来ならDOMが存在しないWebWorkerだが、しかしDOMに触れな... 続きを読む