coffeescriptからjavascriptのコンパイルでreturnが一つ余計に表示されてしまう。

Question

私がフォローしている方々でcoffeescriptタグを持つ人にリクエストを送りました！

###前提・実現したいこと
処理速度、コードの複雑化を改善するためにjavascriptをcoffeescriptへ移行したい。
下記番号で言いますと、①=③になるように②のCoffeeScriptを修正したい。

javascriptでfacebookのような「続きを見る」機能を苦戦しながらもみなさんのご助力をいただき実装しました。この機能は複数ページに必要な機能でしたので、複数ファイルに同様のjsコードを記述しています。

しかし、
・同様のコードを書いているために無駄が多く見にくい。
・(これはご指摘を受けたのですが、)jsとrailsの接続をするという二度手間が生じる。

という問題がありますので、JavaScriptコードをCoffeeScriptコードに書き換えようと考えました。

###発生している問題・エラーメッセージ
問題はこのエラーです。

ExecJS::RuntimeError in Page#index
Showing /home/ubuntu/workspace/app/views/layouts/application.html.erb where line #6 raised:

SyntaxError: [stdin]:4:19: reserved word 'function'

このエラーは調べたところ、
coffee内のコードミスということでしたので、

http://coffeescript.org/

で、一字一句確認したのですが、1点だけどうしてもうまくいきません。
・元のjavascriptコードよりも});が一つ少ない。

###該当のソースコード

①【元のJavaScriptコード】
②【①のJavascriptコードを書き換えたCoffeeScriptコード】
③【http://coffeescript.org/で②のCoffeeScriptコードをコンパイルしたJavaScriptコード】

①【元のJavaScriptコード】

$(document).ready(function() {
    var showChar = 100;
    var ellipsestext = "...";
    var moretext = "more";
    var lesstext = "less";
    $('.more').each(function() {
        var content = $(this).html();

        if(content.length > showChar) {

            var c = content.substr(0, showChar);
            var h = content.substr(showChar, content.length - showChar);

            var html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

            $(this).html(html);
        }

    });

    $(".morelink").click(function(){
        if($(this).hasClass("less")) {
            $(this).removeClass("less");
            $(this).html(moretext);
        } else {
            $(this).addClass("less");
            $(this).html(lesstext);
        }
        $(this).parent().prev().toggle();
        $(this).prev().toggle();
        return false;
    });
}); ←③で足りない箇所

②【①のJavascriptコードを書き換えたCoffeeScriptコード】

$(document).ready ->
  showChar = 100
  ellipsestext = "..."
  moretext = "more"
  lesstext = "less"
  return

$('.more').each  -> 
        content = $(trim).$(this).html()

        if content.length > showChar

            c = content.substr 0, showChar
            h = content.substr showChar, content.length - showChar 

            html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'

            $(this).html html
            return

$(".morelink").click ->
        if $(this).hasClass "less"
            $(this).removeClass "less"
            $(this).html moretext
            return
        else 
            $(this).addClass "less"
            $(this).html lesstext
            return
        
        $(this).parent().prev().toggle()
        $(this).prev().toggle()
        false

③【http://coffeescript.org/で②のCoffeeScriptコードをコンパイルしたJavaScriptコード】

$(document).ready(function() {
  var ellipsestext, lesstext, moretext, showChar;
  showChar = 100;
  ellipsestext = "...";
  moretext = "more";
  lesstext = "less";
});

$('.more').each(function() {
  var c, content, h, html;
  content = $(trim).$(this).html();
  if (content.length > showChar) {
    c = content.substr(0, showChar);
    h = content.substr(showChar, content.length - showChar);
    html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
    $(this).html(html);
  }
});

$(".morelink").click(function() {
  if ($(this).hasClass("less")) {
    $(this).removeClass("less");
    $(this).html(moretext);
    return;
  } else {
    $(this).addClass("less");
    $(this).html(lesstext);
    return;
  }
  $(this).parent().prev().toggle();
  $(this).prev().toggle();
  return false;
}); ←下にもう一つ});が入るはず。

何卒、ご助言お願い致します。

###情報追加部分

④【現時点のCoffeeScriptコード】

