giftee Tech Blog

ギフティの開発を支えるメンバーの技術やデザイン、プロダクトマネジメントの情報を発信しています。

RubyKaigi 2026セッションレポート：ブラウザでRubyを動かす！PicoRuby.WASMとFunicularを触ってみた

RubyKaigi Ruby イベントレポート

image_name

みなさん、こんにちは！新卒2年目エンジニアのasanoです。普段は、Ruby on Railsを採用したtoC向けプロダクトの開発を担当しています。

2026/4/22〜24に北海道函館市で開催されたRubyKaigi 2026に参加してきました。 Hitoshi Hasumiさん（@hasumikin）のセッション「Funicular: A Browser App Framework Powered by PicoRuby.WASM」が特に印象に残ったので、セッションの概要と実際に動かしてみた感想を共有します。

Funicularとは

FunicularはPicoRuby.WASMを使ったSPAフレームワークです。JavaScriptを一切使わず、Pure Rubyだけでブラウザアプリが書けるというのがポイントです。

このセッションを理解する上で、以下の2つのキーワードを押さえておくと良いです。

  • PicoRubyとは：通常のCRubyより軽量なRubyの実装。マイコンなどリソースが限られた環境での動作を想定して作られている。
  • WASMとは：WebAssemblyの略。ブラウザ上でRubyなどネイティブ言語のコードを動かすための仕組み。

なお、このセッションの登壇者であるHasumiさんこそが、PicoRubyおよびPicoRuby.WASMの作者です。

セッションの概要

セッションは前半と後半に分かれていました。

前半はPicoRuby.WASMの紹介です。PicoRubyといえばLチカ（LEDをチカチカ点滅させること）ということで、PicoRuby.WASMを使ってブラウザ上でLチカのデモを見せてくれました。赤と緑のLEDを交互に点滅させたり、デバッガーを使ってコンソールからLEDの点滅を操作したりと、JavaScriptがなくてもここまでできるのか！という驚きがありました。 WASMを使う理由として語られていた「Rubyistなら全てRubyで書きたい」という思想は、まさにRubyKaigiらしい熱量を感じるポイントでした。

後半はFunicularの紹介です。Tic-Tac-ToeやTODOリストなどをFunicularを使用して実装したデモが紹介されました。サンプルコードも公開されており、セッション後すぐに手元で試せる内容でした。

本セッションの登壇スライドはこちらです。デモの背景にある技術的な詳細が気になる方は、ぜひこちらもあわせてご覧ください！

実践

PicoRuby.WASMでLチカしてみた

多くのセッションの中でも、特にこのセッションは、PicoRuby.WASMで実装する方法の具体的なイメージが湧きやすいものでした。これなら私でも試せるはず！と早速手を動かしたくなり、まずはFunicularを使わず素朴にPicoRuby.WASMでLチカを実装してみようと思いました。 こちらのサンプルコードを参考にAIと対話しながらコードを書いてみたところ、PicoRuby初心者、Lチカ経験もない私でも簡単にLチカデモを作ることができました。

image_name

require 'js'

red_led = JS.document.getElementById('red_led')
green_led = JS.document.getElementById('green_led')

3.times do
  red_led.setAttribute('class', 'on')
  green_led.setAttribute('class', '')
  sleep 0.5
  red_led.setAttribute('class', '')
  green_led.setAttribute('class', 'on')
  sleep 0.5
end

普通はマイコンで行うLチカですが、私の初LチカはまさかのブラウザでのLチカとなりました。マイコンでのLチカはまた別の機会に挑戦しようと思います。

Funicularを使ってLチカを書き直してみた

素朴にPicoRuby.WASMでLチカすることはできたので、今度はFunicularを使ってLチカしてみようと思います。

class LED < Funicular::Component
  def render
    color = props[:color]
    led_class = "led #{color}#{props[:on] ? ' on' : ''}"
    div(class: led_class)
  end
end

class App < Funicular::Component
  def initialize_state
    { red_on: false, green_on: false }
  end

  def component_mounted
    3.times do
      patch(red_on: true, green_on: false)
      sleep 0.5
      patch(red_on: false, green_on: true)
      sleep 0.5
    end
  end

  def render
    div do
      component(LED, color: 'red', on: state.red_on)
      component(LED, color: 'green', on: state.green_on)
    end
  end
end

Funicular.start(App, container: 'app')

Funicularを使ってLチカを書き直してみたらこのようなコードになりました。LEDをクラスで表現できるのがRubyらしいなと感じました。

Funicularの強み活かせてる？

実装を終えて、2つのコードを見比べてみた時に、ある違和感にぶつかりました。確かにFunicularを使用した方がRubyらしくはなりましたが、シンプルさという点では、素のPicoRubyの方が圧倒的に実装量が少なくスッキリしています。わざわざフレームワークを導入して、コードを複雑にしてまで得られるメリットは何なのか。単なるLチカだけでは見えてこない、Funicularをあえて使う理由を、自分なりに掘り下げてみることにしました。

Funicularの強みを活かしてみた

Funicularの強みはコンポーネントの再利用にあると思い、「機能が増えたり部品を使い回したくなったら？」という視点で試してみることにしました。実装したのは、ボタンで各LEDを個別にON/OFFできる仕組みです。

class LED < Funicular::Component
  def initialize_state
    { on: false }
  end

  def toggle(event)
    patch(on: !state.on)
  end

  def render
    color = props[:color]
    led_class = "led #{color}#{state.on ? ' on' : ''}"

    div(class: led_class)
    button(class: "btn-#{color}", onclick: :toggle) { color.upcase }
  end
end

class App < Funicular::Component
  def render
    div(id: 'led_container') do
      component(LED, color: 'red')
      component(LED, color: 'green')
    end
  end
end

Funicular.start(App, container: 'app')

image_name

素のPicoRuby.WASMでは、LEDを増やすたびに似たようなロジックを書き足す必要がありますが、Funicularならコンポーネントを呼び出すだけで済みます。LEDの点灯ロジックやボタンの動作はLEDクラスの中に閉じ込め、AppクラスはどのLEDを置くかだけを知っていれば良いです。そういう役割分担ができることこそが、Funicularの強みを活かした使い方でした。

まとめ

本記事ではRubyKaigi 2026のセッション「Funicular: A Browser App Framework Powered by PicoRuby.WASM」の内容と、実際に手を動かして分かった Funicular の面白さと、使い分けのポイントについて紹介しました。 セッションで刺激を受け、実際に手を動かしてみることで、JavaScriptなしでブラウザアプリが書けるというPicoRuby.WASMの可能性を感じました。今後PicoRuby.WASMがどのように進化していくのか、JavaScriptを書かない世界が訪れるのか、、、そんな想像をしてワクワクしています。 また、Funicularを使用することで、よりRubyらしい再利用可能なコンポーネント設計ができることも体感できました。 セッションを聞く前は「内容が難しそう」という不安もありましたが、実際に自分の手で動かして試せたことで、一気に親近感が湧きました。興味の向くままに一歩踏み込んでみたことが、一番の学びになったと感じています。

最後まで読んでいただきありがとうございました！また来年のRubyKaigi 2027でお会いしましょう！