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

この記事は何

以前Qiitaで以下のようなRubyで仮想DOMを扱う方法を記事にしました。

これらで紹介した仮想DOMを使って、Brainf*ckのインタプリタを作ってみたのですが、簡単なプロトタイプを作るのにはかなり便利なことが改めて実感できたので、せっかくなのでライブラリとして公開してみました。

この記事では作成したruby-wasm-vdomについて紹介していきます。

ruby-wasm-vdomとは

ruby-wasm-vdomは、文字通りRubyで仮想DOMを扱えるようにするためのライブラリです。

以下のような感じで仮想DOMを全てRubyのみで書くことができます。

<html>
  <head>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://getty104.github.io/ruby-wasm-vdom/index.js"></script>
    <script type="text/ruby">
      state = {
        count: 0,
      }

      actions = {
        increment: ->(state, value) {
        state[:count] += 1
        }
      }

      view = ->(state, actions) {
        h(:div, {}, [
          h(:button, { onclick: ->(e) { actions[:increment].call(state, nil) } }, ['Click me!']),
          h(:p, {}, ["Count is #{state[:count]}"])
        ])
      }

      App.new(
        el: "#app",
        state:,
        view:,
        actions:
      )
    </script>
  </body>
</html>

このような感じでブラウザ上に<script src="https://getty104.github.io/ruby-wasm-vdom/index.js"></script> を記述するだけで利用ができるようになります。

また、 https://qiita.com/getty104/items/929af3742eb1dddacbaf で記事にしたとおり、JSXライクの記述を行うことも可能です。

<html>
  <head>
  </head>
  <body>
    <div id="app"></div>
    <script src="https://getty104.github.io/ruby-wasm-vdom/index.js"></script>
    <script type="text/ruby">
      state = {
        count: 0,
      }

      actions = {
        increment: ->(state, value) {
        state[:count] += 1
        }
      }

      view = ->(state, actions) {
        eval DomParser.parse(<<-DOM)
          <div>
            <button onclick='{->(e) { actions[:increment].call(state, nil) } }'>Click me!</button>
            <p>{"Count is #{state[:count]}"}</p>
          </div>
        DOM
      }

      App.new(
        el: "#app",
        state:,
        view:,
        actions:
      )
    </script>
  </body>
</html>

どのように実装しているかは以前記事にしています。

何が嬉しいの？

このライブラリを使うとRubyで仮想DOMを扱えるようになります。
実際どういう時にこのライブラリが便利かというと、ズバリ「RubyのライブラリやコードのデモをWeb上で動かしたい時」です。

今回作ったruby-wasm-vdomはruby.wasm上で動いているので、Rubyで実装したコードをそのまま組み込むことができます。
例えば、以下のようなBrainf*ckのインタプリタも、インタプリタのコードを書いてruby-wasm-vdomで実行できるようにしてあげるだけで簡単にデモを公開することができました。

ReactやVue.js、Svelteなど、便利なフロントエンドのライブラリはたくさんありますが、それらを使ってRubyのコードのデモを実装するのは環境構築含め、少々面倒です。

今回作ったruby-wasm-vdomはスクリプトを一行書き込むだけで利用できるので、簡単にRubyのコードをWeb上で動かすことができます。

まとめ

今回はRubyで仮想DOMを扱えるようにするライブラリruby-wasm-vdomを紹介しました。
このライブラリを使うことで、Rubyで仮想DOMを扱えるようになります。
また、このライブラリを使うことで、Rubyのコードを簡単にWeb上で動かすことができます。
みんなでRuby Lifeを楽しみましょう！