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にも対応してい... 続きを読む

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

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

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

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

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

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

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

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

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

有料記事の技術ライターで食っていけるか | 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 は未だ知る人ぞ知るライブラリ、という位置づけでした。それが、この記事によって一気にメジャーになったように思います。 こ... 続きを読む

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

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

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

Google Developers Japan: WorkerDOM: DOM に対応した同時実行 JavaScript プログラミング

2018/12/18 56 users WorkerDOM 同時実行

.app 1 #DevFest16 1 #DevFest17 1 #DevFest18 1 #hack4jp 3 A/B Testing 1 A4A 4 Actions on Google 13 Addy Osmani 1 ADK 2 AdMob 31 Ads 15 Ads API 4 AdWords API 7 Agency 1 AIY 3 AIY Vision Kit 2 ALPN 1 AMP 67 AMP Cache 5 AMP for Email 1 AMP Story 2 amp-bind 1 AMPHTML Ads 1 Analytics 9 Andorid 10 Andro... 続きを読む

Google Developers Japan: WorkerDOM: DOM に対応した同時実行 JavaScript プログラミング

2018/12/18 56 users WorkerDOM 同時実行

.app 1 #DevFest16 1 #DevFest17 1 #DevFest18 1 #hack4jp 3 A/B Testing 1 A4A 4 Actions on Google 13 Addy Osmani 1 ADK 2 AdMob 31 Ads 15 Ads API 4 AdWords API 7 Agency 1 AIY 3 AIY Vision Kit 2 ALPN 1 AMP 67 AMP Cache 5 AMP for Email 1 AMP Story 2 amp-bind 1 AMPHTML Ads 1 Analytics 9 Andorid 10 Andro... 続きを読む

この DOM がすごい2018: worker-dom - mizchi's blog

2018/10/18 238 users メインスレッド 殆ど mizchi's blog 重い処理

おもしろライブラリを見つけて興奮しているので紹介します。 UIスレッド(メインスレッド)からユーザー操作をブロックしてしまうような重い処理を逃がす off-the-main-thread を実践しようとなると、実際に問題になるのは、ほとんどの処理は何らかの形で DOM を参照し、それに連なるものが処理時間の殆どを占めている、と... 続きを読む

まだXMLHttpRequestを使ってるの？　fetchのすすめ

2018/10/09 342 users XMLHttpRequest fetch XHR 地位 唯一

JavaScriptでWeb的なプログラムを書いたことがある人は、XMLHttpRequestを使った経験もあるのではないかと思います。（$.ajaxしか使ったことがないよという人はすみませんがサポート対象外です。） XMLHttpRequest，略してXHRは、JavaScript（+DOM）でサーバーとHTTP通信をするための唯一の方法としての地位を長らく保っ... 続きを読む

Railsで作られた管理画面にVue.jsを導入した話 - Studyplus Engineering Blog

2018/07/24 61 users jQuery Rails Studyplus 久保 HTML

Studyplusのweb版を担当していた久保です。 最近はRailsを触ったりしています。 今回は社内向けの管理画面を作る際に、どうしても動的にDOMを操作する必要があったのでjQueryの代わりにVue.jsを導入してみました。 なぜVue.jsを選んだのか Railsが生成したhtmlをテンプレートとして使うことができる Rails5系以降であれ... 続きを読む

Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt)

2018/04/08 201 users Vuex Nuxt Vue 主観 Vue.js

Vue.jsの関連ツール・ライブラリ(Vuex, Vue-Router, Nuxt) 1. 前回のVueの基礎を経て 実際にVueを使ってみると、DOMの取得や更新⼿続きが楽になる⼀⽅、 直接JSで書くことに⽐べ、どうやって書くのか考えさせるところがあった のかなと思います。 その辺りは⼤きく、 ・Vue.jsの記述の慣れ (主観) ・何を状態として管理するか (設計) によるところではないかと思... 続きを読む

React Redux の SPA を運用して得られた知見と実装例、開発フローもあるよ！ - Qiita

2018/02/06 190 users Qiita Props SPA 知見 React Redux

Facebook が開発した UI ライブラリ 旧来の DOM 操作による状態管理を props や state で抽象化 パーツをコンポーネントごとに管理するのが得意 https://reactjs.org/ から、ライブデモを試せます。 SPAなどの複雑化する React のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*... 続きを読む

DevTools を開いたら人類滅亡 - Qiita

2018/01/14 52 users Qiita DevTools 人類滅亡 README.md

詳細は GitHub の README.md を見てね！ どんな力を使ったの？ devtools-detect というライブラリを利用して、 DevTools の表示/非表示の切り替え 発生時に呼び出される EventListener で、 DOM のクリアと共に YouTube の人類滅亡動画 をコンテンツエリアいっぱいに引き伸ばして自動再生させています。 devtools-detect とは一... 続きを読む

ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM — hayato.io

