Chunky Bacon: ブラウザでRubyを学ぶ
Chunky Baconは、セットアップなしで使えるインタラクティブなRubyコースです。ページを開くだけで、ruby.wasmでWebAssemblyにコンパイルされたRubyがブラウザの中で動きます。コースはドイツ語と英語で、すべてオープンソースです: github.com/Largo/chunkybacon
土台はブラウザで動くRuby Koansと同じですが、こちらは練習問題集ではなくコースで、レッスンはputs "Hallo, Welt!"から始まります。
仕組み
レッスンはノートブック形式です。文章と実行できるコードセルが交互に並び、セルはShift+Enterで実行します。1つのレッスンのセルはすべて同じbindingを共有するので、最初のセルの変数は5つ目のセルでも使えます。各セルは最後の式の値を=> …と表示するので、結果を見るのにputsは要りません。
レッスンは37あります。Rubyの最初の1行から、クラスとモジュール、IRB、gem、Nokogiriによるhtmlの解析、BigDecimalによる正確な計算、SinatraとRodaによるルーティング、3Dグラフィックス、ruby_pptxによるPowerPointの作成まで進みます。プロジェクトのコースでは小さなタイムトラッカーを作ります。
ブラウザの中のgem
多くのRubyコースはgemの手前で終わります。Chunky Baconにはブラウザ内のgemインストーラーがあります。
install_gem "chunky_png"
純粋なRubyのgemは、キャッシュか、同一オリジンのプロキシ経由でrubygems.orgから取得します。取得したgemはWebAssemblyのファイルシステムに展開され、ロードパスが$LOAD_PATHに追加されるので、require、require_relative、autoloadはディスク上と同じように動きます。
C拡張を持つgemはWebAssemblyでは動きません。主なものには純Rubyの代替を用意しています。Nokogiriは私のnokogiri-pureから来ています。これはNokogiri 1.19.4のlibxml2、libxslt、gumboをRubyに移植したものです。bigdecimalへの依存があるとbigdecimal-pureがインストールされます。それ以外のネイティブgemは、Cコードを持つgemの名前を挙げた説明つきで失敗します。それは多くの場合、インストールしようとしたgemの依存先です。
ウィジェット
一部のレッスンでは、セルの下にウィジェットが表示されます。
show_irb: 複数行入力や本物のプロンプトを備えた、本物のIRBターミナルshow_browser: SinatraやRodaのアプリとRackで直接やり取りする、模擬ブラウザウィンドウshow_image: chunky_pngで作ったPNGの表示show_three: three-rbで組み立てたシーンのためのWebGLステージ
セルが書き出したファイル、たとえばdeck.save("chunky.pptx")は、セルの下にダウンロードリンクとして表示されます。
レッスンとは別に、複数ファイルの自作プログラム用の小さなワークショップもあります。ファイル間のrequire_relativeや、getsへの入力が使えます。
進捗はあなたの手元に
サーバーには何も保存されません。進捗、コード、ワークショップのファイルはブラウザの中にあります。進捗ファイルとして保存して後で読み込むことも、httpsのChromeとEdgeならフォルダを接続して、ワークショップのファイルを本物のファイルとして扱うこともできます。フォントは自前で配信しているので、訪問しても第三者へのリクエストは発生しません。
初回はRubyの実行環境として約32 MBをダウンロードします。2回目以降はキャッシュが使われます。
キツネ
オリジナルのキャラクターである漫画のキツネ、Chunky Baconが応援してくれます。名前は、why the lucky stiffの『why’s (poignant) guide to Ruby』へのオマージュです。マスコットは私のオリジナルで、_whのキツネのコピーではありません。
リポジトリ
リポジトリには、html/にアプリ、html/lessons.jsにレッスンの文章、そしてテストのフォルダがあります。1つのテストは、すべてのレッスンで初期コードが失敗し、解答が通ることを確認します。別のテストはgemインストーラーをオフラインで検証し、Playwrightのテストはページを最初から最後まで通して動かします。ローカルでの起動は次のとおりです。
docker compose up -d # ポート8011で起動
コードはMITライセンスです。レッスンの文章とキツネはCC BY-SA 4.0で、どちらも商用利用できます。Rubyを教えている方はコースを改変できますが、改変版はCC BY-SA のままにしてください。第三者のコンポーネントはそれぞれのライセンスに従い、リポジトリに一覧があります。IssueとPull Requestを歓迎します。