teratail
回答率
85.30%
質問するログイン新規登録
トップに関する質問coffeescriptからjavascriptのコンパイルでreturnが一つ余計に表示されてしまう。

編集履歴

質問編集履歴

15

タイトル修正

2016/11/02 03:30

投稿

s.k
s.k

スコア423

title CHANGED
@@ -1,1 +1,1 @@
1
- javascript→coffeescriptで});が一つ消えてしまう。
1
+ coffeescriptからjavascriptのコンパイルでreturnが一つ余計に表示されてしまう。
body CHANGED
File without changes

14

情報追加

2016/11/02 03:30

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -155,80 +155,81 @@
155
155
 
156
156
  ###情報追加部分
157
157
 
158
- ④【当初http://coffeescript.org/でコンパイルされたコードの一部】
159
- ```Javascript
160
- $(document).ready(function() {
161
- var ellipsestext, lesstext, moretext, showChar;
162
- showChar = 100;
163
- ellipsestext = "...";
164
- moretext = "more";
165
- return lesstext = "less"; ←returnが入ってしまっている(①のコードとは違う)
166
- });
167
-
168
- $('.more').each(function() {
169
- var c, content, h, html;
170
- content = $(trim).$(this).html();
171
- if (content.length > showChar) {
172
- c = content.substr(0, showChar);
173
- h = content.substr(showChar, content.length - showChar);
174
- html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
175
- $(this).html(html);
176
- }
177
- });
178
-
179
- $(".morelink").click(function() {
180
- if ($(this).hasClass("less")) {
181
- $(this).removeClass("less");
182
- $(this).html(moretext);
183
- } else {
184
- $(this).addClass("less");
185
- $(this).html(lesstext);
186
- }
187
- $(this).parent().prev().toggle();
188
- $(this).prev().toggle();
189
- return false;
190
- });
191
- ```
192
-
193
- これに対応するため、
194
- lesstextの下にreturnを追加。
195
- (明示的にreturnを指定すれば、予期しないところでreturnが発生することを防げるから。←たぶん、僕の誤解だと思います…しかしとりあえず試しました。)
196
-
197
- ⑤【元のコードを修正したCoffeeScriptコード】
158
+ ④【現時点のCoffeeScriptコード】
198
159
  ```CoffeeScript
199
- $(document).ready ->
160
+ $ ->
200
161
  showChar = 100
201
162
  ellipsestext = "..."
202
163
  moretext = "more"
203
164
  lesstext = "less"
204
- return ←④のreturnを
205
- 消すためにreturnを追加
206
- $('.more').each ->
207
- content = $(trim).$(this).html()
208
165
 
166
+ $('.more').each ->
209
- if content.length > showChar
167
+ content = $(@).html()
210
168
 
211
- c = content.substr 0, showChar
212
- h = content.substr showChar, content.length - showChar
213
- html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'
169
+ if content.length > showChar
214
170
 
215
- $(this).html html
171
+ c = content.substr 0, showChar
216
- return
172
+ h = content.substr showChar, content.length - showChar
217
173
 
218
- $(".morelink").click ->
219
- if $(this).hasClass "less"
220
- $(this).removeClass "less"
174
+ html = """ #{c}
221
- $(this).html moretext
222
- else
223
- $(this).addClass "less"
175
+ <span class="moreellipses">
224
- $(this).html lesstext
176
+ #{ellipsestext}&nbsp;
177
+ </span>
178
+ <span class="morecontent">
179
+ <span>#{h}</span>&nbsp;&nbsp;
180
+ <a href="" class="morelink">#{moretext}</a>
181
+ </span>"""
225
182
 
183
+ $(@).html html
184
+
185
+ $(".morelink").click ->
186
+ if $(@).hasClass "less"
187
+ $(@).removeClass "less"
188
+ $(@).html moretext
189
+ else
190
+ $(@).addClass "less"
191
+ $(@).html lesstext
192
+
226
- $(this).parent().prev().toggle()
193
+ $(@).parent().prev().toggle()
227
- $(this).prev().toggle()
194
+ $(@).prev().toggle()
228
- false
195
+ return false;
229
196
  ```
230
197
 
