4
#
# メインコンテンツのユーザタブのユーザ一覧の処理。
#

# 最後の要素の削除ボタンをクリックで要素を削除します。
$('.maincontent .tab.user .user-list .elem:last > .del').on 'click', ->
  @parent().remove()

# 編集ボタンをクリックで選択以外の要素を薄くしてテキストエリアを表示します。
$('.maincontent .tab.user .user-list .elem > .edit').on 'click', ->
  $('.maincontent .tab.user .user-list .elem').css(opacity: 0.5)
  @parent().css(opacity: 1.0).find('textarea').show()

上記のコードは、特に複雑なことをしている訳ではありませんがセレクタの文字列が長いために、どうしても可視性の悪いコードになってしまっていると思われます。

そこで、下記のように変数tを用意し、ユーザ一覧の要素を先に抽出しておくことで、上記のコードよりスッキリと書くことができ、ある程度処理も高速化できると思います。

#
# メインコンテンツのユーザタブのユーザ一覧の処理。
#

t = $('.maincontent .tab.user .user-list') # 変数tを用意

# 最後の要素の削除ボタンをクリックで要素を削除します。
$('.elem:last > .del',t).on 'click', ->
  @parent().remove()

# 編集ボタンをクリックで選択以外の要素を薄くしてテキストエリアを表示します。
$('.elem > .edit',t).on 'click', ->
  $('.elem',t).css(opacity: 0.5)
  @parent().css(opacity: 1.0).find('textarea').show()

しかし、上記のコードの同じスコープ上で変数tを再定義してしまうと、当然ですが同じ変数が利用されて、イベントが発生したときにtの対象が異なるために予期せぬ動きをしてしまいます。

そのための解決策として単純に変数名をt2t3...のように変えていけば良いのですが、なんとなく好ましくありません。

ここに上記のコード...

#
# メインコンテンツのお気に入りタブのお気に入り一覧の処理。
#

t = $('.maincontent .tab.favorite .favorite-list') # これだと衝突するのでt2にして回避
$('.elem',t).each ->
  ...

変数をtmaincontent_usertab_userlistのような名前に変更するという手法も考えられます。検索済みの要素を使いまわすため、こちらのほうが処理も高速になるはずです。しかし、これだと結局変数名が長ったらしくなってしまい、コードの可視性はあまり良いとは言えません。個人的に長い名前はよりスコープの範囲の広い変数のみに付けたいものです。一度だけ使う変数に長い名前をつけるのは好ましくありません(あと個人的に変数名を考えるのが面倒です)

そこでeachを利用します。すると変数tはthisでアクセスできるため定義しなくてよくなり、スコープも分かれるため、変数が衝突することもなくなって良い感じになります。(無駄に行を食う3行のコメントもコードが入れ子になるために必要性がなくなり、どこまでがメインコンテンツのユーザタブのユーザ一覧処理なのかもハッキリするため個人的に好きです)

# メインコンテンツのユーザタブのユーザ一覧の処理。
$('.maincontent .tab.user .user-list').each ->

  # 最後の要素の削除ボタンをクリックで要素を削除します。
  $('.elem:last > .del',@).on 'click', ->
    @parent().remove()

  # 編集ボタンをクリックで選択以外の要素を薄くしてテキストエリアを表示します。
  $('.elem > .edit',@).on 'click', (e)=>
    $('.elem',@).css(opacity: 0.5)
    $(e.currentTarget).parent().css(opacity: 1.0).find('textarea').show()

しかし、eachが利用できるのは、あくまで配列オブジェクトであり(jQueryオブジェクトですが)要素の数がたまたま一つだけだったために、このような処理ができているだけです。

というわけで、スコープを分けthisに好きな値を設定する方法として以下が考えられます。

(->
  # ここのthisはtarget
).call(target)

thisはCoffeeScriptでは@で表記できるため、この書き方はjsで非推奨になったwith文に近い書き方ができているような気がします。が、これではせっかくCoffeeScriptがインデントによる入れ子の表現ができるのにJavascriptのようなカッコで閉じる書き方になってしまっています。末尾の).call(target)も気持ち悪く、できれば先頭に持って行きたいものです。