$ ->
  showChar = 100
  ellipsestext = "..."
  moretext = "more"
  lesstext = "less"

  $('.more').each ->
    content = $(@).html()

    if content.length > showChar

      c = content.substr 0, showChar
      h = content.substr showChar, content.length - showChar

      html = """ #{c}
      <span class="moreellipses">
      #{ellipsestext}&nbsp;
      </span>
      <span class="morecontent">
        <span>#{h}</span>&nbsp;&nbsp;
        <a href="" class="morelink">#{moretext}</a>
      </span>"""

      $(@).html html

  $(".morelink").click ->
    if $(@).hasClass "less"
       $(@).removeClass "less"
       $(@).html moretext
    else 
       $(@).addClass "less"
       $(@).html lesstext

    $(@).parent().prev().toggle()
    $(@).prev().toggle()
    return false;

⑤【④をコンパイルしたJavaScriptコード】

$(function() {
  var ellipsestext, lesstext, moretext, showChar;
  showChar = 100;
  ellipsestext = "...";
  moretext = "more";
  lesstext = "less";
  $('.more').each(function() {
    var c, content, h, html;
    content = $(this).html();
    if (content.length > showChar) {
      c = content.substr(0, showChar);
      h = content.substr(showChar, content.length - showChar);
      html = " " + c + "\n<span class=\"moreellipses\">\n" + ellipsestext + "&nbsp;\n</span>\n<span class=\"morecontent\">\n  <span>" + h + "</span>&nbsp;&nbsp;\n  <a href=\"\" class=\"morelink\">" + moretext + "</a>\n</span>";
      return $(this).html(html);
    }
  });
  return $(".morelink").click(function() { ←どうしてもこのreturnを消したい。
    if ($(this).hasClass("less")) {
      $(this).removeClass("less");
      $(this).html(moretext);
    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();
    return false;
  });
});

⑥【実現したいJavaScriptコード】

$(document).ready(function() {
  var ellipsestext, lesstext, moretext, showChar;
  showChar = 100;
  ellipsestext = "...";
  moretext = "more";
  lesstext = "less"; ←⑤でreturnをjsコードで追加したことで、coffeeではreturnが消えました。
});

$('.more').each(function() {
  var c, content, h, html;
  content = $(trim).$(this).html();
  if (content.length > showChar) {
    c = content.substr(0, showChar);
    h = content.substr(showChar, content.length - showChar);
    html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
    $(this).html(html);
  }
});

$(".morelink").click(function() { 
  if ($(this).hasClass("less")) {
    $(this).removeClass("less");
    $(this).html(moretext);
  } else {
    $(this).addClass("less");
    $(this).html(lesstext);
  }
  $(this).parent().prev().toggle();
  $(this).prev().toggle();
  return false;
 });
});

Answer 1

参考情報

• CoffeeScriptワンポイント - 値を返さない関数にはreturnを付ける http://qiita.com/higuma/items/ff329775f3a91a6c6fb3

次の例を見てください。

$ cat a.coffee
foo = (x) ->
  console.log x

$ coffee -pb a.coffee
var foo;

foo = function(x) {
  return console.log(x);
};

$ cat b.coffee
foo = (x) ->
  console.log x
  return

$ coffee -pb b.coffee 
var foo;

foo = function(x) {
  console.log(x);
};

Comments

[s.k]

katoyさん

ありがとうございます！
記事みました。

すべてを理解できはしなかったのですが、
ざっくりいうと、値を返さない関数にはreturnをつける。
returnをつけると無駄なコードを省き最適化されるといった具合でしょうか…

Answer 2

なにやら色々混乱しているようですが…ひとつひとつ指摘していきます。

###CoffeeScriptはインデントがブロックになる。

f ->
  a()

  b()

と

f ->
  a()

b()

は違います。上ではb()はfの引数の無名関数の中に含まれていますが、下ではb()は無名関数の外側です。質問の①は上の構成である(全て関数の中にある)のに、②ではインデントされていないところがあるため、下の構成になっています。これでは同じになりません。JavaScriptをCoffeeScriptにする場合は、ブロックを構成する{}の対応通りに、インデントと逆インデントをしなければなりません。綺麗にインデントを整形しているJavaScriptであれば、そのJavaScriptとCoffeeScriptのインデントは同じになるはずです。しかし、**①と②では$('.more').each ...と$(".morelink").clickのインデントが同じではありません。**だからブロックが全体で包まれず、最後の方のブロックを閉じる分が少なく見えるのです。

