クラウドワークス エンジニアブログ

日本最大級のクラウドソーシング「クラウドワークス」の開発の裏側をお届けするエンジニアブログ

RubyKaigi 2024 のブースコンテンツ用に ruby.wasm を使用したクイズアプリを作成しました

RubyKaigi 2024 のブースコンテンツ用に ruby.wasm を使用したクイズアプリを作成しましたというブログのOGP画像

こんにちは、 @t0yohei です。

ruby.wasm は、Ruby のコードを Wasm に変換しブラウザー上で実行できるようにする技術です。 今回は、この ruby.wasm を使用してちょっとした web アプリを作成したので、そのことについて記載してみようと思います。

※ この記事は、RubyKaigi 2024 のクラウドワークス社ブースにて展示するクイズアプリの解説記事です。

作ったもの

Ruby に関するクイズを出題して、それに答えてもらうクイズアプリを作成しました。 RubyKaigi でのクラウドワークス社ブースにてこのクイズアプリに挑戦してもらい、正答数に応じてノベルティをお渡しするという目論見です。

クイズアプリのトップページ

クイズアプリの解説

大まかな仕組み

今回は初めての ruby.wasm を使用したアプリケーション実装ということで、複雑さ回避のためにバックエンドは用意せず、フロントエンドのみのアプリケーションとして作成しました。

問題文・解答は html ページに埋め込まれており、開発者ツールを使用すると解答が丸分かりという形になっています。 そのため、ブース訪問者自身のデバイスでクイズに挑戦してもらう形式ではなく、こちらで用意した PC で挑戦してもらう形式にしました。

使わせてもらったライブラリ

今回は ruby-wasm-vdom を使用させていただきました。 普段の業務では Vue.js を使用してフロントエンド開発をすることが多く、それと近い宣言的なスタイルでの UI 実装を行いたかったためです。

ruby-wasm-vdom を使用することで、完璧にとは行かないものの基本的な宣言的 UI の実装ができたのでとても助かりました。

i18n 対応

RubyKaigi は海外の方もたくさんいらっしゃるということで、i18n 対応も行いました。 仕組みとしては簡素なもので、以下のような hash を用意して使用時に読み取るだけです。

I18N = {
  ja: {
    question: '問題',
    explanation: '解説',
  },
  en: {
    question: 'Question',
    explanation: 'Explanation',
  }
}

問題について

問題については、同僚の @slowhand221b さんに作成いただきました。 可能な限り Ruby 初心者から上級者まで楽しめる問題にしたい、という自分の意向を組んで問題を用意して下さりとても助かりました。ありがとうございました！

デプロイ先

今回は Netlify を使用しました。 個人の private リポジトリで開発を進めていた関係で、GitHub Pages が使用できず、代替の手段として利用させて頂きました。

難しかったこと

タイマーの部分の実装

1 秒毎に画面に表示されている数字を 1 ずつ減らしていくという部分で、ruby の sleep や ruby.wasm の JS.global.call を使用したコードだけではどうしても実現できず、JavaScript で実装しました。 ruby-wasm-vdom で管理している状態の更新も絡んできていることも難しさの一因でした。

Ruby のコード規約、JavaScript のコード規約の使い分け

キャメルケース・パスカルケースの使い分けや、引数を持たないメソッド呼び出しに () をつけるかなどといった Ruby・JavaScript のコード規約の制御が悩みどころでした。 Ruby のコードの中で JavaScript のようなコードを実装することがあり、このような形になってしまったのだと予想しています。

例えば、以下は画面表示用の Ruby コードなのですが、 getElementById を使用した DOM の操作の部分は JavaScript のようなコードを実装しています。この部分は JavaScript のようなコードなので、パスカルケースではなくキャメルケースになります。 戻り値の格納先である変数 appEl は ruby の変数ですが、DOM から取得した値の格納先なのでキャメルケースにしています。

このような使い分けの積み重ねにより、Ruby のコード内にキャメルケースの登場シーンが増えていき、段々制御が上手く出来なくなっていきました...(結果として ruby のメソッド名である renderApp も気づいたら何故かキャメルケースになっちゃってました)。

def renderApp(state:, view:, actions:)
  appEl = JS.global[:document].getElementById('app');
  children = appEl[:children]

  if children[:length].to_i > 0
    children[0].remove()
  end

  render = lambda {
    RubyWasmVdom::App.new(
      el: "#app",
      state:,
      view:,
      actions:
    )
  }

  JS.global.call(:setTimeout, JS.try_convert(render))
end

サンプルコード探し

ruby.wasm はまだ web 上に存在する実装サンプルも少なく、この部分はどう実装すれば良いんだろうと迷う部分も多々ありました。 ruby.wasm のリポジトリ内の Community Showcaseにあるコードを実際に見て、参考にさせてもらいました。

感想

