⚡️
高速開発
Viteの瞬時のサーバー起動とホットモジュールリプレースメントでシームレスな開発体験を実現。
opal-viteブラウザでRubyを動かす
Viteの高速な開発体験でRubyコードをブラウザ上で実行
Skip to content
クイックインストール
npm / pnpm
bash
# Viteプラグインをインストール
pnpm add -D vite-plugin-opal
# Ruby gemをインストール
gem install opal-viteGemfile
ruby
gem 'opal'
gem 'opal-vite'基本設定
vite.config.ts
typescript
import { defineConfig } from 'vite'
import opal from 'vite-plugin-opal'
export default defineConfig({
plugins: [
opal({
loadPaths: ['./app/opal'],
sourceMap: true
})
]
})最初のRubyファイル
ruby
# app/opal/application.rb
puts "Hello from Ruby!"
class Greeter
def initialize(name)
@name = name
end
def greet
puts "Hello, #{@name}!"
end
end
Greeter.new("World").greetPlayground
ライブデモでopal-viteを体験：
- Practical App - フル機能Todoアプリ
- Chart App - チャート可視化
- Stimulus App - Stimulusコントローラー基本
- API Example - API連携パターン
- Form Validation - リアルタイムバリデーション
- i18n App - 多言語対応
- PWA App - オフライン対応
- Vue App - Vue.js統合
- React App - React統合
すべてのデモはPlaygroundページで確認できます。