ということで、これを関数にして定義してしまえば理想的な書き方ができるので定義しよう!と思い立ちました。

window.scope = (thisArg, func)->
  func.call(thisArg)

scope target, ->
  @text = 'ABCDE'

しかし、こういった独自実装の汎用的な関数はあまり利用したくありません。自分が知らないだけでこういったものは既にあるのでは…?と思いました。そこでlodash.jsのドキュメントを漁ったり、標準で用意されてないかざっくりと検索してみましたが、とくにそれっぽいものは見つからず、どのように検索すればいいかもよくわからないので質問させていただきました。

変数tの衝突を避けるためにスコープを定義し、かつthisを利用するベストな方法にはどんなものがあるでしょうか。

2 件の回答 2

2

CoffeeScriptでは新しいスコープを作りたい時はdoキーワードを使うことが一般的だと思います。これはJavaScriptの即時関数とよく似た方法で、コンパイルしたらまさに即時関数になります。

これを規定値と組み合わせたら、なおさら使いやすいです。

t = "hello!"

do (t = $('.maincontent .tab.user .user-list')) ->
    t.find('.elem:last > .del').on 'click', ->
        @parent().remove()

    t.find('.elem > .edit').on 'click', ->
        t.find('.elem').css(opacity: 0.5)
        @parent().css(opacity: 1.0).find('textarea').show()

console.log t

こうすれば、何があってもaddEvents内のtは他のtと衝突しません。

tutinocoさんはthisを使う方法を探していると仰っていますが、thisを使った場合、一度に一つの値のスコープしか限定できません。上記の方法ではいくつもの変数を同時に限定できるので、より良い解決策だと思います。

ご参考まで(英語)

https://github.com/raganwald-deprecated/homoiconic/blob/master/2012/09/lexical-scope-in-coffeescript.md

https://github.com/raganwald-deprecated/homoiconic/blob/master/2012/09/actually-YOU-dont-understand-lexical-scope.md

1
  • なるほど。doキーワードとデフォルト引数の組み合わせで衝突を回避しているわけですね。thisを使うより危険性も無さそうなので、これはかなり理想的です。
    – tutinoco
    Commented 2015年3月7日 18:25
1

あまり薦められた方法ではありませんが、無理矢理 JavaScript の with ステートメント を使うという方法があります。CoffeeScript から with を用いるには、以下のように JavaScript の埋め込み を使うことになるでしょう。

`with ({t: $('.maincontent .tab.user .user-list')}) {`

$('.elem:last > .del', t).on 'click', ->
  @parent().remove()

$('.elem > .edit', t).on 'click', ->
  $('.elem', t).css(opacity: 0.5)
  @parent().css(opacity: 1.0).find('textarea').show()

`}`

こうすると、スコープチェーンに t を含むオブジェクトがぶら下がるので、with 内という非常に短いスコープからのみ t を利用できます。

この方法は JavaScript (ECMAScript5) の strict モードを使っていると動作しません。最初に書いた非推奨である理由の1つです。

なお個人的には、程々に短い一意の名前の変数を利用することをおすすめしておきます。私ならば、以下のように userlist という名前を使います。

userlist = $('.maincontent .tab.user .user-list')

$('.elem:last > .del', userlist).on 'click', ->
  @parent().remove()

$('.elem > .edit', userlist).on 'click', ->
  $('.elem', userlist).css(opacity: 0.5)
  @parent().css(opacity: 1.0).find('textarea').show()
2
  • "ほどほどに短い一意の名前"たしかにかなりベータな回答と思われました。scope target, ->とか見慣れないwith文のようなものがコード内で過剰利用されていたら気持ち悪いですからね(^_^;) do文を利用すればスコープの定義はできるようですがthisまでは指定できなそうです。
    – tutinoco
    Commented 2015年3月7日 17:57
  • @tutinoco ふと気がついたんですが、即時関数で実現する方法もありましたね。サンプル gist.github.com/koron/b7d1713eaa923bd133bd を貼っときます。CoffeeScriptではあまり書かない、JS的な方法なので忘れてました。まぁ、これも読むときにはギョッとしそうなので、あまり褒められた方法とは言えませんけど。
    – KoRoN
    Commented 2015年3月8日 2:12

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。