###CoffeeScriptでは最後の式を返す。
JavaScriptではreturn文がない場合、最後にreturn;があると見なされ、returnで式が指定されていない場合はundefined値を返します。逆に言うと、最後のreturn;は省略可能と言うことです。(他の言語と違って、JavaScriptでは何も返さない関数を作ることはできません)

対して、CoffeeScriptでは、最後に評価された式の結果を返します。つまり、最後が【何かの式】という形であれば、return 【何かの式】のようになっていると見なします。なお、CoffeeScriptではifやwhile等も文ではなく式ですので、必ず何かしらの値を返しますので、同じくreturnが付くことになります(ただし、式として評価するためにやや複雑なコードに変換されます)。

もし、JavaScriptでreturnを省略したときの動作と同じにしたいというのであれば、CoffeeScriptでは逆にreturn(ただし、何も指定しない)を省略せずに書く必要があります。つまり、CoffeeScriptは最後の式の結果を返す場合はreturnを省略でき、JavaScriptではundefined値を返す場合のみreturnを省略できるという逆の動作になっていると言うことです。

なお、CoffeeScriptのundefined変数はvoid 0であり、その結果としてundefined値になるだけです。JavaScriptにおいてreturn;とreturn undefined;が同じではないのと同じく、CoffeeScriptではreturnとreturn undefindは同じではありませんが、結果だけを見ると、CoffeeScriptは両方ともundefind値を返すという同じ動作になります。

Comments

[s.k]

raccyさん

おお…
なるほど…

JavaScriptとCoffeeScriptの違いの一つにインデントの指定があるのはわかったのですが、
具体的にインデントがどのように機能しているのかは理解し切れていませんでした。

returnに関しても同じです。
すっきりとした気分になりました。

ありがとうございます(^^)

Answer 3

coffeeはsyntaxシュガーで
$(document).readyは

$ ->

とかけます。この時indentはスペース二つでブロックスコープの範囲を設定します。なので関数の中に含めたいコードは全て
関数のindentからスペース二つずらす必要があります。
よってreadyにすべて含めたければ$('.more')と$(".morelink")およびその中身のindentをずらす必要があります。

慣れないうちは

$ ->
  console.log('test')

などから始めちょっとずつコードを付けたしながらやるのがいいと思います。

以下は補足情報になります。

returnは書かなくても関数のなかで最終評価された値を勝手に返しますが,明示的に付けても構いません。
returnで返り値を指定しないとvoid型の関数になるだけです。
単独の@はthisのエイリアスなのでthisの部分は@で書いたほうが見通し良くなります。

また,sprocketsを使っているとすべてのページでcoffeescriptが発火してしまうので特定のviewのみで使いたい場合はviewのbody内のdomのどこかに任意のid(ここではpage-idとします)を振っておき,

$ ->
  if $('#page-id').length>0
    console.log('triggered in this page')

