100秒で理解する仮想DOM

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

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

もう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 +... 続きを読む

この 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通信をするための唯一の方法としての地位を長らく保っ... 続きを読む

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 のステート（状態）管理を、ルール（哲学）に従って書かせることで、フロントエンドの動きを追いやすくするためのライブラリ （*... 続きを読む

ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する 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は再発明されるべきじゃないか - 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... 続きを読む

これから先10年、フロントエンドに関する予言 - mizchi's blog

2016/11/04 437 users 予言 mizchi's blog フロントエンド wasm

2016 - 11 - 04 これから先10年、フロントエンドに関する予言 これは怪文書です ここから10年はWASMがDOMの GC インテグレーションを果たしてJSを置き換えるか、JSがWASMに追いつかれる前にまともな言語として進化しきれるかの チキンレース になる ES Modules のブラウザ実装が枯れた頃に先鋭化したフロントエンドツールセット群は一旦そこで破棄され、シンプル化への揺り... 続きを読む

ReactでもDOMの木構造はつらいよ問題 - non117's diary

2016/09/02 140 users React state redux メンバ関数 各位

2016 - 09 - 02 ReactでもDOMの木構造はつらいよ問題 nippo.wikihub.io r7kamura Commented on 2016-09-01 何も考えずにReact, Redux使うような気はするのだけど、Reduxを使わない場合は各位どうやってState管理してるんでしょうか？ 親 コンポーネント がstateと メンバ関数 を持っており、子 コンポーネント はp... 続きを読む

フロントエンドで知っておきたい要素指定の考え方 - pixiv inside

2015/12/23 220 users pixiv inside フロントエンド jQuery 開発

2015 - 12 - 23 フロントエンドで知っておきたい要素指定の考え方 Tweet みなさんはじめまして、ピクシブのフロントエンドエンジニア id:koharusugiura です。 JavaScript を用いた開発を行う際に jQuery や React 、 vue.js といったライブラリーを使う方は多いでしょう。これらのライブラリーは共通して DOM を扱うライブラリーとなります。 ... 続きを読む

PythonでJavaScriptを使ったWebサイトをスクレイピングする - Qiita

2015/10/29 200 users Qiita Pipeline Python スク Scrapy

概要 JavaScriptでDOMを作ってるサイトをPythonを使ってスクレイピングしたので、手順をメモ。 大雑把には、ScrapyとSeleniumを組み合わせてやった。 Scrapy Scrapyは、クローラーを実装するためのフレームワーク。 クローラーをSpiderのサブクラス、スクレイピングした情報をItemのサブクラス、スクレイピングした情報に対する処理をPipelineのサブクラス、... 続きを読む

ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌

2015/05/07 262 users phpspot開発日誌 テーブル ブラウザ内 50万件 データ

ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 2015年05月07日- Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM... 続きを読む

HTML5 - Chrome 43からDOMの属性がJSのプロトタイプチェーンに移行します - Qiita

2015/04/15 208 users プロトタイプチェーン Qiita 属性 バージョン コード

Chrome 43およびそれ以降のバージョンにおいて、DOMの属性（値）がJavaScriptのプロトタイプチェーンに移行されます。これにより、突っ込んだことをやっていた場合に、今まで動作していたコードが動かないということが発生する可能性がありますので、事前に変更内容を知り、対策をしておくことが求められます。HTML5Rockの更新情報として掲載されていましたので、さっそく日本語訳をしてみました。... 続きを読む

祝: Atom の Web Components 導入、ついでに Atom Shell の話。 - steps to phantasien

2014/12/22 220 users Atom steps to phantasien エディタ

GitHub 謹製 Atom エディタが Shadow DOM を使い始めたという。 めでたい。せっかくだから私も Atom を使ってみよう。 起動してテキスト書きもそこそこにインスペクタで DOM を眺める。 するとあら素敵。Shadow DOM のみならず Custom Elements もばりばり使われているじゃありませんか。 ためしにステータスバーをつついてみるとわかる。 Atom は U... 続きを読む