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

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

ただいまの
回答率

90.51%

  • ECMAScript

    142questions

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

  • Sinatra

    88questions

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

  • Babel

    74questions

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

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,132

hojo

score 181

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

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

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

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

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

goufさんのを参考に私も作ってみました。<script>中に組み込むのではなく、外部呼び出しの形にしています。

ソースコードなど

Gemflie

# frozen_string_literal: true
source 'https://rubygems.org'
gem 'sinatra'
gem 'slim'
gem 'babel-transpiler'

app.rb

# frozen_string_literal: true
require 'sinatra'
require 'slim'
require 'babel-transpiler'

Tilt.register :babel, Tilt[:babel]

helpers do
  def babel(*args, **options)
    render(:babel, *args, {content_type: :js}.merge(options))
  end
end

get '/' do
  slim :main
end

get '/main.js' do
  babel :main
end

views/main.slim

doctype html
html
  head
    meta charset="UTF-8"
    title Babel in Sinatra
    script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"
    script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"
  body
    h1 しなとらでばべる
    #content
    script src="/main.js"

views/main.es6

class MainContent extends React.Component {
  render() {
    return <div>こんにちは世界</div>;
  }
}
ReactDOM.render(<MainContent/>, document.getElementById("content"));

実行

brew install node # 既にnode.jsを入れていれば不要
bundle install
ruby 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/26 00:51

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

    キャンセル

  • 2016/06/26 00:56 編集

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

    キャンセル

  • 2016/06/26 04:53

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

    キャンセル

  • 2016/06/26 10:28

    ですよね。流石にbabelifyでbundle.jsをリクエストの度に出力するとか実用的じゃないですもんね。

    ありがとうございました!

    キャンセル

+1

興味を惹かれたので、すこし書いてみました

 準備

mkdir sinatra-babel
cd sinatra-babel
mkdir views
bundle init

Gemfile :

source 'https://rubygems.org'

gem 'sinatra'

 コード

views/index.es6 :

class MyClass {
  constructor() {
    console.log('Hello');
  }

  sayHello() {
    alert('Hello!');
  }
}

window.addEventListener('load', () => {
  let m = new MyClass();
  let btn = document.getElementById('btn');
  btn.addEventListener('click', () => { m.sayHello(); });
});

views/index.erb :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <h1>Hello</h1>
  <button id="btn">push me</button>
  <%= @js %>
</body>
</html>

main.rb :

require 'sinatra'

Tilt.register :es6, Tilt[:babel]

helpers do
  def es6(*args)
    "<script>#{render(:es6, *args)}</script>"
  end
end

get '/' do
  @js = es6(:index)
  erb :index
end

なにか参考になれば幸いです

 Links

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/06/25 12:50 編集

    ```
    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に設定されていることが確認できます。

    何が問題なのか指摘箇所などありましたら是非アドバイスいただければと思っています。

    キャンセル

  • 2016/06/25 13:08 編集

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

    キャンセル

  • 2016/06/25 16:02

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

    キャンセル

  • 2016/06/26 00:45

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

    キャンセル

  • 2016/06/26 10:30

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

    キャンセル

同じタグがついた質問を見る

  • ECMAScript

    142questions

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

  • Sinatra

    88questions

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

  • Babel

    74questions

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