VanJS で素のDOM操作をリファクタしたら最高だった

2023/08/17 24 users バンドルサイズ gzip圧縮 トランスパイル API 9KB

VanJSを試してみたら開発体験が良かったので紹介します。 🍦 VanJSとは？ VanJSは、数ヶ月前にメジャーバージョンがリリースされた比較的新しいReactive UIフレームワークです。軽量、非依存、トランスパイル不要、シンプルなAPIという特徴があります。 gzip圧縮で0.9kbと非常に軽量で、バンドルサイズの肥大化を気にす... 続きを読む

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう - エンジニアHub｜若手Webエンジニアのキャリアを考える！

2020/02/18 316 users フレームワーク エンジニアHub 仮想DOM React 傍ら

はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている... 続きを読む

[JS]0.6kBの超軽量！基本的なDOM操作を実行するためだけに開発されたシンプルなライブラリ -nanoJS | コリス

2018/05/31 75 users Git コリス ポパー before After

要素にclassを加えたり、変更したり、要素を削除したり、::beforeや::afterを加えたり、要素の表示位置を取得したり、変更したり、クリックやホバーのイベントを設定したり、基本的なDOM操作を実行するためだけに開発された超軽量ライブラリを紹介します。 jQueryは使うけど、$関数や上記の挙動しか利用しないという人には、特にぴったりなスクリプトです。 nanoJS nanoJS -Git... 続きを読む

既存のコードの理解が捗るChrome DevToolsの使い方 - kitak.blog

2016/05/07 141 users Chrome DevTools 既存 kitak.blog

2016 - 05 - 07 既存のコードの理解が捗るChrome DevToolsの使い方 FrontEnd JavaScript jQuery 系ライブラリによるDOM操作が主なプロジェクトにがっつり機能を追加する機会があった。 その JavaScript のコードは他の人から引き継いだコードで、一応引き継ぎ時にディレクトリ構成、設計結果、実装方針について共有を受けたが、それでもいざ手を入れよ... 続きを読む

karma+mocha+power-assertでDOM操作を含むユニットテストをES6で書く | WebDesign Dackel

2015/11/02 71 users ユニットテスト Pow テスティングフレームワーク ES6

テスト周りは以前にmocha+chai、QUnitを少し触った程度であまり詳しくなく、少しずつ慣れていかなきゃなぁと感じていました。 そこで今回は簡単なモジュールを、コード本体とテストコードの両方をES6で書いてみました。 タイトルにもありますが、主要なライブラリは以下を使っていきます。 karma 0.13.14 : テストランナー mocha 2.3.3 : テスティングフレームワーク pow... 続きを読む

JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ

2015/10/14 423 users インタラクション anatoo ウェブページ パフォーマンス

2015-10-14 JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて 2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがあ... 続きを読む

jQueryを使わずに～したい、を調べられる逆引きリファレンス・「Plain JavaScript」 - かちびと.net

2015/06/03 44 users jQuery リファレンス リファレンスサイト net ニーズ

Plain JavaScript Plain JavaScriptはjQueryを使わずにDOM操作等を行う方法を調べることが出来る逆引きリファレンスサイトです。jQueryはJavaScriptに詳しくなくても容易にDOM操作を可能にしてくれましたが、様々なニーズに応えていったために肥大化しました。ちょっとしたDOM操作だけならわざわざ重いファイルを読み込まずに実装した方がパフォーマンスを損なわ... 続きを読む

Excel VBA+IEでのスクレイピング - プログラマになりたい

2014/12/28 415 users スクレイピング プログラマ Crawler クローラー VBA

2014-12-28 Excel VBA+IEでのスクレイピング crawler 書くと宣言しながら、すっぽかしていたクローラー／スクレイピング Advent Calendar 2014の11日目です。ExcelのVBAで、IEの操作が出来ます。またその中の機能にDOM操作があります。この二つがあれば、Excelだけでスクレイピングできますよという話です。 何を隠そう、私が初めてスクレイピングに手... 続きを読む

iOS8はiOS7に比べてDOM操作が3倍早い | mah365

2014/09/23 23 users iOS7 iOS8 mah365 Sencha 結論

Apple Shows Love for HTML5 with iOS 8という記事でiOS7のときと比べてiOS8のWebのフロント処理能力がどれほど向上しているかをSenchaがまとめています。結論としてはiOS8からHTML5に本気を出せる。 やっとHTML5が火を噴くのかな 具体的なベンチマークなどはApple Shows Love for HTML5 with iOS 8をご覧頂いた方が... 続きを読む

吉川徹さん（@yoshikawa_t）さんの「DOM操作の最適化によるJavaScriptチューニング」問題解説記事 #javascript｜CodeIQ MAGAZINE

2014/01/07 106 users yoshikawa_t CodeIQ MAGAZINE

吉川徹さん（@yoshikawa_t）さんの「DOM操作の最適化によるJavaScriptチューニング」問題解説記事 #javascript 2014.01.07 Category：コード解説 Tag：HTML5 ,JavaScript 吉川徹さんによる「DOM操作の最適化によるJavaScriptチューニング」問題解説記事です。JavaScriptのDOM操作について基本的なパフォーマンスチュー... 続きを読む

