JavaScriptのバッククォートの使い方でわからないものがあります

Question

GraphQLライブラリのApollo Clientを勉強しています。

https://www.apollographql.com/docs/react/recipes/static-typing.html

その中で以下のようなコードが出てきますが、この時のgqlの後に急にバッククオートが来るのは、JavaScriptのどのような仕様に基づいているのでしょうか。

import gql from "graphql-tag";

const HERO_QUERY = gql`
  query GetCharacter($episode: Episode!) {
    hero(episode: $episode) {
      name
      id
      friends {
        name
        id
        appearsIn
      }
    }
  }
`;

上手い検索の仕方もわからず困っております。
よろしくお願いします。

Answer 1

Tagged templatesと言います。
MDNではタグ付けされたTemplate literalと訳されているようです。以下リンクをご参照ください。
タグ付けされたTemplate literal

タグ付きテンプレートとかタグ付きテンプレートリテラルという言い方も見かけたことがあります。

Comments

[ti1050]

なるほど！リンク先を読んでなんとなく理解することができました。
ありがとうございます！m(_ _)m

Answer 2

これは私も初見で仰け反ったので回答します。
まずこれは「テンプレート文字列」の使い方の一つです。
テンプレート文字列自体がES2015という比較的新しい仕様で追加された構文で古い本だとサポートしていないでしょう。
気になるならMDNのサイトで調べてみて下さい。

で、一言で言うと関数実行のカッコを省略するみたいな事ができます。

ですが、初見で面食らった様に混乱しますし、
カッコを省略できる位の価値しかないので、
私は忘れて良いんじゃないかな？と思ってます。

Comments

[maisumakun]

VDOM系のライブラリで、これを使ってVDOMを構築する…みたいなものを見かけた記憶がかすかにあります。

もっとも、JSXや.vueのような専用の書き方をできる方がさらにやりやすいかとは思います。

[ti1050]

miyabi-sunさん、回答ありがとうございます！

Answer 3

上手い検索の仕方もわからず困っております。

「JavaScript 基本文法」とか「JavaScript 構文」とかで検索します。
断片的なコードじゃなくて、JavaScriptの文法全体についてのページが見つかります。

この件だけについてピンポイントで調べるなら「JavaScript バッククォート」で検索します。

Comments

[ti1050]

ありがとうございます！