コンテンツへスキップ

仮想DOMを使ったJavaScriptライブラリまとめ

by : 2017/06/21

ここ数年JavaScript界隈で注目を集めたのがVirtual DOM(仮想DOM)です。DOMをJavaScriptから操作する場合、その状態を管理するのが問題になりますが、Virtual DOMではDOMの描画から開放されるのでロジックとビューの分離が可能になります。

そんなVirtual DOMを提供するライブラリを紹介します。

React – A JavaScript library for building user interfaces

Virtual DOMを最初に広めたのがReactです。画期的な概念であり、JavaScriptプログラマにとって大きな変革になりました。次期バージョンからReact Fiberとなり、レンダリング処理などが高速化すると言われています。

元々Virtual DOMによってDOMとは切り離された技術になっていますので、React Nativeによってスマートフォンアプリの描画に使われたり、コミュニティベースではReact CanvasでCanvasへの描画、React Consoleというコンソールアプリケーション開発用のソフトウェアも作られています。

React – A JavaScript library for building user interfaces

Vue.js

Reactが独自のタグを定義するのに対してVue.jsでは元々のHTMLタグを活用したVirtual DOM利用ができます。そのため学習コストが低く、利用者が増えています。Reactと同じようにサーバサイドレンダリングにも対応しています。

シンプルな仕組みで、ランタイムもコンパクトです。Virtual DOMの仕組みも高速なのが売りです。

Vue.js

Maquette

ReactはJSXを覚える必要がありますが、Maquetteは純粋なJavaScriptだけで記述できます。以下はサンプルコードです。

var yourName = ''; // Piece of data
// Plain event handler
function handleNameInput(evt) {
yourName = evt.target.value;
}
// This function uses the 'hyperscript' notation to create the virtual DOM.
function renderMaquette() {
return h('div', [
h('input', {
type: 'text', placeholder: 'What is your name?',
value: yourName, oninput: handleNameInput
}),
h('p.output', ['Hello ' + (yourName || 'you') + '!'])
]);
}
projector.append(domNode, renderMaquette);

view raw
index.js
hosted with ❤ by GitHub

GZip圧縮すると3KBになるというコンパクトなサイズも売りです。

Maquette

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

Reactの代替と銘打っているライブラリです。React向けに作られているコンポーネントがそのまま使えるようになっているのがポイントです。

export default class TodoList extends Component {
state = { todos: [], text: '' };
setText = e => {
this.setState({ text: e.target.value });
};
addTodo = () => {
let { todos, text } = this.state;
todos = todos.concat({ text });
this.setState({ todos, text: '' });
};
render({ }, { todos, text }) {
return (
<form onSubmit={this.addTodo} action="javascript:">
<input value={text} onInput={this.setText} />
<button type="submit">Add</button>
<ul>
{ todos.map( todo => (
<li>{todo.text}</li>
)) }
</ul>
</form>
);
}
}

view raw
index.js
hosted with ❤ by GitHub

パフォーマンスやサイズに重点を置いており、Reactを使っている方の悩みを解決する存在と言えそうです。

Preact | Preact: Fast 3kb React alternative with the same ES6 API. Components & Virtual DOM.

WebReflection/hyperHTML: A Fast & Light Virtual DOM Alternative

hyperHTMLはシンプルなVirtual DOMライブラリとなっています。onclickなどは別な関数を定義して、そちらに飛ばす仕組みになっています。以下はサンプルコードです。

// this is hyperHTML
function tick(render) {
render`
<div>
<h1>Hello, world!</h1>
<h2>It is ${new Date().toLocaleTimeString()}.</h2>
</div>
`;
}
setInterval(tick, 1000,
hyperHTML.bind(document.getElementById('root'))
);

view raw
index.js
hosted with ❤ by GitHub

WebReflection/hyperHTML: A Fast & Light Virtual DOM Alternative

anthonyshort/deku: Render interfaces using pure functions and virtual DOM

Reduxと組み合わせて使うこともできるVirtual DOMライブラリです。軽量なReactといった雰囲気があります。ピュアなJavaScriptで記述できるのがポイントです。

/** @jsx element */
import {element, createApp} from 'deku'
import {createStore} from 'redux'
import reducer from './reducer'
// Dispatch an action when the button is clicked
let log = dispatch => event => {
dispatch({
type: 'CLICKED'
})
}
// Define a state-less component
let MyButton = {
render: ({ props, children, dispatch }) => {
return <button onClick={log(dispatch)}>{children}</button>
}
}
// Create a Redux store to handle all UI actions and side-effects
let store = createStore(reducer)
// Create an app that can turn vnodes into real DOM elements
let render = createApp(document.body, store.dispatch)
// Update the page and add redux state to the context
render(
<MyButton>Hello World!</MyButton>,
store.getState()
)

view raw
index.js
hosted with ❤ by GitHub

Reactで書いた場合の半分くらいのサイズになるようです。

anthonyshort/deku: Render interfaces using pure functions and virtual DOM


Virtual DOMはWebアプリケーションが大型化していく中で見逃せない概念になっています。かといってReactやVue.jsで開発するのに苦痛を感じる方もいるでしょう。そうした時にはVirtual DOMのライブラリを採用するのも手でしょう。

DOMの状態管理が大変になってきていたら導入を検討してみてはいかがでしょう。

From → hifive, HTML5

コメントは受け付けていません。

%d人のブロガーが「いいね」をつけました。