styled-componentsとは

React向けにCSSをいい感じに書かせてくれるライブラリです。

const MyComponent = styled.div`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

render(<MyComponent />);

こんな感じで、記述できることはご存知かと思いますが、 styled.div`xxx` って何？と思いませんか？僕は思いました。

Tagged Template Literalというらしい

知りませんでした。

使い方

文法

こんな感じで、普通に関数を定義すればよいです。

function template() {
  // do something.
}

こんな感じで使います。

template`This is template`;

関数の呼び出され方

こうやって呼び出すと

template`This is ${foo} temp${bar}late`;

こんな感じで引数がわたってきます。

function template(arg1, arg2) {
  // arg1 = ["This is ", " temp", "late"];
  // arg2 = foo
  // arg3 = bar
}

第一引数は、${}で区切った文字列が配列で得られます。また、${}が文字列の最後に記述されていた場合は、配列の最後に空文字が入ります。${}が先頭にある場合も同様の挙動です。
${}の中身は、第二引数以降で得ることができます。

ユーザーが${}をいくつ使うかわかったものではありませんので、こんな感じで書くのが賢いのでしょう。
また、arg1とargsは交互に繋げると、もとの文字列が得られるようになっていますので、ご活用ください。

function template(arg1, ...args) {
  // arg1 = ["This is ", " temp", "late"];
  // args = [foo, bar]
}

使い道(追記)

ちょっと使い道を思いついたので、メモしておきます。
普通にconsole.log(`foo is ${foo}`);とやると、foo is [object Object]と出てしまうので、stringifyしてくれるとかっちょいいんじゃないでしょうか。
デバッグログで、適当にオブジェクトを挟めるのは助かりますね。

function log(texts, ...objects) {
  console.log(
    texts.map((text, i) => `${text}${JSON.stringify(objects[i]) || ""}`).join(""),
  );
}

const foo = {
  foo: "foo",
};
const bar = {
  bar: "bar",
}

log`foo is ${foo} bar is ${bar}`;
// foo is {"foo":"foo"} bar is {"bar":"bar"};

以上です。よろしくお願いいたします。