質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Sinatra

Sinatraは、Rubyで作られた オープンソースのWebアプリケーションフレームワークです。

Q&A

解決済

2回答

2715閲覧

sinatraでes6(es2015)やjsxのトランスパイル後のソースをレンダリングしたい

hojo

総合スコア195

ECMAScript

ECMAScriptとは、JavaScript類の標準を定めるために作られたスクリプト言語です。

Babel

Babelは、JavaScriptの次世代仕様であるECMAScriptのコンパイラ。次世代の標準機能を用いて記述されたコードを、それらの機能に対応していないブラウザでも動作するコードに変換することができます。

Sinatra

Sinatraは、Rubyで作られた オープンソースのWebアプリケーションフレームワークです。

1グッド

1クリップ

投稿2016/06/21 13:24

sinatra公式サイトでは利用可能なテンプレートの中にes6やjsxなどは存在しませんが、どうやら公式サイトの説明を読むとsinatraでは内部でtiltを利用してテンプレートのレンダリングを行っているように見受けられました。

tiltの公式ページを見てみるとどうやら次の拡張子(.es6, .babel, .jsx)に対しbabelを利用してのレンダリングが可能のように思われます。

sinatraではerbなどのメソッドを利用することでとても気軽にテンプレートのレンダリングを行えますが、同じようにbabeljsxes6などのメソッドを利用することでトランスパイル後のソースをレンダリング出来たら良いのになと考えております。

オリジナルテンプレートエンジンの追加の項目が存在するので、できないことはないと思っているのですが、参照先の説明を読んでも、説明が不足すぎてよくわかりませんでした。

sinatraでes6(es2015)やjsxのトランスパイル後のソースをレンダリングするにはどうすれば良いのでしょうか。

raccy👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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

raccy

総合スコア21733

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hojo

2016/06/25 15:51

とても参考になりました。ありがとうございましたm(_ _)m
hojo

2016/06/25 15:56 編集

さすがにes6でimportを使えるようにするのは無理ですよね?
raccy

2016/06/25 19:53

現在のbabelの実装は、import文は単純にrequireに置き換えるだけですので、requireを解釈できる環境(node上やwebpackで処理など)でないと意味が無いですね。
hojo

2016/06/26 01:28

ですよね。流石にbabelifyでbundle.jsをリクエストの度に出力するとか実用的じゃないですもんね。 ありがとうございました!
guest

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

投稿2016/06/23 07:34

gouf

総合スコア2321

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hojo

2016/06/25 06:18 編集

``` get '/script/main' do es6 :'script/main' end ``` 上記のhelperで実装したes6メソッドを実装したルーティングにアクセスすると次のようなエラーメッセージが返ってきます。 ``` "\xEF" on US-ASCII ``` どうやらviews/script/main.es6のファイルをリネームするとエラー内容が以下に変わりますので、tiltがes6ファイルをトランスパイルしようとしているような様子は確認できました。 ``` No such file or directory @ rb_sysopen - /var/www/vhosts/sinatra-babel/views/script/main.babel ``` main.es6ファイルの文字コードに問題があるような気がしているのですが、emacs上の表記では-UUUとなっていますので、UTF-8に設定されていることが確認できます。 何が問題なのか指摘箇所などありましたら是非アドバイスいただければと思っています。
hojo

2016/06/25 06:16 編集

また、babel-transpilerの導入をしなければこちらでは動かなかったのですが、導入は必要という認識でよろしいでしょうか?
gouf

2016/06/25 07:02

もうしわけありません、試行錯誤した時間があり、必須項目や前提に抜けがあるかもしれません。
hojo

2016/06/25 15:45

config.ruにEncoding.default_external = 'UTF-8'を追加したらエラーが出なくなりました。
hojo

2016/06/26 01:30

また、コードに日本語が含まれると同じエラーが発生するようです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問