JavaScript の中で JavaScript を記述できる「js-template-tag」の紹介

JavaScript でプログラムを記述している際に JavaScript を書きたくなることは多々あります。人間とはそういう生き物です。例外はありません。

• アプリケーション全体は JavaScript で実装しているが、特定の処理だけは JavaScript で実装したい！
• JavaScript の柔軟性と JavaScript の柔軟性を合わせたプログラムを書きたい！
• 今すぐ JavaScript を書きたいのに手元には JavaScript しかない！

そんなときに便利な js-template-tag をリリースしたので紹介します。

https://www.npmjs.com/package/js-template-tag
https://github.com/koki-develop/js-template-tag

使い方

js タグを使ってテンプレートリテラルに JavaScript プログラムを記述するとそのまま実行されます。

import { js } from "js-template-tag";

js`
  function sayHello(name) {
    console.log(\`Hello, \${name}!\`);
  }

  sayHello("JavaScript");
`;
// => Hello, JavaScript!

値を返すこともできます。

import { js } from "js-template-tag";

const value = js`
  (() => "Hello, JavaScript")();
`;

// これでも同じ
// const value = js`
//   "Hello, JavaScript"
// `;

console.log(value);
// => Hello, JavaScript!

当然、非同期関数や Promise も扱えます。

import { js } from "js-template-tag";

const value = await js`
  (async () => {
    await new Promise(resolve => setTimeout(resolve, 1000));
    return "Hello, JavaScript!";
  })();
`;

console.log(value);
// => Hello, JavaScript!

TypeScript

TypeScript を記述するための ts タグも提供されています。

import { ts } from "js-template-tag";

ts`
  function sayHello(name: string): void {
    console.log(\`Hello, \${name}!\`);
  }

  sayHello("TypeScript");
`;
// => Hello, TypeScript!

仕組み

eval してるだけです。

まとめ

元ネタ↓

https://x.com/jallen_dev/status/1959041181788131624