sinatra公式サイトでは利用可能なテンプレートの中にes6やjsxなどは存在しませんが、どうやら公式サイトの説明を読むとsinatraでは内部でtiltを利用してテンプレートのレンダリングを行っているように見受けられました。
tiltの公式ページを見てみるとどうやら次の拡張子(.es6, .babel, .jsx)に対しbabelを利用してのレンダリングが可能のように思われます。
sinatraではerb
などのメソッドを利用することでとても気軽にテンプレートのレンダリングを行えますが、同じようにbabel
やjsx
やes6
などのメソッドを利用することでトランスパイル後のソースをレンダリング出来たら良いのになと考えております。
オリジナルテンプレートエンジンの追加の項目が存在するので、できないことはないと思っているのですが、参照先の説明を読んでも、説明が不足すぎてよくわかりませんでした。
sinatraでes6(es2015)やjsxのトランスパイル後のソースをレンダリングするにはどうすれば良いのでしょうか。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![guest](/img/icon/icnUserSample.jpg)
回答2件
0
ベストアンサー
goufさんのを参考に私も作ってみました。<script>中に組み込むのではなく、外部呼び出しの形にしています。
###ソースコードなど
Gemflie
Ruby
1# frozen_string_literal: true 2source 'https://rubygems.org' 3gem 'sinatra' 4gem 'slim' 5gem 'babel-transpiler'
app.rb
Ruby
1# frozen_string_literal: true 2require 'sinatra' 3require 'slim' 4require 'babel-transpiler' 5 6Tilt.register :babel, Tilt[:babel] 7 8helpers do 9 def babel(*args, **options) 10 render(:babel, *args, {content_type: :js}.merge(options)) 11 end 12end 13 14get '/' do 15 slim :main 16end 17 18get '/main.js' do 19 babel :main 20end
views/main.slim
Slim
1doctype html 2html 3 head 4 meta charset="UTF-8" 5 title Babel in Sinatra 6 script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js" 7 script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js" 8 body 9 h1 しなとらでばべる 10 #content 11 script src="/main.js"
views/main.es6
JavaScript
1class MainContent extends React.Component { 2 render() { 3 return <div>こんにちは世界</div>; 4 } 5} 6ReactDOM.render(<MainContent/>, document.getElementById("content"));
実行
Bash
1brew install node # 既にnode.jsを入れていれば不要 2bundle install 3ruby app.rb
###注意事項
- 依存関係でexecjsを使いますので、node.jsやtherubyracerなどを適当に入れておいてください。
- Babelテンプレートをそのまま登録しただけではContent-Typeが"text/html"になってしまいます。ですので、登録するメソッドでは、
{content_type: :js}
がデフォルトになるようにオプションを追加しています。これにより"application/javascript"がデフォルトになります。 - 上の書き方で、
.es6
、.babel
、.jsx
の三つの拡張子全てに対応しています。ES6のclassもJSXの<>も問題なく動きました。 - ソースコードは"UTF-8"です。日本語も問題ありませんでした。ただ、Windowsの場合は
chcp 65001
(コマンドプロンプトの文字コードをUTF-8にする)としてからしないと文字コード変換のエラーになるかも知れません。 - Slimなのは私の趣味です。Babel対応にするにあたって、特に意味はありません。
- Mac OS X 10.11.5、Ruby 2.3.1、sinatra 1.4.7、babel-transpiler 0.7.0で確認しています。
投稿2016/06/25 06:03
総合スコア21735
0
興味を惹かれたので、すこし書いてみました
準備
mkdir sinatra-babel cd sinatra-babel mkdir views bundle init
Gemfile
:
source 'https://rubygems.org' gem 'sinatra'
コード
views/index.es6
:
js
1class MyClass { 2 constructor() { 3 console.log('Hello'); 4 } 5 6 sayHello() { 7 alert('Hello!'); 8 } 9} 10 11window.addEventListener('load', () => { 12 let m = new MyClass(); 13 let btn = document.getElementById('btn'); 14 btn.addEventListener('click', () => { m.sayHello(); }); 15});
views/index.erb
:
erb
1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title></title> 6</head> 7<body> 8 <h1>Hello</h1> 9 <button id="btn">push me</button> 10 <%= @js %> 11</body> 12</html>
main.rb
:
ruby
1require 'sinatra' 2 3Tilt.register :es6, Tilt[:babel] 4 5helpers do 6 def es6(*args) 7 "<script>#{render(:es6, *args)}</script>" 8 end 9end 10 11get '/' do 12 @js = es6(:index) 13 erb :index 14end
なにか参考になれば幸いです
Links
- オリジナルテンプレートエンジンの追加 - Sinatra: README (Japanese)
- babel/ruby-babel-transpiler - GitHub: Ruby Babel is a bridge to the JS Babel transpiler.
- rtomayko/tilt - GitHub: Generic interface to multiple Ruby template engines
- アロー関数 - JavaScript | MDN
- EventTarget.addEventListener - Web API インターフェイス | MDN
- class - JavaScript | MDN
- Learn ES2015 · Babel
投稿2016/06/23 07:34
総合スコア2321
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
![guest](/img/icon/icnUserSample.jpg)
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/06/25 15:51
2016/06/25 15:56 編集
2016/06/25 19:53
2016/06/26 01:28