231
- ⑥【⑤をコンパイルしたコード】
198
+
199
+ ⑤【④をコンパイルしたJavaScriptコード】
200
+ ```JavaScript
201
+ $(function() {
202
+ var ellipsestext, lesstext, moretext, showChar;
203
+ showChar = 100;
204
+ ellipsestext = "...";
205
+ moretext = "more";
206
+ lesstext = "less";
207
+ $('.more').each(function() {
208
+ var c, content, h, html;
209
+ content = $(this).html();
210
+ if (content.length > showChar) {
211
+ c = content.substr(0, showChar);
212
+ h = content.substr(showChar, content.length - showChar);
213
+ 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>";
214
+ return $(this).html(html);
215
+ }
216
+ });
217
+ return $(".morelink").click(function() { ←どうしてもこのreturnを消したい。
218
+ if ($(this).hasClass("less")) {
219
+ $(this).removeClass("less");
220
+ $(this).html(moretext);
221
+ } else {
222
+ $(this).addClass("less");
223
+ $(this).html(lesstext);
224
+ }
225
+ $(this).parent().prev().toggle();
226
+ $(this).prev().toggle();
227
+ return false;
228
+ });
229
+ });
230
+ ```
231
+
232
+ ⑥【実現したいJavaScriptコード】
232
233
  ```Javascript
233
234
  $(document).ready(function() {
234
235
  var ellipsestext, lesstext, moretext, showChar;
@@ -249,7 +250,7 @@
249
250
  }
250
251
  });
251
252
 
252
- $(".morelink").click(function() {
253
+ $(".morelink").click(function() {
253
254
  if ($(this).hasClass("less")) {
254
255
  $(this).removeClass("less");
255
256
  $(this).html(moretext);
@@ -260,5 +261,6 @@
260
261
  $(this).parent().prev().toggle();
261
262
  $(this).prev().toggle();
262
263
  return false;
264
+ });
263
265
  });
264
266
  ```

13

情報修正

2016/11/02 03:28

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -35,8 +35,8 @@
35
35
  ###該当のソースコード
36
36
 
37
37
  ①【元のJavaScriptコード】
38
- ②【私がJavascriptコードをCoffeeScriptコードに書き直すために文法を修正したコード】
38
+ ②【①のJavascriptコードを書き換えたCoffeeScriptコード】
39
- ③【http://coffeescript.org/で②をコンパイルしたJavaScriptコード】
39
+ ③【http://coffeescript.org/で②のCoffeeScriptコードをコンパイルしたJavaScriptコード】
40
40
 
41
41
  ①【元のJavaScriptコード】
42
42
  ```JavaScript
@@ -75,7 +75,7 @@
75
75
  }); ←③で足りない箇所
76
76
  ```
77
77
 
78
- ②【私がJavascriptコードをCoffeeScriptコードに書き直すために文法を修正したコード】
78
+ ②【①のJavascriptコードを書き換えたCoffeeScriptコード】
79
79
 
80
80
  ```CoffeeScript
81
81
  $(document).ready ->
@@ -113,7 +113,7 @@
113
113
  false
114
114
  ```
115
115
 
116
- ③【http://coffeescript.org/で②をコンパイルしたJavaScriptコード】
116
+ ③【http://coffeescript.org/で②のCoffeeScriptコードをコンパイルしたJavaScriptコード】
117
117
 
118
118
  ```Javascript
119
119
  $(document).ready(function() {

12

情報修正

2016/11/01 11:38

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -34,11 +34,11 @@
34
34
 
35
35
  ###該当のソースコード
36
36
 
37
- ①【元のjsコード】
37
+ ①【元のJavaScriptコード】
38
- ②【私がjsをcoffeeへ移すために文法を修正したコード】
38
+ ②【私がJavascriptコードをCoffeeScriptコードに書き直すために文法を修正したコード】
39
- ③【http://coffeescript.org/で確かめて出力されたコード】
39
+ ③【http://coffeescript.org/で②をコンパイルしたJavaScriptコード】
40
40
 
41
- ①【元のjsコード】
41
+ ①【元のJavaScriptコード】
42
42
  ```JavaScript
43
43
  $(document).ready(function() {
44
44
  var showChar = 100;
@@ -75,7 +75,7 @@
75
75
  }); ←③で足りない箇所
76
76
  ```
77
77
 
78
- ②【私がjsをcoffeeへ移すために文法を修正したコード】
78
+ ②【私がJavascriptコードをCoffeeScriptコードに書き直すために文法を修正したコード】
79
79
 
80
80
  ```CoffeeScript
81
81
  $(document).ready ->
@@ -113,7 +113,7 @@
113
113
  false
