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

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

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

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

4648閲覧

jsのコードをCoffeeScriptにしたい

miiichat

総合スコア72

CoffeeScript

CoffeeScriptはプログラミング言語です。シンタックスシュガーの導入により、JavaScriptのコードに変換された後動作します。JavaScriptに比べ、可読性と簡潔性が向上しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/02/03 05:56

編集2017/02/04 00:42

###わからないこと
以前書いたjsのコードをrailsに移すとき、せっかくならcoffeeに書き直してみようと考え、頑張ってみましたがうまくいきません。
coffeescriptのことはよくわからず、どこがまちがっているのかわかりません。

どなたか教えてくれると助かります。

###エラー
SyntaxError: [stdin]:7:1: unexpected indentation このようなエラーが出ていました

(追記)今はこんなエラーが出ています。
SyntaxError: [stdin]:8:18: unexpected ,

エラー直りました!
###ソースコード

window.onload = -> draw() draw = -> canvas = document.getElementById('canvas') if !canvas || !canvas.getContext then return false ctx = canvas.getContext('2d') start=0 end=0 balls=[] schottBalls=[] direction=['top','right','left','bottom'] rand = (min,max)-> return min+Math.floor(Math.random()*(max-min+1)) Ball = (name, direction) -> this.x = rand(100, 300) this.y = rand(100, 200) this.r = 10 this.name = name this.direction = direction if name == '' then this.name = 'enemy' Ball.prototype.draw = -> if this.direction == 'top' start = 290 end = 250 else if this.direction == 'left' start = 200 end = 160 else if this.direction == 'bottom' start = 110 end = 70 else if this.direction == 'right' start = 20 end = 340 ctx.beginPath() ctx.arc(this.x, this.y, this.r, start / 180 * Math.PI, end / 180 * Math.PI) ctx.stroke() checkPosition =(x, y, r, ball) -> if x - r < 0 ball.x = r else if x + r > canvas.width ball.x = canvas.width - r else if y - r < 0 ball.y = r else if y + r > canvas.height ball.y = canvas.height - r stop = (a, b, c) -> switch a when 1 return msg = if (b - c) < 0 then 5 else -5 when 2 return msg = if (b + c) > canvas.width then -5 else 5 when 3 return msg = if (b - c) < 0 then 5 else -5 when 4 return msg = if (b + c) > canvas.height then -5 else 5 mobMove = -> for i in [1..balls.length-1] enemyBall = balls[i] if enemyBall.name == 'enemy' a = rand(1, 4) switch a when 1 enemyBall.direction = 'left' enemyBall.x += stop(1, enemyBall.x, enemyBall.r) break when 2 enemyBall.direction = 'right' enemyBall.x += stop(2, enemyBall.x, enemyBall.r) break when 3 enemyBall.direction = 'top' enemyBall.y += stop(3, enemyBall.y, enemyBall.r) break when 4 enemyBall.direction = 'bottom' enemyBall.y += stop(4, enemyBall.y, enemyBall.r) break checkPosition(enemyBall.x, enemyBall.y, enemyBall.r, enemyBall) window.onkeydown = -> k = event.keyCode userBall = balls[0] if k == 37 userBall.x -= 5 userBall.direction = 'left' else if k == 38 userBall.y -= 5 userBall.direction = 'top' else if k == 39 userBall.x += 5 userBall.direction = 'right' else if k == 40 userBall.y += 5 userBall.direction = 'bottom' checkPosition(userBall.x, userBall.y, userBall.r, userBall) draw = -> requestAnimationFrame(draw) ctx.clearRect(0, 0, canvas.width, canvas.height) frame++ if !(frame % 10) mobMove() for i in [0..balls.length-1] balls[i].draw() while i = schottBalls.length schottBalls[i].draw() i-- SchottBall =(x, y, w)-> this.x = x this.y = y this.w = w SchottBall.prototype.draw = -> ctx.beginPath() ctx.arc(this.x, this.y, 5, 0, 2 * Math.PI) ctx.stroke() switch this.w when 'top' this.y -= 3 when 'right' this.x += 3 when 'left' this.x -= 3 when 'bottom' this.y += 3 if this.x >= canvas.width + 5 || this.x <= -5 || this.y >= canvas.height + 5 || this.y <= -5 schottBalls.splice(schottBalls.indexOf(this), 1) frame = 0 init = -> balls.push(new Ball('user', direction[rand(0, 4)])) for i in [0..2] balls.push(new Ball('', direction[rand(0, 4)])) draw() init() window.onkeyup = (e)-> if e.keyCode == 32 for i in [0..balls.length-1] ball = balls[i] if ball.name == 'user' if ball.direction == 'top' schottBalls.push(new SchottBall(ball.x, ball.y - ball.r, 'top')) else if ball.direction == 'left' schottBalls.push(new SchottBall(ball.x - ball.r, ball.y, 'left')) else if ball.direction == 'bottom' schottBalls.push(new SchottBall(ball.x, ball.y + ball.r, 'bottom')) else if ball.direction == 'right' schottBalls.push(new SchottBall(ball.x + ball.r, ball.y, 'right'))

