MyFirstRails

Ovtoをフロントエンドに導入

概要

Railsに初めて触れる方を対象にしたチュートリアルです

ovtoというRubyでフロントエンドを書けるフレームワークをRailsに導入するチュートリアル

チュートリアル

Railsのひな型を作る

まず、rails newを実行し、Railsアプリのひな型を作成します

rails new ovto

次に、作成したRailsアプリのディレクトリへと移動します

cd ovto

SQLite3のバージョン修正

先ほどのrails newでsqlite3のインストールがエラーになっている場合は、以下のようにバージョンを指定してください

gem 'sqlite3', '1.3.13'

その後、bundle installを実行します

bundle install

Opalの導入

OpalをRailsに導入します

Gemfileにgem 'opal-rails'を追加します

gem 'opal-rails'

その後、bundle installを実行します

次に、app/assets/javascripts/application.jsをリネームし、app/assets/javascripts/application.js.rbとします

そして、app/assets/javascripts/application.js.rbを以下のように修正します

require 'opal'
require 'rails-ujs'
require 'turbolinks'
require 'activestorage'
require_tree '.'

これでOpalの導入は完了です！

静的なページを作成

次に、Ovtoで作成したコンポーネントを表示できる静的なページ作成します

rails g controller web index

次に、config/routes.rbにてrootへのルーティングを設定します

Rails.application.routes.draw do
  root 'web#index'
end

Ovtoの導入

次に、Ovtoの導入を行います

Gemfileにgem 'ovto'を追加します

gem 'ovto'

その後、bundle installを実行します

bundle install

その後、app/assets/javascripts/ovto_app/main.rbを以下のように作成します

require 'ovto'

class MyApp < Ovto::App
  class State < Ovto::State
  end

  class Actions < Ovto::Actions
  end

  class MainComponent < Ovto::Component
    def render(state:)
      o 'div' do
        o 'h1', 'Hello Ruby on Rails & Ovto!'
      end
    end
  end
end

MyApp.run(id: 'ovto')

最後に、app/views/web/index.html.erbに以下のコードを追加します

<div id="ovto"></div>

あとはrails sを実行して

rails s

localhost:3000にアクセスし、Hello Ruby on Rails & Ovto!と表示されていればOKです

これでOvtoの導入は完了です！

Ovtoでカウンター作成

次に、Ovtoでカウンターを作成します

app/assets/javascripts/ovto_app/main.rbを以下のように変更します

require 'ovto'

class MyApp < Ovto::App
  class State < Ovto::State
    item :count, default: 0
  end

  class Actions < Ovto::Actions
    def add_count(state:, count:)
        return {count: state.count + count}
    end
  end

  class MainComponent < Ovto::Component
    def render(state:)
      o 'div' do
        o 'h1', 'Hello Ruby on Rails & Ovto!'
        o 'input', type: 'button', onclick: ->(e){ actions.add_count(count: 1) }, value: 'Sum'
        o 'p', state.count
      end
    end
  end
end

MyApp.run(id: 'ovto')

これでSumというボタンが表示され、クリックすると表示されている数字が増えていくようになります！

こういった形でOvtoでフロントエンドを作ることができます！

This site is open source. Improve this page.