こんにちは！今日はJavaSciprtの関数実行でバッククォートが使える話です。

これ()じゃなくてこれ“!

結論

こんな感じで使おう

id`wrapper`

console.log`hello`

以下、詳しく説明していきます:)

---

まずは普通に関数を実行

名前を引数にすると挨拶する関数hello()があったとします。こんな感じに。わかりやすく古い書き方で書くね

function hello(name) {
  return 'Hello,' + name
}

名前をTomにしてみましょう、こんな感じに挨拶してくれるよ。

hello('Tom') // Hello, Tom

関数部分を今風のJSにして名前をJohnにしてみるとこう↓。挙動は同じね。

const hello = name => `Hello, ${name}`

hello('John') // Hello, John

これらは関数実行するときに関数の後ろに () を付けています。まあ、ごく普通の書き方ですね。

バッククォートによる関数実行

ところがこれらの関数実行、JSでは 引数が一定の条件を満たしていると括弧()ではなくバッククォート“で実行できる んです。

その条件とは、

• 引数が文字列
• 引数が1つ以下

の2つ。実はこれらの条件に当てはまらなくてもできるんだけど、基本的にはこの2つよ。

hello() をhello“ にしたら？

さっきのhello()はこれらの条件を両方満たしていますね↓。

• 引数が文字列(名前)
• 引数が1つ以下(1人の名前だけ)

というわけで、まずは機械的に()を“にしてみましょう。すると…

hello`'John'` // Hello, 'John'

…なんかJohnに余分なシングルクォートが付いてきましたね。では引数を取る部分でシングルクォートを抜くと…

hello`John` // Hello, John

おっいいじゃん！なんだ(”)を“に変えるだけやん！って気がしますね。しかし、実はバッククォートにはちょっとしたクセがあって…

引数を () から ([]) にしないといかん

hello関数をちょっといじって名前返すだけにします。こんな風に。

const hello = name => name

hello('John') // 'John'

この関数をバッククォートで呼び出すと…

const hello = name => name

hello`John` // ['John']

あれ？名前がそのまま帰ってくるはずが配列になってしまいました！

これはバッククォート呼び出しの謎挙動の一つで、引数が長さ1の配列になります。 なぜかは不明。

これはもうこういうものだと割り切って、

• 引数の段階で展開するか
• 最後に[0]を付けるか

すれば通常と同じような動作になります。こんな感じ

const hello1 = ([name]) => name

const hello2 = name => name[0]

hello1`John` // John
hello2`John` // John

引数を2つとりたい

名字 + 名前 でフルネームを作る関数「fullname」を作ってみる。簡単だねー

const fullname = (last, first) => last + first

fullname('安倍', '晋三') // 安倍晋三

これをカリー化してみよう。

const fullname = last => first => last + first

fullname('安倍')('晋三') // 安倍晋三

結果は同じだけど引数は1つだけだね!そう、カリー化して引数を1つにすればバッククォートでも引数を2つ以上取れるんです！

というわけで、バッククォートで安倍総理を呼び出します。

const fullname =
  ([last]) =>
  ([first]) =>
    last + first

fullname`安倍``晋三` // 安倍晋三

ちなみにバッククォートと通常のを混ぜたりもできる。

const fullname =
  ([last]) =>
  first =>
    last + first

fullname`安倍`('晋三') // 安倍晋三

引数を数字以外にしたい

これはあんまり綺麗じゃない。文字列で取ってから型変換する流れになります。sum関数でみてみよう

const sum = n => m => n + m

sum(10)(32) // 42

これをバッククォートでもできるけど、やっぱ綺麗じゃないね。

const sum = n => m => n[0] | (0 + m[0]) | 0

sum`10``32` // 42

使いどころ

正直**殆どない。**これだけ言っといてあれだけど。でも便利なのもいくつかあります。

IDの取得

IDの取得はかなり綺麗に書けます。jQueryよりもシンプル！こう

id = n => document.getElementById(n[0])

id`wrapper` //

可読性もいいね・

console.log

console.logも便利。配列になるけどconsoleは中身見れればいいよね！

console.log`hello` // [hello]

consoleなんてすぐ書いては消してだろうし、タイプ量減るのは嬉しいね！

おわりに

バッククォートの普通の用途は文字列の中に変数使う時と改行含みの文字列だろうけど、 こんな使い方もあるよって分かってるとJS書くのが楽しくなると思うよ！！！

`みんなもバッククォート、使ってみてくれよな！`