114
114
  ```
115
115
 
116
- ③【http://coffeescript.org/で②をコンパイルしたコード】
116
+ ③【http://coffeescript.org/で②をコンパイルしたJavaScriptコード】
117
117
 
118
118
  ```Javascript
119
119
  $(document).ready(function() {

11

情報修正

2016/11/01 11:36

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -10,7 +10,7 @@
10
10
  ・同様のコードを書いているために無駄が多く見にくい。
11
11
  ・(これはご指摘を受けたのですが、)jsとrailsの接続をするという二度手間が生じる。
12
12
 
13
- という問題がありますので、jsコードをcoffeeに移行しようと考えました。
13
+ という問題がありますので、JavaScriptコードをCoffeeScriptコードに書き換えようと考えました。
14
14
 
15
15
 
16
16
  ###発生している問題・エラーメッセージ

10

情報修正

2016/11/01 11:33

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -2,6 +2,7 @@
2
2
 
3
3
  ###前提・実現したいこと
4
4
  処理速度、コードの複雑化を改善するためにjavascriptをcoffeescriptへ移行したい。
5
+ 下記番号で言いますと、①=③になるように②のCoffeeScriptを修正したい。
5
6
 
6
7
  javascriptでfacebookのような「続きを見る」機能を苦戦しながらもみなさんのご助力をいただき実装しました。この機能は複数ページに必要な機能でしたので、複数ファイルに同様のjsコードを記述しています。
7
8
 

9

情報修正

2016/11/01 11:31

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -76,7 +76,7 @@
76
76
 
77
77
  ②【私がjsをcoffeeへ移すために文法を修正したコード】
78
78
 
79
- ```Javascript
79
+ ```CoffeeScript
80
80
  $(document).ready ->
81
81
  showChar = 100
82
82
  ellipsestext = "..."
@@ -112,9 +112,9 @@
112
112
  false
113
113
  ```
114
114
 
115
- ③【http://coffeescript.org/で確かめて出力されたコード】
115
+ ③【http://coffeescript.org/で②をコンパイルしたコード】
116
116
 
117
- ```CoffeeScript
117
+ ```Javascript
118
118
  $(document).ready(function() {
119
119
  var ellipsestext, lesstext, moretext, showChar;
120
120
  showChar = 100;
@@ -154,8 +154,8 @@
154
154
 
155
155
  ###情報追加部分
156
156
 
157
- ④【当初http://coffeescript.org/で出力されたコードの一部】
157
+ ④【当初http://coffeescript.org/でコンパイルされたコードの一部】
158
- ```coffeescript
158
+ ```Javascript
159
159
  $(document).ready(function() {
160
160
  var ellipsestext, lesstext, moretext, showChar;
161
161
  showChar = 100;
@@ -193,8 +193,8 @@
193
193
  lesstextの下にreturnを追加。
194
194
  (明示的にreturnを指定すれば、予期しないところでreturnが発生することを防げるから。←たぶん、僕の誤解だと思います…しかしとりあえず試しました。)
195
195
 
196
- ⑤【元のコードを修正したjsコード】
196
+ ⑤【元のコードを修正したCoffeeScriptコード】
197
- ```JavaScript
197
+ ```CoffeeScript
198
198
  $(document).ready ->
199
199
  showChar = 100
200
200
  ellipsestext = "..."
@@ -227,8 +227,8 @@
227
227
  false
228
228
  ```
229
229
 
230
- ⑥【⑤を受けて出力されたcoffee】
230
+ ⑥【⑤をコンパイルしたコード】
231
- ```CoffeeScript
231
+ ```Javascript
232
232
  $(document).ready(function() {
233
233
  var ellipsestext, lesstext, moretext, showChar;
234
234
  showChar = 100;

8

情報修正

2016/11/01 11:30

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -38,7 +38,7 @@
38
38
  ③【http://coffeescript.org/で確かめて出力されたコード】
39
39
 
40
40
  ①【元のjsコード】
41
- ```
41
+ ```JavaScript
42
42
  $(document).ready(function() {
43
43
  var showChar = 100;
44
44
  var ellipsestext = "...";
@@ -76,7 +76,7 @@
76
76
 
77
77
  ②【私がjsをcoffeeへ移すために文法を修正したコード】
78
78
 
79
- ```
79
+ ```Javascript
80
80
  $(document).ready ->
81
81
  showChar = 100
82
82
  ellipsestext = "..."
@@ -113,7 +113,8 @@
113
113
  ```
114
114
 
115
115
  ③【http://coffeescript.org/で確かめて出力されたコード】
116
+
116
- ```
117
+ ```CoffeeScript
117
118
  $(document).ready(function() {
118
119
  var ellipsestext, lesstext, moretext, showChar;
119
120
  showChar = 100;
@@ -193,7 +194,7 @@
193
194
  (明示的にreturnを指定すれば、予期しないところでreturnが発生することを防げるから。←たぶん、僕の誤解だと思います…しかしとりあえず試しました。)
194
195
 
195
196
  ⑤【元のコードを修正したjsコード】
196
- ```
197
+ ```JavaScript
197
198
  $(document).ready ->
198
199
  showChar = 100
199
200
  ellipsestext = "..."
@@ -227,7 +228,7 @@
227
228
  ```
228
229
 
229
230
  ⑥【⑤を受けて出力されたcoffee】
230
- ```
231
+ ```CoffeeScript
231
232
  $(document).ready(function() {
232
233
  var ellipsestext, lesstext, moretext, showChar;
233
234
  showChar = 100;

7

情報追加

2016/11/01 11:23

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -160,8 +160,32 @@
160
160
  showChar = 100;
161
161
  ellipsestext = "...";
162
162
  moretext = "more";
163
- return lesstext = "less";←returnがへんな位置に発生している
163
+ return lesstext = "less"; ←returnが入ってしまっている(①のコードとは違う)
164
164
  });
165
+
166
+ $('.more').each(function() {
167
+ var c, content, h, html;
168
+ content = $(trim).$(this).html();
169
+ if (content.length > showChar) {
170
+ c = content.substr(0, showChar);
171
+ h = content.substr(showChar, content.length - showChar);
172
+ html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
173
+ $(this).html(html);
174
+ }
175
+ });
176
+
177
+ $(".morelink").click(function() {
178
+ if ($(this).hasClass("less")) {
179
+ $(this).removeClass("less");
180
+ $(this).html(moretext);
181
+ } else {
182
+ $(this).addClass("less");
183
+ $(this).html(lesstext);
184
+ }
185
+ $(this).parent().prev().toggle();
186
+ $(this).prev().toggle();
187
+ return false;
188
+ });
165
189
  ```
166
190
 
167
191
  これに対応するため、
@@ -175,7 +199,31 @@
175
199
  ellipsestext = "..."
176
200
  moretext = "more"
177
201
  lesstext = "less"
178
- return ←追加
202
+ return ←④のreturnを
203
+ 消すためにreturnを追加
204
+ $('.more').each ->
205
+ content = $(trim).$(this).html()
206
+
207
+ if content.length > showChar
208
+
209
+ c = content.substr 0, showChar
210
+ h = content.substr showChar, content.length - showChar
211
+ html = c + '<span class="moreellipses">' + ellipsestext+ '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>'
212
+
213
+ $(this).html html
214
+ return
215
+
216
+ $(".morelink").click ->
217
+ if $(this).hasClass "less"
218
+ $(this).removeClass "less"
219
+ $(this).html moretext
220
+ else
221
+ $(this).addClass "less"
222
+ $(this).html lesstext
223
+
224
+ $(this).parent().prev().toggle()
225
+ $(this).prev().toggle()
226
+ false
179
227
  ```
180
228
 
181
229
  ⑥【⑤を受けて出力されたcoffee】
@@ -185,6 +233,30 @@
185
233
  showChar = 100;
186
234
  ellipsestext = "...";
187
235
  moretext = "more";
188
- lesstext = "less"; ←returnが消えた。
236
+ lesstext = "less"; ←⑤でreturnをjsコードで追加したことで、coffeeではreturnが消えました。
237
+ });
238
+
239
+ $('.more').each(function() {
240
+ var c, content, h, html;
241
+ content = $(trim).$(this).html();
189
- });←すいません。最初のコードにはありませんでした。見逃してました。
242
+ if (content.length > showChar) {
243
+ c = content.substr(0, showChar);
244
+ h = content.substr(showChar, content.length - showChar);
245
+ html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';
246
+ $(this).html(html);
247
+ }
248
+ });
249
+
250
+ $(".morelink").click(function() {
251
+ if ($(this).hasClass("less")) {
252
+ $(this).removeClass("less");
253
+ $(this).html(moretext);
254
+ } else {
255
+ $(this).addClass("less");
256
+ $(this).html(lesstext);
257
+ }
258
+ $(this).parent().prev().toggle();
259
+ $(this).prev().toggle();
260
+ return false;
261
+ });
190
262
  ```

6

情報追加

2016/11/01 11:10

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -149,4 +149,42 @@
149
149
  }); ←下にもう一つ});が入るはず。
150
150
  ```
151
151
 
152
- 何卒、ご助言お願い致します。
152
+ 何卒、ご助言お願い致します。
153
+
154
+ ###情報追加部分
155
+
156
+ ④【当初http://coffeescript.org/で出力されたコードの一部】
157
+ ```coffeescript
158
+ $(document).ready(function() {
159
+ var ellipsestext, lesstext, moretext, showChar;
160
+ showChar = 100;
161
+ ellipsestext = "...";
162
+ moretext = "more";
163
+ return lesstext = "less";←returnがへんな位置に発生している
164
+ });
165
+ ```
166
+
167
+ これに対応するため、
168
+ lesstextの下にreturnを追加。
169
+ (明示的にreturnを指定すれば、予期しないところでreturnが発生することを防げるから。←たぶん、僕の誤解だと思います…しかしとりあえず試しました。)
170
+
171
+ ⑤【元のコードを修正したjsコード】
172
+ ```
173
+ $(document).ready ->
174
+ showChar = 100
175
+ ellipsestext = "..."
176
+ moretext = "more"
177
+ lesstext = "less"
178
+ return ←追加
179
+ ```
180
+
181
+ ⑥【⑤を受けて出力されたcoffee】
182
+ ```
183
+ $(document).ready(function() {
184
+ var ellipsestext, lesstext, moretext, showChar;
185
+ showChar = 100;
186
+ ellipsestext = "...";
187
+ moretext = "more";
188
+ lesstext = "less"; ←returnが消えた。
189
+ });←すいません。最初のコードにはありませんでした。見逃してました。
190
+ ```

5

情報追加

2016/11/01 10:32

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -1,3 +1,5 @@
1
+ 私がフォローしている方々でcoffeescriptタグを持つ人にリクエストを送りました！
2
+
1
3
  ###前提・実現したいこと
2
4
  処理速度、コードの複雑化を改善するためにjavascriptをcoffeescriptへ移行したい。
3
5
 

4

情報追加

2016/11/01 10:10

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -145,4 +145,6 @@
145
145
  $(this).prev().toggle();
146
146
  return false;
147
147
  }); ←下にもう一つ});が入るはず。
