100秒で理解する仮想DOM

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

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

rubyで仮想DOMを扱えるようにする「ruby-wasm-vdom」をライブラリとして公開しました - Qiita

2023/06/18 11 users Qiita インタプリタ ライブラリ プロトタイプ Ruby

この記事は何 以前Qiitaで以下のようなRubyで仮想DOMを扱う方法を記事にしました。 これらで紹介した仮想DOMを使って、Brainf*ckのインタプリタを作ってみたのですが、簡単なプロトタイプを作るのにはかなり便利なことが改めて実感できたので、せっかくなのでライブラリとして公開してみました。 この記事では作成したru... 続きを読む

preactの仕組みを理解する軽量版教育用preactを作ってる話 - Speaker Deck

2020/11/06 18 users Preact Transcript サブセット React

Transcript 仮想DOMの仕組みを理解する 軽量版教育用 preact 〜俺の React、oreactを作った話〜 Yuta Ide (@sadnessOjisan) #new_style_study 自粛期間にしていたこと ❑ preact 読んでた https://blog.ojisan.io/preact-reading preact とは ❑ 軽量版React, Reactのサブセット ❑ React と異なる実装だが、同一の機能・同... 続きを読む

GAS 家計簿 - Google Apps ScriptとVueで作られたWeb家計簿 MOONGIFT

2020/08/13 21 users MOONGIFT GAS Vue サーバレス React

IT技術の発展はめざましく、日々新しい技術が登場しています。例えばサーバレス、VueやReactの仮想DOM、ちょっと前であればRESTful APIなどがあります。それらを漏れなくキャッチアップするのは大変です。 今回紹介するGAS 家計簿はサーバレスにGAS（Google Apps Script）を使って家計簿Webアプリケーションを作るハンズ... 続きを読む

Svelteとは？Reactの比較 / TypeScriptと Sassの導入方法｜sumi｜note

2020/06/27 12 users redux Vuex Sumi Style Sass

Svelteとは最近フロントエンドの技術で、ReactやVue.jsに変わって注目を集めているのが Svelte です。下記のような特徴があります。 ・仮想DOMがない ・ファイル拡張子.svelteになる ・svelteファイルに記述されたstyleはスコープ付きになる ・Store管理も内包している（ReduxやVuexのようにインストールしなくてよい） ... 続きを読む

仮想DOMの作りかた - Qiita

2020/05/08 16 users Qiita INIAD 知見 東洋大学情報連携学部 学生

どうもこんにちは、ウマシバ(@UMASHIBA)といいます！ INIAD(東洋大学情報連携学部)の学生です。 先日、仮想DOMを個人的に実装してみまして、その際に得た知見を記事という形で共有したいと思います。 仮想DOMを作成するという内容上とても長い記事になってしまっていました。時間がある時や何日かに分けたりして読んでく... 続きを読む

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

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

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

React.js, Vue.jsが使えない状況でメンテナンス性の高いJavaScriptを書く3つのポイント - エムスリーテックブログ

2018/12/23 259 users React.js エムスリーテックブログ Vue.js 岩本

エムスリー エンジニアの岩本です。 この記事は エムスリー Advent Calendar 2018 の23日目の記事です。 React.jsやVue.jsを使えれば、開発のベストプラクティスなどがあるので、メンテナンス性の高いプログラムはずいぶんと書きやすくなったと思います。本当に仮想DOMの功績は大きいですね。 しかし、世の中にはそうい... 続きを読む

Rust / yew で 仮想DOMなウェブアプリケーションを作ってみた

2018/08/18 43 users ウェブアプリケーション rust yew うえ 省略

前提として、自分の Rustの知識は 1年に1回ぐらい思い立った時にちょろっとやるぐらいで、基礎文法をググりながら、複雑なライフタイムとか書こうとすると手が止まる程度の知識。勘で書いてる。 前提 cargo build --target wasm-unknown-unknown ができるようになるまでは省略。 調べた感じ、Rust の wasm ビルドでウェ... 続きを読む

仮想DOMの内部の動き | プログラミング | POSTD

2017/02/09 239 users React POSTD Preact ライブラリ コア

仮想DOM（VDOMあるいはVNode）は魅力的です。しかし複雑で、理解が難しいものでもあります。ReactやPreact、その他同様のJSのライブラリでは、これをコアで使っています。この記事では、Preactにおける仮想DOMの動きを解説しています。PreactでVDOMがどのように機能するかを示すフローチャート 仮想DOM（VDOMあるいはVNode）は魅力的です✨　しかし複雑で、理解が難しい... 続きを読む

React Native用の統合開発環境「Deco IDE」、オープンソースで公開 － Publickey

2016/05/31 140 users Publickey モバイルアプリケーション iOS 特長

「 React 」は、2013年にFacebookがオープンソースとして公開したJavaScriptフレームワーク。仮想DOMなどの手法を用いてユーザーインターフェイスの開発を効率的に行えるのが特長です。 そのReactと同じ書き方のJavaScriptでiOSやAndroidに対応したモバイルアプリケーションを開発できるのが「 React Native 」です。 「 Deco IDE 」は、Re... 続きを読む

Fluxフレームワーク戦争の現状確認（後編） - マルシテイアは月の上

