BETA

【Sinatra】でgonを使ってjsに変数を渡す!

投稿日:2019-10-16
最終更新:2019-10-16

Gemの一つにRubyアプリからJS(フロント)に変数を渡して処理を進めることができるgonというGemがあるようです。Sinatraで使えたらめちゃめちゃ便利やん!!
ってことで導入してみます。

*参考
gonのマニュアル
https://github.com/gazay/gon-sinatra
実際使用しているコード
https://github.com/datosgobar/nombres-argentinos/blob/f8e513f2f72bd2ecd6e71cb7d3aca8c18875f836/app.rb

Gemのインストール

Gemfileに以下のコードを追加して、bundle install を実施しましょう。

gem 'gon-sinatra'  

erbファイルのヘッダー

erbファイルのヘッダーに

 <%= include_gon %>  

と追記ます。

アプリケーションファイル

アプリケーションファイルに記述するやり方は数通りあるみたいで、私はHomeクラスを指定して、config.ruからアプリケーションファイルを呼び出しているので以下のコードの書き方をしています。

 require 'gon-sinatra'  

class Home < Sinatra::Base  

    register Gon::Sinatra  

end  

クラス指定をしていない方は

require 'gon-sinatra'  
Sinatra::register Gon::Sinatra  

と直接記述すれば大丈夫です。Sinatra::register Gon::Sinatra が違うので注意しましょう。

app.rb

 require 'gon-sinatra'  
class Home < Sinatra::Base  

    register Gon::Sinatra  

        get '/test' do  
                puts "テスト"  
                @your_int = "123"  
                gon.your_int = @your_int  
                erb :test  
        end  

end  

最低限のコードです。
jsファイルに渡したい文字を一度@ 付きの変数に渡します。

その変数をgon. 付きの変数に渡します。
これでアプリケーションの設定は終了です。

jsファイル

読み込みを設定しているjsファイルにアプリケーションファイルから変数が渡っているか確認してみましょう!
test.js

alert(gon.your_int)  

を追記して、アプリケーションファイルで設定したurlを開いてみましょう!

アラームが出た!最高!

まとめ

別にやってみたいことがあって、いろいろ調べてたら思わぬ便利gemを発見しました。
機能の少ないsinatraの開発がはかどりそうで狂喜です。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう