【jQuery (CoffeeScript)】属性の値に変数や式を使う〜式展開の色々〜

f:id:song-of-life1352607:20180113005923j:plain

こんにちは、マリンです。

今回はjQueryでの式展開についてです。

よくdata属性で要素を絞り込む際の値に

事前に定義した変数を使いたい時があるのですが、

そんな時にいつも職場で使われている記述が理解できず、

色々ググってみたのに見つからない。。。

でも調べているうちに「はっ！！」と気付いたのです。

「これ、式展開だ！！」と。

ってことでこういった副題が付いています。笑

例
jQueryでの式展開の色々
- #{}
- +
- ,
まとめ

例

まず今回もRailsの中で検証してますので、

基本、記述方式はCoffeeScriptです。

では今回検証で使いました例のソースコードです。

# HTML
<ul id="lists">
  <li class="a" data-index="1">AAA</li>
  <li class="b" data-index="2">BBB</li>
  <li class="c" data-index="3">CCC</li>
</ul>
<button type="button" class="has-element">HasElement</button> 

# jQuery
$('.has-element').on 'click', () ->
      class_a = "a"
      index = 2

まあボタンはどうでもいいんですけど、

これ押すとコンソールに表示されるって使用でつけました。

このクリックイベントの中に後述の式展開を書いていく感じで。

以後そこのみ書いていきます。

jQueryでの式展開の色々

やり方は3つあります。

#{}
+
,

#{}

これが純粋な式展開ではないかと思います。

[ソースコード]

// class属性で検索
classA = $('#lists').find("[class = #{class_a}]")
console.log(classA.text)

// data属性で検索
classB = $('#lists').find("[data-index = #{index}]")
console.log(classB.text)

// 展開部分の中で計算する
classC = $('#lists').find("[data-index = #{index + 1}]")
console.log(classC.text)

[実行結果]

AAA
BBB
CCC

それぞれ属性値の指定に、予め値を入れておいた変数を使用しています。

もちろんその中でさらに計算させることも可能です。

JSやjQueryでは' 'と" "を区別しないみたいなんですが、

これはcoffeeだからだなんでしょうね、

#{}の式展開はダブルクォーテーションの中じゃないと使えませんでした。

+

こちらは前後の文字列と+を使って連結する方法。

[ソースコード]

// class属性で検索
classA = $('#lists').find("[class = " + class_a + "]")
console.log(classA.text)

// data属性で検索
classB = $('#lists').find('[data-index = ' + index + ']')
console.log(classB.text)

// 展開部分の中で計算する
classB = $('#lists').find('[data-index =' + (index + 1) + ']')
console.log(classC.text)

実行結果は前回と同じです。

classBに注目していただきたいのですが、

これは単純に一つの文字列を前後に分け、

その間に変数を入れて繋げる方法ですので、

クォーテーションはシングルでもダブルでも大丈夫です。

その次のさらに計算をする方法ですが、

こちらは計算部分をカッコで囲ってください。

計算の順番が関係するということですね。

これをしないと左から順番通りに計算され、

前半の文字列にindexの中身が足されたものに+1をすることになり、

「は？」と怒られます。

正直、ここまでやってきて初めて計算の順番を意識しました。

,

最後は文字列の後ろに展開したものをくっつけるときに使えます。

文字列の間には入れられませんので、表題とはズレた番外編です。

[ソースコード]

# 値取得部分
classA = $('#lists').find("[class = #{class_a}]")

# 表示部分（展開）
console.log("classA: ", classA.text)

[実行結果]

classA: AAA

今回の展開部分は後半の

("classA: ", classA.text)の部分です。

文字列の後にカンマで区切ったclassA.textを展開してくっつけています。

変数の中身などを展開して文字列に連結しているので、

多分式展開の一種ではないかと思います。。。

まとめ

今回そもそもの問題だった「記述が理解できない」部分に関しては、

おそらく式展開の問題ではなく、コードの読解力だと思います。

真ん中のclassB = $('#lists').find('[data-index = ' + index + ']')

の記述でハマったのですが、

findのカッコ内が' 'で囲まれていた時点できちんと

文字列 + 変数という構造であることを理解できていればこんなことにはなりませんでした。

なぜか' + index +'という塊で捉えてしまったんですよね。

まぁおそらく私のような間違いを犯す人はいないと思いますが、

式展開の方法は一つではないとわかっていれば、

他人が書いたコードを読むときなどにちょびっとだけ役立てるのではないかな？

なんて思ったりなんかして。。。

Web Marina

日々の業務や勉強などで得た知識をアウトプットしていきます。

【jQuery (CoffeeScript)】属性の値に変数や式を使う〜式展開の色々〜

例

jQueryでの式展開の色々

#{}

+

,

まとめ