などとすることが多いです。
またcoffescriptは文字列展開とヒアドキュメント("""で囲む)(こちらはES6(''で囲む)でも使えるようになりましたが)が使えるので

 html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'

は

html = """ #{c}
<span class="moreellipses">
  #{ellipsestext}&nbsp;
</span>
<span class="morecontent">
  <span>#{h}</span>&nbsp;&nbsp;
  <a href="" class="morelink">#{moretext}</a>
</span>"""

と書くと見通しが良くなると思います(compileしてないのでerror履いたら調べて補間してもらえうと)。

Comments

[s.k]

tkowさん

返信ありがとうございます！
tkowさんに教えていただいたコードをCooffeeScript(質問文の④)に書きました。
かなりコードがスッキリして見やすいです。

ただ、試行錯誤してもどうしてもreturnが一つ多く表示されてしまいます。(質問文の⑤)
returnがある文の上か下のコードどちらに原因があるかご指摘いただけないでしょうか…

[s.k]

tkowさん

④のコードをそのまま、アプリファイルで実行したら正常に動きました！
コンパイルしたときにreturnが余計にあるのにこれは一体…

[退会済みユーザー]

coffeeScriptはそういう風にbuildされるものです。
javascriptのコードは汚くなったり冗長になりがちなのでcoffeeで管理してjsに自動でトランスパイルするような仕組みを作るものです。なので変換先のjavascriptが綺麗に生成されることを考慮していません。(元々プロダクトを作るときは結局uglifyするはずなのでコンパイル先の綺麗さは気にしなくていいという前提があります。)
return の評価は戻り値が評価されてから起きるので,実行時に戻り値を受け取る変数がなくても問題は起きません。なのでこのように作成されるようになっています。
どうしても治したい場合はreturn false;の下に$(".morelink").clickの同じindentでreturn を入れてください。

[退会済みユーザー]

開発でjavascriptしか使えない方を考慮している感じですかね。
そうするとcoffeeの導入は良くないかもしれません。
typescriptはほぼes6そのままのコードを書けるのでこちらの方がいいと思います。

[s.k]

returnの件、解決いたしました！
ありがとうございます。

いっぱいあるのですね…
typescript調べてみます^o^

助かりました。
引き続き開発を続けたいと思います！

Answer 4

$(document).ready は下記コードで完結している為、SyntaxError は発生しないように読めます。

$(document).ready(function() {
  var ellipsestext, lesstext, moretext, showChar;
  showChar = 100;
  ellipsestext = "...";
  moretext = "more";
  lesstext = "less";
});

CoffeeScript に詳しくありませんが、インデントに問題があるのではないでしょうか。

Re: s.k さん

Comments

[s.k]

think49さん

先程はありがとうございました！
今、確認してみます！

[think49]

本題とは関係ありませんが、$(".morelink").click(function() { 内の if, else でなぜ return しているのでしょうか。
元のJavaScriptコードにはない命令でそれがある為に $(this).parent().prev().toggle(); 以降のコードが絶対に通過しない文になってしまっています。

[s.k]

追記をしました。
最初にjsコードを修正した際に、returnがあちこちにありました。
調べたところ、returnがないところにはreturnのみを追加して明示的に示さなければならないと書いてあったので、いらぬところにreturnが書かれているという状況です…

returnが修正したコードに存在していても最終的にcoffeescriptに出力されているコードが元のjsコードと一致していれば問題はないのかなと考えました！
それと、そもそも、

$(document).ready(function() {
var ellipsestext, lesstext, moretext, showChar;
showChar = 100;
ellipsestext = "...";
moretext = "more";
lesstext = "less";
});

この文に});はついていないので、これもエラーだと思います。
見逃していました…

[think49]

すみませんが、コードが分散していて現状のまとめとなるコードが想像できません。
修正版を追記するなら部分的ではなく、全て追記して下さい。下記3つがあれば十分です。
- 元々のJavaScriptコード
- CoffeeScriptコード
- コンパイル後のJavaScriptコード

「①【元のjsコード】」が基本でCoffeeScriptでコンパイルしたら「①【元のjsコード】」が出力される動作を期待している、という理解でいいのでしょうか。
CoffeeScriptはインデントによって対応する括弧を決める言語のようです。
ということは、$('.more').each, $(".morelink").click のインデントを修正する必要がありますね。

[s.k]

think49さん、失礼しました！
気を付けます。

- 元々のJavaScriptコード　
→①です。
- CoffeeScriptコード
→②です。
- コンパイル後のJavaScriptコード
→③です。

④～⑥は①～③の具体的なエラー箇所と解決策のコードを書いたつもりです…
わかりづらいですね。

コード左上に言語も追加します。

‐‐「①【元のjsコード】」が基本でCoffeeScriptでコンパイルしたら「①【元のjsコード】」が出力される動作を期待している、という理解でいいのでしょうか。

はい！そうです。ですので、①＝③という形にしたいです。

‐‐CoffeeScriptはインデントによって対応する括弧を決める言語のようです。
ということは、$('.more').each, $(".morelink").click のインデントを修正する必要がありますね

→そうなんですか。今試してみます！

わかりづらいところがあれば全て言ってください！
お手数おかけします。

自分でも質問文を修正し直してみます

[s.k]

上記コメントの
- 元々のJavaScriptコード
- CoffeeScriptコード
- コンパイル後のJavaScriptコード
ですが、間違えて伝えてしまいましたので修正しました。

少々お待ちください。
質問文も修正します。

[s.k]

質問文の修正終了しました！

[think49]

return は余計な位置でつけなくて良いようです。やはり、インデントが問題っぽいですね。

[s.k]

ありがとうございます！
returnを消して、インデント確かめてみます！