Rubyコードにふりがなが表示されるようになりました！ 📖

[takaokouji]

スモウルビー のRubyタブに「ふりがな表示」機能が追加されました！

Rubyコードの各トークンの上に日本語の読み（ふりがな）が表示されるようになり、はじめてRubyを学ぶ子どもたちがコードの意味をより直感的に理解できるようになります。

📖 「ルビ」ボタンでふりがなをON/OFF

Rubyタブのツールバーに「ルビ」ボタンが追加されました。このボタンをクリックするだけで、ふりがな表示をON/OFFできます。

ボタンの状態は次回開いたときも記憶されます（デフォルトはON）。

---

🔤 コードの意味がひとめでわかる

ふりがな表示をONにすると、Rubyコードの各トークンの上に日本語の意味が表示されます。

たとえば answer = gets.to_i と書くと、こんなふりがなが表示されます：

• answer → 変数answer
• = → 紐付ける
• gets → 入力する
• .to_i → 整数化

命令ブロックとRubyコードを行き来しながら学ぶとき、各トークンの意味を日本語で確認できます。

対応しているRuby構文

ふりがなは以下のすべてに対応しています：

• 変数: ローカル変数・インスタンス変数・グローバル変数（変数x・紐付ける）
• リテラル: 数値（数値10）・文字列（文字列「hello」）・真（真）・偽（偽）
• 演算子: 算術（足す・引く・掛ける・割る・余り）、比較（等しい・以上・以下・小さい・大きい）、論理（かつ・または・ではない）
• 制御構造: もし（if）・でなければ（else）・繰り返す（loop do/N.times do）・真である限り繰り返す（while）・まで繰り返す（until）・メソッド作成（def）・クラス作成（class）・状態分岐（case/when）
• スモウルビーメソッド: 動き・見た目・音・イベント・制御・調べる・演算・変数/リスト・ペン・音楽など、ほぼすべてのブロックに対応
• 特別な文字列: "_mouse_" → マウスのポインター、"space" → スペース、"left arrow" → 左向き矢印 など、ブロックメニューの選択肢を日本語で表示

whileにも対応！

今回のアップデートで while 構文とそのふりがなも追加されました。while 文はRubyタブと命令ブロックのどちらからでも作成でき、相互に変換できます：

• while → 真である限り繰り返す
• end（while対応） → 繰り返し終了

---

💡 技術的な仕組み（興味がある人向け）

どうやってふりがなを表示しているの？

Rubyコードを @ruby/prism（WebAssembly製のRuby公式パーサー）でAST（抽象構文木）に変換し、各ノードのトークン位置（行・列）を正確に取得します。その位置情報をもとに、Monaco EditorのViewZones（行と行の間にDOMを挿入する仕組み）を使って、各行の上にふりがなを表示しています。

コードが変更されるたびに再描画しますが、プログラムが長くなっても快適に使えるよう、最後の描画にかかった時間（500〜1000行で10〜30ms程度）の2倍を待機時間として適応的に調整するデバウンス処理を採用しています。

特別な文字列の扱い

スモウルビー のブロックメニューで使われる "_mouse_" や "space" などの特別な文字列は、文字列「_mouse_」 のような表示ではなく、マウスのポインター / スペース のような、ブロックの表記に合わせた日本語に変換しています。

書籍との対応

この機能は「スラスラ読めるRubyふりがなプログラミング」の記法にならっています。同書ではRubyのコードに日本語の読みを添えることで初学者の理解を助けており、スモウルビーでも同じアプローチを取り入れました。

---

📚 詳細情報

実装の詳細や技術的な議論については、以下をご覧ください：

• Rubyふりがな表示機能（Monaco ViewZones） #222
• feat: Rubyふりがな表示機能（Monaco ViewZones） #223
• feat: ドロップダウンメニューの特別な文字列のふりがな対応 #228
• feat: while構文をRubyと命令ブロックで相互変換可能にする #230

ふりがな機能で、スモウルビー をはじめて使う子どもたちのRuby学習をより楽しくサポートしていきます！

---

💬 ご意見・ご質問をお待ちしています

もし スモウルビー を使っていて、これまでと動きが違う、この動きは期待したものと違う、などなど、気になる点があれば 気軽に contact @ smalruby.jp までご連絡ください。

一年に数件しか問い合わせがないので、さみしいくらいの状況ですので、本当に、遠慮なく、ご連絡ください。

⭐ GitHub Starで応援してください

スモウルビー の開発を応援してくださる方は、ぜひGitHubリポジトリにStarをつけてください！

👉 smalruby/smalruby3-editor にアクセスして、右上の「Star」ボタンをクリックするだけです。

皆さまの応援が、開発の大きな励みになります！