148
- ```
148
+ ```
149
+
150
+ 何卒、ご助言お願い致します。

3

文法の修正

2016/11/01 10:08

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -32,7 +32,7 @@
32
32
  ###該当のソースコード
33
33
 
34
34
  ①【元のjsコード】
35
- ②【私がいじったjsコード】
35
+ ②【私がjsをcoffeeへ移すために文法を修正したコード】
36
36
  ③【http://coffeescript.org/で確かめて出力されたコード】
37
37
 
38
38
  ①【元のjsコード】
@@ -72,7 +72,7 @@
72
72
  }); ←③で足りない箇所
73
73
  ```
74
74
 
75
- ②【私がいじったjsコード】
75
+ ②【私がjsをcoffeeへ移すために文法を修正したコード】
76
76
 
77
77
  ```
78
78
  $(document).ready ->

2

情報削除

2016/11/01 10:07

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -26,7 +26,7 @@
26
26
  [http://coffeescript.org/](http://urx.red/zo19)
27
27
 
28
28
  で、一字一句確認したのですが、1点だけどうしてもうまくいきません。
29
- ・returnが元のjavascriptコードよりも});が一つ少ない。
29
+ ・元のjavascriptコードよりも});が一つ少ない。
30
30
 
31
31
 
32
32
  ###該当のソースコード

1

文法修正

2016/11/01 10:06

投稿

s.k
s.k

スコア423

title CHANGED
File without changes
body CHANGED
@@ -5,7 +5,8 @@
5
5
 
6
6
  しかし、
7
7
  ・同様のコードを書いているために無駄が多く見にくい。
8
- ・(これはご指摘を受けたのですが、)coffeescriptに同機能のコードを書けば、jsとrailsの接続をするという二度手間を防ぐことができる。
8
+ ・(これはご指摘を受けたのですが、)jsとrailsの接続をするという二度手間が生じる。
9
+
9
10
  という問題がありますので、jsコードをcoffeeに移行しようと考えました。
10
11
 
11
12