###その他
本文が決められている文字数を超えるのでもとのjsのコードは載せれませんでした。以前の質問に載せてあります

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

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

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

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

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

guest

回答3

0

js2coffee というコマンドで、 javascript コードを coffee script に変換できます。

$ gem install js2coffee
( $ npm install -g js2coffee でもよいかもしれない)

で js2coffee コマンドをインストールできます。

投稿2017/02/04 00:44

katoy

総合スコア22324

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

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

miiichat

2017/02/04 01:05

回答ありがとうございます。 そんな便利なものがあるんですね。 今回は自分でcoffeescriptに変えてみたいと思います!
guest

0

ベストアンサー

JavaScriptがCoffeeScriptでどう表現されるのかは下記サイトを利用してみてください。
js2coffee 2.0 — convert JavaScript to CoffeeScript
想定しているJavaScriptが本当にその書き方でいいのかを確認できると思います。

まず、CoffeeScriptでの変数宣言ですが、CoffeeScriptでは変数への最初の代入が宣言と初期化を兼ねます。これはPythonやRubyでの変数宣言と同じ考えで、そもそも変数は初期化しないと意味がないのが普通なのだから、初期化を宣言と兼ねようという考えてです。もし、undefined値といて初期化したい場合は、a = undefinedと明記する必要があります。

次に、if-else文の所ですが、elseのあとにifが抜けているようです。ここはJavaScriptと同じようにelse if 条件と書く必要があります。

CoffeeScriptはPythonと同じように行儀がいい書き方を強制します。ある程度インデントが不揃いでも動くことは動きますが、文法エラーや予期せぬ解釈が発生します。インデントの幅は揃えてください。それだけで、Pythonのように美しく、わかりやすいコードになるはずです。

投稿2017/02/03 11:51

raccy

総合スコア21733

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

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

miiichat

2017/02/04 00:47

回答ありがとうございます。 エラー直りました! しかしなんだかチカチカしてるし、色が薄いです。 line:114のところでエラーが出てしまします。 (forで書いていましたがエラーが出たのでwhileに変えてみましたが・・)
miiichat

2017/02/04 01:03

丸が描かれてなぜかそのあとすぐ消されているみたいです。
raccy

2017/02/04 01:21

そこはまた別の問題かなと思います。 一度整理して、それでもわからなければ、また別の問題として質問を別途上げていただければと思います。
miiichat

2017/02/04 01:46

そうですね もうちょっと考えて出来なければ質問してみたいと思います。
guest

0

unexpected indentation
インデントに不都合があるのではないでしょうか。
coffeeはインデントで構造を制御しています。

line:6 ifの位置が微妙にズレているようにみえるのはteratailのコードコーティングのせいでしょうか?

追記
メインの言語ではないのでそこまで詳しくはないのですが、coffeeって変数宣言単体でできなかったはず(start,end)するなら空文字いれるとかしないと。(start="")
試せてないので少し不安ですがjsとは変数定義の方法が結構違ったはずですので,ではなく;でちゃんと区切ってみたらどうでしょうか

html

1canvas = document.getElementById('canvas'); 2if !canvas || !canvas.getContext then return false; 3ctx = canvas.getContext('2d'); 4balls=[];schottBalls=[]; 5start='';end=''; 6direction=['top','right','left','bottom'];

投稿2017/02/03 06:11

編集2017/02/03 07:50
Neko_doshi

総合スコア214

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

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

miiichat

2017/02/03 06:30

回答ありがとうございます。 インデントが重要なんですね! 少し修正してみましたが直りませんでした、、
miiichat

2017/02/03 06:30

コードを修正したものに変えてみます。
miiichat

2017/02/03 06:33

エラーが変わりました
Neko_doshi

2017/02/03 07:59

少し調べましたがやっぱりjsのように,区切りでは定義できないのと、nullで変数宣言できないっぽいですね。 慣れていない言語で大変だとは思いますがもう少しリファレンスを深く読んでみるとこもお勧めいたします。 http://memo.sappari.org/coffeescript/coffeescript-langref
miiichat

2017/02/03 08:43

いろいろ調べてくださりありがとうございます。 今度はstylesheetがおかしいと言われました、、
miiichat

2017/02/04 00:47

エラーは出なくなりました! でもなぜかチカチカします
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問