2015/12/24 149 users マルシテイア Qiita TodoMVC 後編 現状確認

2015 - 12 - 25 Fluxフレームワーク戦争の現状確認（後編） この記事は 仮想DOM/Flux Advent Calendar 2015 の25日目……に入れようと思ってたけどもう埋まってた……。 オマケということで頼む！！！！！ 24日目は JavaScript - 実践：MagJS で TodoMVC - Qiita でした。 メリークリスマス！！！！！！！！！！ こんにちは i... 続きを読む

0-9, 二槽式とはなにか

2015/12/13 33 users 0-9 アーキテクチャ View ロジック 定義

この記事は 仮想DOM/Flux Advent Calendar 2015 - Qiita 13日目です。 二槽式とは「Viewとロジックを切り離し、それぞれが独立して成立することを目指したアーキテクチャ」をさして呼んでいます。 （これは私が勝手に名付けてるだけなので厳密な定義はないです） このView部分を「フロントエンドフロントエンド」、ロジック部分を「フロントエンドバックエンド」と呼び、合わ... 続きを読む

Fluxフレームワーク戦争の現状確認（前編） - マルシテイアは月の上

2015/12/02 241 users マルシテイア Fluxフレームワーク 前編 実装 現状確認

2015-12-02 Fluxフレームワーク戦争の現状確認（前編） この記事は 仮想DOM/Flux Advent Calendar 2015 2日目の記事です。 みなさんFlux書いてますか？ 僕はオレオレ実装を書き続けて消耗してます。 Fluxフレームワーク使いたいけど使いたくない……！！ いったい今Fluxフレームワークって幾つ生き残ってるの……戦争は終わったの？ っていうか最近新フレームワ... 続きを読む

VirtualDom - 仮想DOMで魂が震えてから一年、仮想DOMとFluxの今 - Qiita

2015/12/01 291 users Production React 外堀 Flux Qiita

なぜ仮想DOMという概念が俺達の魂を震えさせるのか から一年、みなさまどのようなフロントエンドをお過ごしでしょうか。 僕はひたすら過去資産をリファクタしています。 需要の雰囲気 色んな所に書きましたが、去年僕が仮想DOM AdventCalendar をやったのは、「僕自身がproductionで使いたい」ので、「Reactまあいいよね」的な雰囲気を作って外堀埋めるのが目的でした。そして、その目的... 続きを読む

React.jsをCoffeeScriptとjadeで書く | uzimith.github.io

2015/03/15 78 users Jade CoffeeScript reactjs あたり

はじめに React v0.13.0 Beta 1 | React React.Componentを使うと生のJSのclass形式でReact Componentを定義できる reactjs - react-jadeでjadeテンプレートから仮想DOMを出力する - Qiita JSXのXの部分をjadeで書けるようにするライブラリ (Jade -> React VDOM) ここあたりの記事を読ん... 続きを読む

React.jsの最新版「React v0.13」リリース。ECMAScript 6のClassをサポート、Reactをさらに高速にしていくと宣言 － Publickey

2015/03/12 28 users ECMAscript Publickey React 宣言

React.jsの最新版「React v0.13」リリース。ECMAScript 6のClassをサポート、Reactをさらに高速にしていくと宣言 Reactは仮想DOMと呼ばれる仕組みによって高速にHTMLの動的な書き換え機能などを提供し、Webアプリケーションのフロントエンド部分の構築を支援してくれるJavaScriptライブラリです。 React v0.13では、Reactコンポーネントの作... 続きを読む

Virtual DOMってどんだけ早いの？測ってみた - webとかmacとかやってみようか R

2014/12/02 64 users Mac Qiita mizchi Virtual DOM ドン

2014-12-02 Virtual DOMってどんだけ早いの？測ってみた この記事は VirtualDOM Advent Calendar 2014 - Qiita の2日目です。mizchi くんから誘われて軽い気持ちで参加したら、初日からえらくエモいエントリー(VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita) でブルってます。Virutal DO... 続きを読む

VirtualDom - なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita

2014/11/30 716 users Qiita VirtualDom MVC Whatever

この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOM とはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、仮想DOMとその程... 続きを読む

JavaScript - 仮想DOMライブラリの「virtual-dom」だけでMV*なビューを書く - Qiita

2014/10/31 78 users example GitHub Qiita React diff

virtual-domという、（その名の通り）仮想DOMの生成とdiffを行うシンプルなJavaScriptのライブラリがあります。 GitHubのexampleを見るとわかるのですが、このライブラリのみでも、シンプルな形で動的なビューを実現することができます。 このシンプルさがとても魅力的で、実際に使ってみたのですが、 分かったことをまとめたいと思います。 仮想DOMって？ Reactなどで以前... 続きを読む

reactjs - [JavaScript] 仮想DOMを提供する『React』について少し調べてみた - Qiita

2014/10/03 62 users Qiita React reactjs ユーザインタフェース

たまに耳にする React を自分なりに少し調べてみたので、まとめがてらメモを残します。 ちなみに初めて React を知ったのは 天下一クライアントサイドJS MV*フレームワーク武道会でした。 Reactとは Facebook のチームが開発している、ユーザインタフェースを構築する為の JavaScript ライブラリです。公式ページ ⇒ http://facebook.github.io/r... 続きを読む