2017/12/25 505 users hayato.io アルゴリズム Shadow DOM

この記事は Chromium Browser アドベントカレンダー 24 日目の記事です。 内容の一部は Chromium の Git レポジトリの Source/core/dom フォルダの README ファイル （英語）が元になっています。README の想定読者は Chrome の開発者でしたが、この記事の想定読者は一般の Web 開発者です。 この記事の一部は README ファイルに還... 続きを読む

ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ｜ Developers.IO

2017/12/24 329 users Chromeless AdventCalendar GUI

ヘッドレスChromeの自動化ツール「Chromeless」を使って自動テストを実施する #serverless #adventcalendar ヘッドレスChromeでシンプルに自動テストを行う Google Chromeのバージョン59から標準搭載された、ヘッドレスモード（GUIがないモード）。コマンドラインからヘッドレスブラウザを立ち上げることができ、スクリーンショットの撮影を行ったりDOM... 続きを読む

本の虫: VS CodeがDOMによるターミナル実装のパフォーマンスを改善できなかったためCanvasに変更

2017/10/05 218 users canvas ターミナル 実装 クソ パフォーマンス

Integrated Terminal Performance Improvements Electronという史上まれに見るそびえ立つクソのようなGUIプラットフォーム上で実装されているVS Codeが、ターミナルの実装をDOMによるものからCanvasによるものに変更したそうだ。これは、DOMによる実装ではパフォーマンスの改善が十分にできなかったからだという。 DOMでターミナルを実装する際の... 続きを読む

「やはりHTML/DOMは再発明されるべきじゃないか」に対する感想 - らこらこブログ

2017/10/02 92 users アプリケーションプラットフォーム mizchi 極致 SPA

2017 - 10 - 02 「やはりHTML/DOMは再発明されるべきじゃないか」に対する感想 mizchi.hatenablog.com エモにはエモ。 わかる だいたいわかる。そもそもSPAの必須パーツであるクライアントサイドルーティングなんてブラウザ機能の再実装の極致だし、ブラウザ上でアプリケーション作るとなるとブラウザに足りてない部分はラップして、アプリケーションプラットフォームにしたて... 続きを読む

やはりHTML/DOMは再発明されるべきじゃないか - mizchi's blog

2017/10/01 846 users npm GUI ヘイト mizchi's blog HTML

2017 - 10 - 02 やはりHTML/DOMは再発明されるべきじゃないか と思う次第である。以下理由。 JavaScript , GUI 設計の今 JSはそのプラットフォーム特性上、あらゆる言語の使用者の、あらゆる不満が集まる場所で、ヘイトを集めやすい環境だと思う。近年は npm というプラットフォームの登場でエコシステムが生まれ、思いつく限りあらゆるメソッドが適用されてきた。貧弱な言語基... 続きを読む

どんどん便利になってるChromeの機能拡張！Web制作に便利な機能がまとめられた -CanvasFlip | コリス

2017/08/28 152 users コリス キャプチャ Chrome インストール テキスト

DOMの構造を調査する、要素のサイズを測る、要素のみのキャプチャを撮る、画像ファイルを抽出する、カラーやテキストを編集するなど、これらWeb制作に便利な機能がまとめて、しかも高性能で快適に利用できるChromeの機能拡張を紹介します。 それぞれ単体の機能拡張を使用している人は、一つにまとめられて簡単だと思います。 CanvasFlip CanvasFlipの機能 CanvasFlipのインストール... 続きを読む

もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 - WPJ

2017/04/27 137 users jQuery WPJ issue reproduced

古いブラウザーのサポートが必要ないなら、もうjQueryを使わなくてもいいかもしれません。ネイティブなDOM APIの使い方をサンプルとともに解説します。もうjQueryには頼らない！素のJavaScriptでDOMを操作するための基礎知識 2017/04/27 Sebastian Seitz Articles in this issue reproduced from SitePoint Cop... 続きを読む

最速のアニメーションライブラリはこれだ!? JSライブラリの性能をDOMとWebGLで徹底検証 - ICS MEDIA

2017/02/21 61 users CPU アニメーション アニメーション実装 パフォーマンス

HTML5のアニメーション実装に役立つ様々なJavaScriptライブラリがあります。前回の記事「 ウェブのアニメーション制作に役立つ！ 流行りのJSライブラリのまとめ 」ではJSライブラリ7種類の特徴を紹介しましたが、本記事ではそれらのパフォーマンスを比較します。 JSライブラリのパフォーマンスが良いほど、たくさんのアニメーションがあっても滑らかに動きます 。また、パフォーマンスがよければCPU... 続きを読む