『jQueryで作るスライドショー (全8回) 』をドットインストールに追加しました #dotinstall | IDEA*IDEA

2013/10/09 11 users jQuery dotinstall IDEA 題材 レッスン

さて今週はjQueryの題材としては定番のスライドショーを作ってみました。 シンプルではありますが、DOM操作やタイマー処理など、基本動作を学ぶことが出来るのでおすすめです。 ↑ こういう感じのを作っていきます。 あと全然関係ないですが、このレッスンで使用した料理写真は全部自分で作りました！料理楽しいですよね。 さてこれで153レッスン、総動画数は2,218本になりました。次は何をつくるべきか。 ... 続きを読む

DOM操作の最適化によるJavaScriptチューニング（後編） | HTML5Experts.jp

2013/09/08 151 users 後編 JavaScriptチューニング CodeIQ 最適化

連載「Webサイト・アプリ高速化テクニック徹底解説」の第5回は、前回の「DOM操作の最適化によるJavaScriptチューニング（前編）」に続く後編です。後編では、createElement()などのDOM操作メソッドを使ったさまざまなテクニックや、パフォーマンスを劣化させるよくあるパターンについて詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテ... 続きを読む

DOM操作の最適化によるJavaScriptチューニング（前編） | HTML5Experts.jp

2013/09/04 194 users JavaScriptチューニング CodeIQ 前編 最適化

連載「Webサイト・アプリ高速化テクニック徹底解説」の第4回は、JavaScriptのチューニングのうち、ボトルネックになりやすいDOM操作の最適化について解説します。前編・後編にわたって、DOM操作が遅くなる原因と仕組み、その解決策について詳しく解説します。 CodeIQとの連動企画！ この記事で学べるJavaScriptチューニングのテクニックを、実際にCodeIQの問題で試すことができます。... 続きを読む

グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる － Publickey

2013/03/28 428 users メモリリーク Publickey プロファイリング 例題 全部

グーグルがChrome DevToolsの学習ビデオを公開。DOM操作からプロファイリング、メモリリークの発見まで詳しく学べる 学習内容は全部で以下の7つのレベルに分かれており、17本のビデオと、レベルごとに用意された、実際に自分で操作して解いてみる75以上の例題から構成されています。レベルをクリアするとバッジがもらえるようになっています。 Level 1: Getting Started & B... 続きを読む

PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」:phpspot開発日誌

2012/06/18 431 users jQuery DOM Server-Side スクレイピング

phpmaster | Server-Side HTML Handling Using phpQuery PHPでのスクレイピングやDOM操作をjQueryっぽく超簡単便利にできる「phpQuery」。 紹介記事を読んで使ってみました。 phpQuery はjQueryのPHP版でDOMの操作をjQueryっぽくできるライブラリです。 HTMLのスクレイピングはもちろん、HTMLを追加したり要素に... 続きを読む

注目！サーバサイドからjQueryを使ってDOM操作「nodeQuery」 - MOONGIFT|オープンソース・ソフトウェア紹介を軸としたITエンジニア、Webデザイナー向けブログ

2011/11/24 251 users サーバサイド MOONGIFT jQuery 描画 メソッド

node.jsでjQueryライブラリを読み込むと、jQueryが提供するメソッドを使えますが、さらに一歩進めたのがnodeQueryです。サーバサイドからクライアントサイドの描画を変更できたりしてとても面白い実装ができます。 0 続きを読む

XPath使いのための日本語チートシート

2008/03/13 511 users XPath XML 文法 英語 内容物

XPath使いのための日本語チートシートを公開しています。内容物→XPathチートシート、XPath全関数一覧、Xpath for Javascriptなど。XPath使いのための日本語チートシート 第２版 XPathで楽してDOM操作したい！XMLを弄り倒したい！と思うけれども文法がよく分からんと。 これは困った。かといって英語のCheat Sheetsは一目で分かりづらい。 現在（2008年3... 続きを読む

Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト（1/4） ─ ＠IT

2008/01/07 224 users Ajax オートコンプリート スライダー 弱点 ライブラリ

今回紹介するscript.aculo.usは、以下のような機能を提供するAjax（JavaScript）フレームワークです。 ビジュアルエフェクト ドラッグ＆ドロップ DOM操作 オートコンプリート スライダー 単体テスト prototype.jsをベースのライブラリに使用しているので、prototype.jsとともに利用したことがある方も多いのではないでしょうか。 今回はscripot.acul... 続きを読む

404 Blog Not Found:javascript - element.innerHTML はなぜ速く見えるか

2006/10/21 62 users Element innerHTML 構文解析 HTML 速度

自分でこう書きながら、実は首を傾げていたのだけどやっとわかった。 404 Blog Not Found:WEB+DB PRESS vol.35 pp.57 まず速度ですが、innerHTMLは代入時にHTMLの構文解析が入るので、速度的にはDOM操作が有利です。 期待に反してそうでないのは、404 Blog Not Found:javascript - DOM vs innerHTML bench... 続きを読む