今回、ブースコンテンツとして ruby.wasm を使用したクイズアプリを作ってみましたが、Ruby を使ってフロントエンドを書くのはとても楽しかったです！ その分、もっと不自由なく宣言的 UI が実現できるようなフレームワークがあるといいなという気持ちが高まりました。

また、今回のようなクイズアプリだとそこまで ruby.wasm を利用する直接的なメリットは大きくないのかなと感じました。 コードゴルフのような Ruby のコードを入力してもらって、そのコードを評価するみたいな方向性だと ruby.wasm の真価が発揮されそうな予感がします。 次にまたブースコンテンツを作成する機会があれば、そのようなアプリ作成に挑戦してみたいと思います。

以上です。お読み頂きありがとうございました。

RubyKaigi2024 にてプラチナスポンサーとして協賛・ブース出展します

アイキャッチ：RubyKaigi2024 スポンサー表明 株式会社クラウドワークスは2024年5月15日から沖縄県那覇市にて開催される、プログラミング言語 Ruby の世界最大級国際カンファレンス「RubyKaigi 2024」にて、プラチナスポンサーとして協賛・ブース出展します。

Rubyとクラウドワークス

crowdworks.jp では創業時よりWebアプリケーション開発のフレームワークとしてRuby on Rails を使用し、その他周辺ツールの開発にもRubyのエコシステムを多分に活用しております。Rubyによって収益化できていると言っても過言ではなく、2018年以降継続的にRubyKaigiのスポンサーをしています。 また、クラウドテック、ビズアシ、新規事業のPARKなどに加え、ここ1年で子会社化されジョインしたプロダクトでもRubyを使用しており、益々Rubyというオープンソース言語の恩恵に預かっております。 Rubyコミュニティのさらなる活性化に寄与するとともに、これからのRubyの発展に一層貢献してまいります。改めまして、よろしくお願いいたします。

engineer.crowdworks.jp

クラウドワークスのメンバーも多数現地参加いたします

ブースのほうでは、昨年に引き続き皆さんとの交流を楽しみにお待ちしています。（私は行きませんが (ﾉД`) ） 今年は初参加が増え、参加メンバーも新しい顔ぶれになりましたのでお手柔らかにお願いします。

RubyKaigi 2024概要

主催：RubyKaigi Team ・ 一般社団法人日本Rubyの会

開催期間：2024年5月15日（水）、5月16日（木）、5月17日（金）

場所：那覇文化芸術劇場なはーと

基調講演：まつもと ゆきひろ氏、石田 智也氏、Samuel Williams氏

公式サイトURL：https://rubykaigi.org/2024/

クラウドワークスブース概要

例年のごとくささやかながらノベルティを準備させていただいております。

RubyKaigi2024のノベルティたち
RubyKaigi2024 novelties
今年はちょっとしたコンテンツもありますので、楽しんでいってください。 余談ですが昨年まで弊社名物だった飴配りの少女は今年から他のブースのほうにおります。

今年はオフラインのみということでより特別感がありますね。私はオンラインがあるとタカをくくっていました反省しています。 現地参加のみなさん、楽しんできてください！！

フロントエンド課題を解決するべく、アッセンブルしてみた

クラウドログのフロントエンド開発を担当している牛嶋と申します。

今回はクラウドログのフロントエンドメンバーが参加して行う「フロントエンドアッセンブル」とその取り組みを紹介させていただきます。

フロントエンドアッセンブルについて

フロントエンドアッセンブルは、フロントエンドにおける開発課題を解決するためのチームです。

アッセンブルで挙げられる課題は様々ですが、日々の開発におけるフロントエンドを中心とした課題や技術的負債の解消を目的に行っています。

先日、「SaaSUI の割れ窓リストを作ってみた話」が投稿されました。こちらは UI/UX を中心とした課題が割れ窓リストにまとめられています。 それに対しフロントエンドアッセンブルでは、この割れ窓リストの中からフロントエンドの技術的な課題を抽出し、対応しています。

続きを読む

クラウドワークスでのエンジニアリングマネージャーとしての歩み

クラウドワークスのテクノロジーエクセレンスグループSREチームでマネージャーをしているbayashi_okです。

今回はエンジニアリングマネージャーになってからやってきた取り組みを一部紹介しようと思います。

まず少し自己紹介をすると、前職では同じく事業会社でSREをしており、チームの立ち上げから行い、マネージャーとして各サービスのインフラ整備や自動化などを行ってきました。

現職への入社は約４年前で入社時は再びSREチームメンバーとして業務を行ってきました。
そして１年半前に再びマネージャーに戻ることとなりました。

現在はテクノロジーエクセレンスグループというグループで

  • crowdworks.jpのSREチーム
  • 組織横断を視野に入れたチーム

のマネージャーをするとともに、crowdworks.jpのプロダクトマネジメントチームのサポートも行っています。

なぜ再びエンジニアリングマネージャーとなったのか

入社当時SREチームに入って感じたこととしては以下のようなものがありました。

続きを読む

© 2016 CrowdWorks, Inc., All rights reserved.